Javascript DOM-Node基本类型

最新推荐文章于 2023-05-15 16:50:47 发布

mannuandeyangguang

最新推荐文章于 2023-05-15 16:50:47 发布

阅读量206

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wujunlei1595848/article/details/90612987

版权

前端开发专栏收录该内容

73 篇文章 1 订阅

订阅专栏

DOM1级定义了一个Node接口，该接口作为Node类型实现;

// 节点类型（nodeType）1~12
Node.ELEMENT_NODE;  // 1
Node.ATTRIBUTE_NODE;  // 2
Node.TEXT_NODE;  // 3
Node.CDATA_SECTION_NODE;  // 4
Node.ENTITY_REFERENCE_NODE;  // 5
Node.ENTITY_NODE;  // 6
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

JavaScript中所有节点类型都继承自Node类型，所有的节点类型都共享相同的基本属性和方法；
最佳实践：对节点进行操作时，最好使用nodeType检测节点的类型;

nodeName和nodeValue

对于元素节点(nodeType === 1)，nodeName是元素标签名的大写，nodeValue的值始终是null;

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="ele">
            some text
        </div>
    </body>
    <script>
        var ele = document.getElementById("ele");
        console.log(ele.nodeType === 1);  // 输出：true
        console.log(ele.nodeName);  // 输出：DIV
        console.log(ele.nodeValue);  // 输出：null
    </script>
</html>

节点关系

节点关系可以用传统的家族关系来表示，文档树可以看做家谱；
节点的childNodes属性保存的是一个NodeList对象；

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var ul = document.getElementById("ul");
        console.log(ul.childNodes instanceof NodeList);  // 输出：True
    </script>
</html>

NodeList是一种类数组对象，但不是Array的实例，用于保存一组有序的节点，因为是基于DOM结构动态执行查询的结果，所以NodeList对象是动态变化的（例如length属性）

NodeList中节点的访问方法：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var _childNodes = document.getElementById("ul").childNodes;
        console.log(_childNodes[3]);  // 方法1
        console.log(_childNodes.item(3));  // 方法2
    </script>
</html>

NodeList对象转数组的通用方法：详见Javascript-DOM中NodeList对象转数组的通用方法
previousSibling, nextSibling, previousElementSibling, nextElementSibling, firstChild, lastChild, firstElementChild, lastElementChild 如果以上属性没有指向，则返回null

children可以过滤所有其他节点类型，返回所有元素类型的子节点：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var _children = document.getElementById("ul").children;
        console.log(_children);
    </script>
</html>

hasChildNodes() 方法用于检测是否含有该子节点
ownerDocument 属性指向于整个文档的文档节点，每个节点都有这个属性；

节点的操作

appendChild()新增节点：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ul">
            <li>
                123
            </li>
            <li>
                456
            </li>
            <li>
                789
            </li>
        </ul>
    </body>
    <script>
        var ul = document.getElementById("ul");
        var newLi = document.createElement("li");
        ul.appendChild(newLi);
        console.log(ul.childNodes.length);
    </script>
</html>

insertBefore() 包含两个参数，顺序分别是：要插入的节点和参照的节点，返回被插入的节点；
replaceChild(), removeChild() 返回的是被替换、移除的节点，被替换和移除的节点仍然在文档中存在，只不过没有了位置。
在不支持子节点的节点上调用上面提到的子节点的方法，会导致错误的发生；

其他方法

cloneNode() 创建调用这个方法的节点的一个完全相同的副本，当传入可选布尔参数为true时，将执行深拷贝；
cloneNode() 不会拷贝添加到DOM节点中的Javascript属性，例如事件处理程序；IE浏览器会连带事件处理程序一起拷贝；
最佳实践：在cloneNode()之前先移除事件处理程序；
normalize()的作用：处理文档树中的文本节点，它会删除空文本节点，合并相邻的两个文本节点。

mannuandeyangguang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript DOM-Node基本类型

DOM1级定义了一个Node接口，该接口作为Node类型实现; // 节点类型（nodeType）1~12Node.ELEMENT_NODE; // 1Node.ATTRIBUTE_NODE; // 2Node.TEXT_NODE; // 3Node.CDATA_SECTION_NODE; // 4Node.ENTITY_REFERENCE_NODE; // 5Node....
复制链接

扫一扫