dom中node类型的属性和方法

宝寶宝

于 2021-09-13 15:18:09 发布

阅读量217

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_43800477/article/details/120266594

版权

javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

属性

nodeType

用来表示节点类型

Document--> 9;Element -->1;TextNode -->3;Comment--> 8

document 是Document构造函数的实例

document.body是Element构造函数的实例

document.body.firstChild 是TextNode构造函数的实例

nodeName

该属性取决于节点类型，如果是元素类型，值为元素的标签名

nodeValue

该属性取决于节点类型，如果是元素类型，值为null

parentNode

指向文档树中的父节点。

previousSibling

兄弟节点中的前一个节点

nextSibling

兄弟节点中的下一个节点

firstChild

childNodes列表中的第一个节点

lastChild

childNodes列表中的最后一个节点

ownerDocument

指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

方法：

hasChildNodes()

包含一个或多个子节点的情况下返回true

操作节点

以下四个方法都需要父节点对象进行调用!

appendChild()

向childNodes列表末尾添加一个节点。返回新增的节点。

insertBefore() //第一个参数：要插入的节点；第二个参数：作为参照的节点；

被插入的节点会变成参照节点的前一个同胞节点,同时被返回。如果第二个参数为null将会将该节点追加在NodeList后面

replaceChild() //第一个参数：要插入的节点；第二个参数：要替换的节点；

要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置

removeChild() //一个参数，即要移除的节点。

移除的节点将作为方法的返回值。

其他方法

cloneNode()

用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时，表示深复制，即复制节点以及整个子节点数。参数为false的时候，表示浅复制，只复制节点本身。该方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。该方法只复制特定,子节点，其他一切都不复制。但是IE中可以复制，建议标准相同，在复制之前，移除所有事件处理程序。

normalize()

处理文档树中的文本节点，当在某个节点上调用了该方法，会删除空白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="a1">今天天气好</div><ul id="myul">
        <li>《傲慢与偏见》</li>
        <li>《龙泉》</li>
        <li>《贝多芬交响乐》</li>
    </ul>
    <script>
        //属性
        //document 9
        console.log(document.nodeType);//9
        console.log(document.body);//返回body节点
        document.body.style.backgroundColor = 'yellow';//选中body将其背景色变为黄色
        //element 1
        var ele = document.createElement('div');//createElement用来创建一个div标签
        console.log(ele.nodeType);//1
        console.log(ele.nodeName);//nodeName值为元素的标签名
        console.log(ele.nodeValue);//要注意该标签是否含有标签属性
        //textNode 3
        var text = document.createTextNode('今天天气晴');//createTextNode用来创建一个文本标签
        console.log(text.nodeType);//3
        //comment注释 8
        var com = document.createComment('这是一个注释');
        console.log(com.nodeType);

        //document的属性在获取节点时，需要注意空白节点
        var myul = document.getElementById('myul');//选中id为myul的标签
        // console.log(myul.childNodes.length);返回所有的子节点个数
        console.log(myul.children.length)//返回所有的element类型的子节点个数
        var lis = myul.children;
        lis[0].style.backgroundColor = 'red';
        console.log(lis[0].parentNode);//指向li的父节点ul
        myul.previousSibling.style.backgroundColor = 'blue';//previousSibling兄弟节点中的前一个节点(前面不能有空格，不好用)
        //myul.nextSibling.style.backgroundColor = 'blue';//nextSibling兄弟节点中的下一个节点(前面不能有空格，不好用)
        console.log(myul.firstChild);//列表中的第一个节点，不好用
        console.log(myul.lastChild);//列表中的最后一个节点，不好用
        console.log(myul.ownerDocument);//返回document
        
        //方法
        console.log(myul.hasChildNodes())//有子节点就为true
        //往myul中添加一个子元素li，内容为《听妈妈的话》
        //1.创建一个文本节点
        var t = document.createTextNode('《听妈妈的话》');
        //2.创建一个element节点
        var e = document.createElement('li');
        //3.把文本放入ele中
        e.appendChild(t);
        //4.把ele放入ul中
        myul.appendChild(e);

        //往myul的第二个子元素前面插入一个元素li，内容为《三年二班》
        //1.创建一个文本节点
        var t = document.createTextNode('《三年二班》');
        //2.创建一个element节点
        var e = document.createElement('li');
        //3.把文本放入ele中
        e.appendChild(t);
        //4.insertBefore放到同辈参照物的前面
        myul.insertBefore(e,lis[1]);//第一个参数是要插入的节点，第二个参数是参照

        //往myul的第一个子元素替换成《千里之外》
        //1.创建一个文本节点
        var t = document.createTextNode('《千里之外》');
        //2.创建一个element节点
        var e = document.createElement('li');
        e.style.backgroundColor = 'red';
        //3.把文本放入ele中
        e.appendChild(t);
        //4.替换某个dom
        myul.replaceChild(e,lis[0]);//第一个参数是替换成什么，第二个参数是替换哪个

        //移除某一个节点
        myul.removeChild(lis[0]);

        //克隆某个节点
        var a1 = document.getElementById('a1');//获得id为a1的标签
        var a2 = a1.cloneNode(true);
        //如果没有参数的情况下为浅拷贝，不拷贝内容。
        //若希望拷贝内容，可以指定值为true,变成深拷贝
        //需要注意事件，因为在主流浏览器中，事件深拷贝时，不会被拷贝
        //但是ie浏览器会拷贝，所以在拷贝有事件的标签中，建议先删除事件
        console.log(a2);


        var t = document.createTextNode('hello');
        a1.appendChild(t);
        console.log(a1.childNodes.length);
        a1.normalize()//合并
        console.log(a1.childNodes.length);
        



</script>
</body>
</html>