DOM文档对象模型

DOM节点：

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

每个HTML属性是属性节点

注释是注释节点

节点的属性：

nodeName：

属性指定节点的节点名称

如果节点是元素节点，则nodeName属性返回标签名。

如果节点是属性节点，则nodeName属性返回属性的名称。

文本节点的nodeName：返回#text

文档节点的nodeName：返回#document

nodeValue：设置或返回指定节点的节点值

对于文本节点，nodeValue=文本值对于属性节点，nodeValue=属性值

对于元素节点，返回null

nodeType：返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则nodeType属性将返回1。

如果节点是属性节点，则nodeType属性将返回2。

如果节点是文本节点，则nodeType属性将返回3。

如果节点是注释节点，则nodeType属性将返回8。

如果节点是文档节点，则nodeType属性将返回9。

firstChild:childNodes (孩子节点数组)列表中第一个节点。

lastChild:childNodes (孩子节点数组)列表中的最后一个节点。

parentNode:返回父节点

previousSibling:返回当前节点之前的节点。

nextSibling:返回当前节点的下一个节点。

attributes：返回节点属性的对象集合

childNodes:返回子节点对象集合，是数组对象，包含文本节点和元素节点

children：返回子节点对象集合，是数组对象，只包含元素节点

节点树中的节点彼此拥有层级关系

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的子节点

同胞是拥有相同父节点的节点

1.查找元素

getElementById()方法可返回对拥有指定ID的第一个对象的引用

getElementsByName()方法可返回带有指定名称的对象的集合

getElementsByTagName()方法可返回带有指定标签名的对象的集合

getElementsByClassName()返回文档中所有指定类名的元素集合

2创建标签方法

document.createElement()//创建一个元素节点

document.createTextNode()//创建一个文本节点

parentNode.appendChild(newChild) //newChild被添加到孩子列表中的末端。

innerHTML属性设置或返回标签的开始和结束标签之间的HTML

getAttribute()方法返回指定属性名的属性值

setAttribute()方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值

BOM浏览器对象模型

他提供了很多对象，用来访问浏览器的功能,Bom的核心对象是window，他表示浏览器的一个实例

存储

localStorage对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除

了解：保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

计时器

1.一次性计时器：仅在指定的延迟时间之后触发一次。

setTimeout()就是人为设定一个时间后会进行一些事件的触发

方法接收两个参数，第一个参数是要进行触发的事件，第二个参数是指定的时间间隔。

2.间隔性触发计时器：每隔一定的时间间隔就触发一次。

setInterval()

方法同样接收两个参数，第一个参数是要进行触发的事件，第二个参数是指定的时间间隔。

1.取消一次性计时器

clearTimeout

2.取消间隔性触发计时器

clearInterval

懒加载和预加载

懒加载也叫延迟加载：JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载的意义及实现方式有：

意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

实现方式：

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

1.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;