DOM中的节点类型

来源：互联网发布：网络歌手成都编辑：程序博客网时间：2024/04/30 03:36

因为文档对象是由节点组成，而节点又包括：标签节点，属性节点，文本节点，注释节点

如何来区别这些节点的类型呢？需要使用nodeType,节点除了有nodeType，还有nodeName，nodeValue

先来看下父节点和子节点

parentNode 获取父节点（或者是父元素），节点与元素是等价的

childNodes 是DOM的标准属性，不但可以获取标签节点，还可以获取标签之间的文本节点（包括空白节点），但是IE8及之前的浏览器会忽略空白文本节点

children不是标准的DOM属性，但是所有的浏览器都支持使用，它只会获取标签节点，而忽略空白的文本节点，非空白的文本节点则不会忽略

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body><div class="box">    <ul id="ul">aaa        <li>111</li>        <li>222</li>        <li>333</li>        <li>444</li>    </ul></div><script>//    获取对象    var ul = document.getElementById("ul");//    获取ul标签的父元素,parentNode是获取当前标签的父元素    var div = ul.parentNode;

//    获取ul标签下的所有的子节点，有childNodes和children两种方法//    childNodes是DOM的标准属性，不但可以获取标签节点，还可以获取标签之间的文本节点（包括空白节点），但是IE8及之前的浏览器会忽略空白文本节点,非空白的文本节点则不会忽略    var lis = ul.childNodes;    console.log(lis.length);    <span style="color:#ff0000;">//打印的结果为：9</span>//    children不是标准的DOM属性，但是所有的浏览器都支持使用，它只会获取标签节点，而忽略文本节点    var liss = ul.children;    console.log(liss.length);   <span style="color:#ff0000;">//打印的结果为：4</span>    for(var i = 0; i < lis.length; i++) {        console.log(lis[i].nodeType);   //获取节点的类型        console.log(lis[i].nodeName);   //获取节点的名字        console.log(lis[i].nodeValue);  //获取节点的值    }    var box = div.getAttributeNode("class"); //获取div标签的class属性节点;    console.log(box.nodeType);  //获取属性节点的类型    console.log(box.nodeName);  //获取属性节点的名字    console.log(box.nodeValue); //获取属性节点的值</script></body></html>

文本节点和标签节点：