DOM节点关系
DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。本文将详细描述DOM间的节点关系
节点中的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。接下来，将把DOM节点关系分为属性和方法两部分进行详细说明
属性
父级属性
parentNode
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。对于一个节点来说，它的父节点只可能是三种类型：element节点、document节点和documentfragment节点。如果不存在，则返回null
parentElement
与parentNode属性不同的是，parentElement返回的是父元素节点
[注意]在IE浏览器中，只有Element元素节点才有该属性，其他浏览器则是所有类型的节点都有该属性
123
子级属性
childNodes
childNodes是一个只读的类数组对象NodeList对象，它保存着该节点的第一层子节点
children
children是一个只读的类数组对象HTMLCollection对象，但它保存的是该节点的第一层元素子节点
123
childElementCount
返回子元素节点的个数，相当于children.length
[注意]IE8-浏览器不支持
firstChild
第一个子节点
lastChild
最后一个子节点
firstElementChild
第一个元素子节点
lastElementChild
最后一个元素子节点
上面四个属性，IE8-浏览器和标准浏览器的表现并不一致。IE8-浏览器不考虑空白文本节点，且不支持firstElementChild和lastElementChild
//ul标签和li标签之间有两个空白文本节点，所以按照标准来说，ul的子节点包括[空白文本节点、li元素节点、空白文本节点]。但在IE8-浏览器中，ul的子节点只包括[li元素节点]
- 1
- 2
- 3
同级属性
nextSibling
后一个节点
previousSibling
前一个节点
nextElementSibling
后一个元素节点
previousElementSibling
前一个元素节点
与子级属性类似，上面四个属性，IE8-浏览器和标准浏览器的表现并不一致。IE8-浏览器不考虑空白文本节点，且不支持nextElementSibling和previousElementSibling
- 1
- 2
- 3
方法
包含方法
hasChildNodes()
hasChildNodes()方法在包含一个或多个子节点时返回true，比查询childNodes列表的length属性更简单
123
contains()
contains方法接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。参数为后代节点即可，不一定是第一层子节点
[注意]IE和safari不支持document.contains()方法，只支持元素节点的contains()方法
//IE和safari报错，其他浏览器返回trueconsole.log(document.contains(document.body));
关系方法
compareDocumentPosition()
compareDocumentPosition方法用于确定节点间的关系，返回一个表示该关系的位掩码
000000 0 两个节点相同000001 1 两个节点不在同一个文档（即有一个节点不在当前文档）000010 2 参数节点在当前节点的前面000100 4 参数节点在当前节点的后面001000 8 参数节点包含当前节点010000 16 当前节点包含参数节点100000 32 浏览器的私有用途
isSameNode()和isEqualNode()
这两个方法都接受一个节点参数，并在传入节点与引用节点相同或相等时返回true
所谓相同(same)，指的是两个节点引用的是同一个对象
所谓相等(equal)，指的是两个节点是相同的类型，具有相等的属性(nodeName、nodeValue等等)，而且它们的attributes和childNodes属性也相等(相同位置包含相同的值)
[注意]firefox不支持isSameNode()方法，而IE8-浏览器两个方法都不支持
