DOM总结

一、DOM

1.1 属性

以下是所有节点都有的属性

1.nodeType判断节点类型，nodeType=1 元素节点  nodeType=2 属性节点   nodeType=3 文本节点

为了确保跨浏览器兼容，最好将nodeType值与数字比较。

2.nodeName节点名称。对于元素节点，nodeName中保存的始终都是元素的标签名，nodeValue的值则始终都是null。

3.节点关系（都不保证是元素节点）

1)childNodes 属性查看子节点，保存的是NodeList对象，是一种类数组对象，用于保存有序的节点。其length属性是变化的

可以通过Array.prototype.slice()方法将其转换为数组。

2)parentNode 该属性指向文档树中的父节点。

3)previousSibling  前一个相邻的兄弟，nextSibling 后一个相邻的兄弟，兄弟节点不保证是元素节点

4)firstChild  lastChild

5)hasChildNodes()节点是否有子节点，这个方法在节点包含一或多个子节点的情况下返回true

6)ownerDocument该属性指向表示整个文档的文档节点

1.2 操作节点的方法

1）appendChild()向childNodes列表的末尾添加一个节点，返回新增的节点，参数是新节点

如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。

2）insertBefore(要插入的节点，作为参照的节点)，插入节点后，被插入节点会变成参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。调用这个方法的是父节点

3）replaceChild(要插入的节点，要替换的节点),要替换的节点将由这个方法返回并从文档数中被移除，同时由要插入的节点占据其位置。

4）removeChild(要移除的节点),被移除的节点作为方法的返回值

5）cloneNode()用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()接受一个布尔值参数，表示是否进行深复制。true：深复制，复制节点及其整个子节点树

false:浅复制，只复制节点本身。复制后返回节点副本属于文档所有，但并没有为它指定父节点。

cloneNode()不会复制添加到DOM节点中的JavaScript属性，因此建议在复制之前先移除事件处理程序。（IE除外）。

1.3 查找元素的方法

1）document.getElementById() 找到返回该元素，没找到返回null

IE7及较低版本有个怪癖：name特性与给定ID匹配的表单元素（<input>、<textarea>、<button>、<select>）也会被该方法返回。如果有哪个表单元素的name特性等于指定的ID，而且该元素在文档中位于带有给定ID的元素前面，那么IE就会返回那个表单元素。为了避免IE中存在的这个问题，最好的办法是不让表单字段的name特性与其他元素的ID相同。

2）document.getElementsByTagName() 返回的是包含0或多个元素的NodeList。这个方法会返回一个HTMLCollection对象，作为一个动态集合。

HTMLCollection对象还有一个方法，namedItem()，使用这个方法可以通过元素的name特性取得集合中的项。

<img src='' name='myImage'>

var myImage=document.getElementsByTagName('img').namedItem('myImage');

HTMLCollection对象也可以用方括号索引，传入的是数字，就调用item方法，传入的是字符串就调用namedItem方法。

3）document.getElementsByName()

1.4 取得特性

1）getAttribute()

2) setAttribute(要设置的特性名，值)

如果特性已经存在，会以指定的值替换现有的值；如果特性不存在，就创建该属性并设置相应的值。

3) removeAttribute()

1.5 创建元素

1）document.createElement(要创建元素的标签名)

2）document.createTextNode(要插入节点中的文本)

3）DocumentFragment类型

虽然不能把文档片段直接添加到文档中，但可以将它作为一个仓库来使用，即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段，可以使用document.createDocumentFragment()方法。

var fragment=document.createDocumentFragment();

二、 DOM扩展 HTML5中引入的扩展

2.1 getElementsByClassName() 

传入多个类名时，类名的先后顺序不重要,支持的浏览器有：IE9+,Firefox3+,Safari3.1+,Chrome,Opera9.5+.

2.2 焦点管理

1)document.activeElement属性，始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有页面加载，用户输入（通常指tab键）和在代码中调用focus()方法。默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。

2）document.hasFocus()方法，确定文档是否获得了焦点。

 支持的浏览器有：IE4+,Firefox3+,Safari4+,Chrome,Opera8+。

2.3 插入标记

1）innerHTML

读模式：返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。

写模式：根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

2）outerHTML

读模式：返回调用它的元素及所有子节点的HTML标签。

写模式：根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

2.4 插入文本

1）innerText

操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。

设置innerText属性会移除先前存在的所有子节点，完全改变了DOM子树。永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，就必须要对文本进行HTML编码。

利用这一点，可以通过innerText属性过滤掉HTML标签。方法是将innerText设置为等于innerText,这样就可以去掉所有HTML标签。

div.innerText=div.innerText;

2.5 专有扩展

children属性

只包含元素中同样还是元素的子节点，除此之外与childNodes没有什么区别。

支持children属性的浏览器有IE5，Firefox3.5,Safari2,3,Opera8,Chrome. 

三、DOM2和DOM3

3.1 样式

style对象包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。对于使用短划线分隔的CSS属性，必须将其转换成驼峰大小写形式，才能通过JS来访问。

特例：float属性，因为float是JS的关键字，因此不能用作属性名。所以他的属性名为cssFloat；在IE中使用styleFloat;

1）DOM样式属性和方法

cssText:访问style特性中的CSS代码；读：返回浏览器对style特性中CSS代码的内部表示。写：赋给cssText的值会重写整个style特性的值。

length:应用给元素的CSS属性的数量。与item方法配套使用，以便迭代在元素中定义的CSS属性。

getPropertyValue(propertyName):返回给定属性的字符串值

item(index):返回给定位置的CSS属性的名称

2）计算的样式

document.defaultView.getComputedStyle()方法，接受两个参数：要取得计算样式的元素和一个伪元素字符串（:after）。如果不需要伪元素信息，第二个参数可以是null。

var div=document.getElementById('myDiv');

var computedStyle=document.defaultView.getComputedStyle(div,null);

IE不支持getComputedStyle()方法，支持currentStyle属性。

var computedStyle=div.currentStyle;

所有计算的样式都是只读的；不能修改计算后样式对象的CSS属性。计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值得CSS属性都会表现在计算后的样式中。

3.2 元素大小

1）偏移量

包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（不包括外边距）。

offsetHeight：元素在垂直方向上占用的大小，以像素计。包括元素的高度，（可见的）水平滚动条的高度、上边框的高度和下边框的高度。

offsetWidth:元素在水平方向上占用的空间大小，包括元素的宽度，（可见的）垂直滚动条宽度，左边框宽度和右边框宽度。

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如<td>的offsetParent是作为祖先元素的<table>元素，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。

2)客户区大小

指的是元素内容及其内边距所占空间大小。

clientWidth元素内容区宽度加上左右内边距宽度    

clientHeight元素内容区高度加上上下内边距高度。滚动条占用的空间不计算在内。

确定浏览器的视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight

function getViewPort(){
　　if(document.compatMode=='BackCompat'){// IE之前的版本
　　　　return{
　　　　　　document.body.clientWidth,
　　　　　　height:document.body.clientHeight
　　　　};
　　}else{
　　　　return{
　　　　　　document.documentElement.clientWidth,
　　　　　　height:document.documentElment.clientHeight
　　　　};
　　}
}

 3)滚动大小

包含滚动内容的元素的大小。

scrollHeight:在没有滚动条的情况下，元素内容的总高度。

scrollWidth:在没有滚动条的情况下，元素内容的总宽度。

scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop:被隐藏在内容区域上方的像素数。同过设置这个属性可以改变元素的滚动位置。

在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证跨浏览器的环境下得到精确的结果。

function getPagePort(){
　　if(document.compatMode=='BackCompat'){// IE之前的版本
　　　　return{
　　　　　　Math.max(document.body.scrollWidth,document.body.clientWidth),
　　　　　　height:Math.max(document.body.scrollHeight,document.body.clientHeight)
　　　　};
　　}else{
　　　　return{
　　　　　　Math.max(document.documentElement.scrollWidth,document.documentElment.clientWidth),
　　　　　　height:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
　　　　};
　　}
}

通过scrollLeft和scrollTop属性既可以确定元素当前滚动状态，也可以设置元素的滚动位置。在元素尚未被滚动时，这两个属性值都等于0.如果元素被垂直滚动了，那么scrollTop的值会大于0，表示元素上方不可见内容的像素高度。scrollLeft同理。这两个属性都是可以设置的，因此将元素的scrollLeft和scrollTop设置为0，就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部，如果不是就将其滚回顶部。

function scrollToTop(element){
  if(element.scrollTop!=0){
       element.scrollTop=0;     
    }  
}