文档对象模型DOM之Node类型

最新推荐文章于 2021-04-12 11:20:32 发布

Abel_01_xu

最新推荐文章于 2021-04-12 11:20:32 发布

阅读量219

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Abel_01_xu/article/details/79693361

版权

JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

【DOM】

文档对象模型是针对HTML和XML文档的一个API（应用程序编程接口），它描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。

【Node类型】

【节点层次】
DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点又分为不同类型，每种类型表示文档中不同的信息及标记，每个节点都拥有各自的特点、数据和方法，另外与其他节点也存在某种关系。

JS中所有节点类型都继承自Node类型
节点类型（nodeType）	对应的数值常量	备注
Node.ELEMENT_NODE	1	nodeName的值是元素的标签名。对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值始终为null
Node.ATTRIBUTE_NODE	2	每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，因此可以通过位置来访问这些节点。记住：DOM结构的变化能够自动反映在NodeList对象中。
Node.TEXT_NODE	3	nodeList可以转换为数组，方法：Array.prototype.slice.call(someNode.childNodes,0);
Node.CDATA_SECTION_NODE	4	包含在childNodes列表中的所有节点都具有相同的父节点，通过属性parentNode得到包含在childNodes列表中的每个节点相互之间都是同胞节点
Node.ENTITY_REFERENCE_NODE	5	childNodes列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
Node.ENTITY_NODE	6	appendChild()，向childNodes列表的末尾添加节点
Node.PROCESSING_INSTRUCTION_NODE	7
Node.COMMENT_NODE	8
Node.DOCUMENT_NODE	9
Node.DOCUMENT_TYPE_NODE	10
Node.DOCUMENT_FRAGMENT_NODE	11
Node.NOTATION_NODE	12

值得注意的是，在IE中是无法访问到上述节点类型的，只能访问到其数值常量，因为IE并没有公开Node类型的构造函数。为了确保跨浏览器兼容，最好将nodeType属性与数字值进行比较。

【示例】

<body>
   <div id="#app">
       <ul id="#app2">
           <li>哈哈哈</li>
           <li>呵呵呵</li>
           <li>六六六</li>
           <li>
               <ol>
                   <li>123</li>
                   <li>321</li>
                   <li>231</li>
               </ol>
           </li> 
       </ul>
   </div>
    <script type="text/javascript">
        var nodes = document.getElementById('#app').childNodes;
        alert(nodes.length);//3,虽然有length属性，但并不是Array的实例
        alert(nodes[0]);//[object Text]
        alert(nodes[0].nodeName);//#text
        alert(nodes[0].nodeValue);//空值
        alert(nodes[1].nodeName);//UL
        alert(nodes[2].nodeName);//#text
        alert(nodes.item(0));//[object Text]
        
        var nodes2 = document.getElementById('#app2').childNodes;
        alert(nodes2.length);//9
        for (var i = 0; i < nodes2.length; i++) {
            alert(nodes2[i].nodeName);//#text、LI、#text、LI、#text、LI、#text、LI、#text
        }
        alert(nodes2[0].previousSibling);//null
        alert(nodes2[0].nextSibling.nodeName);//LI
        //将nodeList转换为数组
        var arrayOfNodes = Array.prototype.slice.call(nodes2, 0);
        alert(arrayOfNodes.length);//9
        //值得注意的是，上述数组转换方法再IE8以及更早版本是无法运行的，因此我们必须手动枚举所有成员
        function convertToArray(nodes) {
            var array = null;
            try{
                array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器或IE9以上版本
            } catch (ex) {
                array = new Array();
                for (var i = 0; i < nodes.length; i++) {
                    array.push(nodes[i]);
                }
            }
            return array;
        }
    </script>
</body>

Abel_01_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文档对象模型DOM之Node类型

【DOM】文档对象模型是针对HTML和XML文档的一个API（应用程序编程接口），它描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。【Node类型】【节点层次】 DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点又分为不同类型，每种类型表示文档中不同的信息及标记，每个节点都拥有各自的特点、数据和方法，另外与其他节点也存在某种关系。...
复制链接

扫一扫

专栏目录