DOM节点相关

节点分类

节点分类可以分成6类

1. Document 节点
2. DocumentType 节点
3. Element 节点
4. Attribute 节点
5. Text 节点
6. DocumentFragment 节点

节点类型	nodeName	nodeType	nodeValue
Document节点	#document	9	null
DocumentType节点	html	10	null
Element节点	大写的标签名	1	null
Attribute节点	小写的属性名	2	属性值
Text节点	#text	3	文本节点的值
DocumentFragment节点	#document-fragment	11	null

 

 

 

 

 

 

 

获取节点

获取父节点

parentNode 获取当前节点的父节点

 

获取子节点

childNodes 获取当前元素节点的所有子节点

返回了一个nodeList集合，包含了所有的子节点（文本、注释、元素、直接子元素）

children 获取Element子节点

返回元素节点（直接子元素）（注意在ie中获取的包含了注释子节点）

firstChild 获取当前元素的第一个子节点

返回的可能是文本、注释、元素（第一个直接子节点）

firstElementChild 获取当前元素节点的第一个Element子节点

返回的是第一个直接元素子节点（元素节点）

lastChild 获取当前元素节点的最后一个子节点

返回最后一个直接子元素（文本、注释、元素）

lastElementChild 获取当前元素节点的最后一个Element子节点

返回的是最后一个直接元素子节点（元素节点）

 

获取同级的节点（兄弟节点）

previousSibling 获取当前节点的前一个同级节点

获取的是上一个兄弟节点（文本、注释、元素）

previousElementSibling 这个属性在不考虑ie9以下时可以找到上一个兄弟元素节点

nextSibling 获取当前节点的最后一个同级节点

获取下一个兄弟节点（文本、注释、元素）

nextElementSibling 在不考虑ie9以下时，获取下一个兄弟元素节点

ownerDocument 获取该节点的文档根节点，相当于document 获取文档的根  document  nodeType：9

 

获取当前元素的所有属性节点

attributes 获取当前元素节点的所有属性节点集合

 

1、hasChildNodes()　检查元素是否有子节点

　　如果有子节点返回true

　　如果没有则返回false

　　注意：文本注释都可以被检测到

 

2、contains()　检测某个节点是否是另个节点的后代节点（子孙元素也可以检测）

父元素.contains(后代节点)
// 返回值为 true 和 false
// 注意点：检测自身返回的也是true

 

3、isEqualNode()　检测两个节点是否一样（必须是一模一样）

条件：节点类型相同

　　拥有相同的nodeName、nodeValue、localName、nameSpaceURL以及前缀所有后代均为相同的子节点

　　拥有相同的属性和属性值（属性次序不必一致）

元素1.isEqualNode(元素2)
// 返回值为 true 和 false