DOM的节点操作

须臾不敢忘

已于 2022-11-01 18:02:43 修改

阅读量1.1k

点赞数 8

文章标签： javascript 前端 html

于 2022-10-31 18:27:17 首次发布

本文链接：https://blog.csdn.net/m0_74331160/article/details/127620460

版权

1、DOM：文档对象模型。核心对象是document

document.body

 2、DOM树：浏览器的JavaScript引擎（谷歌的V8引擎）在解析页面时，采用树形结构来存放页面元素

 3、DOM操作元素的样式：

（1）元素对象名.style.样式属性名 = 属性值

（2）HTML5对象样式的操作：

a、一个元素的class属性可以有多个值：作用是在保留原有样式的基础上添加新的样式

b、如何在js程序运行过程中动态的添加class属性值：

classList属性：是元素的class属性的列表

 4、classList属性提供的方法和属性

（1）属性：length —— 某个标签的class属性值的个数（即多少个类名）

（2）方法：

a、add(‘字符串’)：给元素添加类名。一次只能添加一个

b、remove(‘字符串’)：将元素的类名删除。一次只能删除一个

c、toggle(‘字符串’)：若类名存在则删除，不存在则添加

d、item(index)：根据index，来获取元素的类名

e、contains（‘类名’）：判断元素是否含有给定的类名，若有返回true，没有返回false

 5、DOM中节点的操作：采用操作节点的方式来操作页面中的元素

（1）获取节点时使用的属性：

a、firstChild：获取当前节点的首个子节点。

注意：换行符、空格等也是节点

b、nextSibiling：返回同一层级中指定节点之后紧跟的节点

c、lastChild：访问当前节点的最后一个子节点

d、previousSibling：返回同一层级中指定节点的前一个节点

e、nodeName：节点的名称

f、nodeValue：节点的值

g、nodeType：节点类型

1：表示当前节点的类型是标签（元素）

2：表示属性节点

3：表示文本节点

h、parentNode：访问当前元素节点的父节点

i、childNodes：当前节点的所有子节点

提醒

getAttribute(‘id’)：用来获取元素的id属性值

getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）

强调：childNodes属性和children属性的区别

（1）相同点：都可以获取子元素

（2）不同点：

childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

children返回的元素节点（即标签），返回值类型是HTMLCollection

6、追加节点

（1）创建元素节点： document.createElement()

（2）在指定节点的末尾追加节点： appendChild(newNode)

（3）在指定节点之前添加节点

insertBefore(newNode，node)：将结点newNode插入到节点node之前

该方法需要通过插入节点(node)的父节点来调用

<body>
    <button id="btn">插入元素</button>
    <h2 id="ht">美羊羊</h2>
    <input type="text" id="node_value">
    <script>
        //获取按钮
        let btn = document.querySelector('#btn')
        //给按钮注册click事件
        btn.addEventListener('click',function(){
            //获取input值
            let txt = document.querySelector('#node_value').value
            //创建文本节点
            let text = document.createTextNode(txt)
            //创建元素节点
            let h2 = document.createElement('h2')
            //将文本节点追加到h2中
            h2.appendChild(text)

            //获取插入位置上的标签：<h2 id="ht">美羊羊</h2>
            let ht = document.querySelector('#ht')
            if (ht.parentNode) { //ht存在父节点，通过父节点调用insertBefore插入节点
                ht.parentNode.insertBefore(h2,ht)
            }
        })
    </script>
</body>

（4）创建文本节点： document.createTextNode()

        //创建一个元素节点
        let mydiv = document.createElement('div') 
        let h2 = document.createElement('h2')
        //创建文本节点
        let txt = document.createTextNode('西安市')
        //在指定节点的末尾追加节点
        h2.appendChild(txt)
        mydiv.appendChild(h2)

        document.body.appendChild(mydiv)

练习：利用DOM创建ul无序列表

        let arr = ['西游记', '红楼梦', '水浒传', '三国演义']
        let ul = document.createElement('ul')
        for (let i = 0; i < arr.length; i++) {
            let li = document.createElement('li')
            let txt = document.createTextNode(arr[i])
            li.appendChild(txt)
            ul.appendChild(li)
        }
        document.body.appendChild(ul)

7、复制节点

cloneNode（deep）

参数deep是boolean型。true/false

true：表示深度复制（将节点及其子节点都进行复制）—- 深拷贝

false：表示浅复制（只复制节点而不复制子节点）—- 浅拷贝

<body>
    <select name="" id="sec">
        <option value="">男</option>
        <option value="">女</option>
    </select>
    <hr>
    <div id="clone"></div>
    <button id="btn_false" onclick="fun(false)">浅拷贝</button>
    <button id="btn_true" onclick="fun(true)">深拷贝</button>


    <script>
        function fun(bool){
            //获取
            let sec = document.querySelector('#sec')
            //复制
            let newSec = sec.cloneNode(bool)

            let mydiv = document.getElementById('clone')
            let br = document.createElement('br')
            mydiv.appendChild(newSec)
            mydiv.appendChild(br)
        }
    </script>
</body>

 8、删除子节点

removeChild（node）

（1）参数node为要删除的节点

（2）前提：被删除的节点必须为空（没有子节点）

9、hasChildNodes()：判断当前节点是否有子节点

返回值为false：表示没有子节点

返回值为true：表示有子节点

<body>
    <div id="mydiv">
        <p>伊泽瑞尔</p>
        <p>锐雯</p>
        <p>卡莎</p>
    </div>
    <button id="btn" onclick="fun()">删除</button>
    <script>
        function fun(){
            let mydiv = document.querySelector('#mydiv')

            if (mydiv.hasChildNodes()) {
                mydiv.removeChild(mydiv.lastElementChild)
            }
        }
    </script>
</body>

10、替换节点

replaceChild（newNode，oldNode）

用newNode节点替换oldNode节点

<body>
    <h2 id="b1">可以替换文本内容</h2>
    输入标记：<input type="text" id="bj">
    <br>
    输入文本：<input type="text" id="txt">
    <br>
    <input type="button" value="替换" onclick="fun(txt.value,bj.value)">
    <script>
        function fun(txt,bj){

            let rep = document.getElementById('b1')
            
            if (rep) {
                let newNode = document.createElement(bj)

                newNode.setAttribute('id','b1')

                let newTxt = document.createTextNode(txt)

                newNode.appendChild(newTxt)

                rep.parentNode.replaceChild(newNode,rep)
            }
        }
    </script>
</body>