DOM操作

最新推荐文章于 2024-11-08 14:35:14 发布

Chenche_

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量78

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Chenche_/article/details/127639388

版权

一、DOM的操作

1、复制节点：

cloneNode（deep）

参数deep是boolean型。true/false

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

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

<select id="sex">
        <option value="%">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <hr>
    <div id="div_clone"></div>
    <button id="clone_false" onclick="copyNode(false)">浅拷贝</button>
    <button id="clone_true" onclick="copyNode(true)">深拷贝</button>
    <script>
        function copyNode(bool){
            //1.获取select标签
            let sel = document.getElementById('sex')
            //2.复制select
            let newNode = sel.cloneNode(bool)
            //3.获取div
            let mydiv = document.getElementById('div_clone')
            let br = document.createElement('br')
            mydiv.appendChild(newNode)
            mydiv.appendChild(br)
        }
    </script>

2、删除子节点：

removeChild（node）

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

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

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

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

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

<div id="dd">
        <p>钱学森</p>
        <p>蒋英</p>
        <p>金庸</p>
    </div>
    <button type="button" id="btn_del" onclick="delNode()">删除</button>
    <script>
        function delNode(){
            let div = document.getElementById('dd')
            if(div.hasChildNodes()){
                div.removeChild(div.lastChild)
            }
        }
    </script>

4、替换节点：replaceChild（newNode，oldNode）

用newNode节点替换oldNode节点

function replaceNode(txt,bj)
{
 var rep = document.getElementById("b1");
 if(rep)
 {
 var newNode = document.createElement(bj);//创建新节点
 newNode.setAttribute("id","b1");//设置新节点的id属性
 var newTxt = document.createTextNode(txt);//创建节点文本
 newNode.appendChild(newTxt);//将文本添加到节点中
 rep.parentNode.replaceChild(newNode,rep);//替换节点
 }
}
</script>
<body>
<h2 id="b1">可以替换文本内容</h2>
 输入标记：
 <input id="bj" type="text" /><br /><br />
 输入文本：
 <input id="txt" type="text" /><br /><br />
 <input type="button" value="替换" onclick="replaceNode(txt.value,bj.value)" />