示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <div id="div1"></div> <script type="text/javascript"> var div1 = document.getElementById("div1"); console.log(div1.nodeType); //结点类型 1 Element 代表元素 console.log(div1.nodeName); //DIV 结点名称 var id = div1.getAttributeNode("id"); //获得div1的属性结点id console.log(id.nodeType); //2 Attr 代表属性 console.log(id.nodeName); //id 结点名称 </script> </body> </html>
结果:
4.2、节点关系
nodeType | 返回节点类型的数字值(1~12) |
nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
parentNode | 父节点 |
parentElement | 父节点标签元素 |
childNodes | 所有子节点 |
children | 第一层子节点 |
firstChild | 第一个子节点,Node 对象形式 |
firstElementChild | 第一个子标签元素 |
lastChild | 最后一个子节点 |
lastElementChild | 最后一个子标签元素 |
previousSibling | 上一个兄弟节点 |
previousElementSibling | 上一个兄弟标签元素 |
nextSibling | 下一个兄弟节点 |
nextElementSibling | 下一个兄弟标签元素 |
childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
ownerDocument | 指向整个文档的文档节点 |
节点关系方法:
hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系
示例:
内容版权声明:除非注明,否则皆为本站原创文章。