JS--操作DOM树

Posted 2020-11-06 小屈工作室

<ul id="ul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
<li id="li4">444</li>
</ul>
<div id="div1"></div>
<br />
<input type="button" onclick="insert1();" value="insert" />
<input type="button" onclick="remove1();" value="remove" />
<input type="button" onclick="replace1();" value="replace" />
<input type="button" onclick="cloneNode1();" value="clone" />
<script type="text/javascript">
/*操作DOM树
insertBefore(newNode,oldNode):在节点之前加入新节点
removeChild(delNode):通过父节点删除子节点,不能自己删除自己
replaceChild(newNode,oldNode):替换节点 第一个参数：替换成的节点，第二个参数：被替换的节点 必须使用父节点进行替换，不能自己替换自己
cloneNode(boolean):是否复制，是true，否，FALSE
*/

function insert1() {
//获得ul根节点
var ul1 = document.getElementById("ul1");
//创建li
var li5 = document.createElement("li");
//创建文本
var text5 = document.createTextNode("555");
//把文本添加到li下面
li5.appendChild(text5);
//获得同级li
var li4 = document.getElementById("li4");
//把li添加到ul下面 insertBefore(newNode,oldNode);在节点之前加入新节点
ul1.insertBefore(li5, li4);

}

function remove1() {
//获得需要删除的节点
var li3 = document.getElementById("li3");
//获得ul根节点,2种方式
var ul1 = document.getElementById("ul1");
var ul2 = li3.parentNode;

//通过父节点删除子节点,不能自己删除自己
ul2.removeChild(li3);
}

function replace1() {

//获得根节点
var ul = document.getElementById("ul1");
//获得被替换的li子节点
var li2 = document.getElementById("li2");
//创建li标签
var li5 = document.createElement("li")
//创建新的li文本
var text5 = document.createTextNode("yyy");
//把文本添加到li下面
li5.appendChild(text5);
//replaceChild(newNode,oldNode)方法，替换节点 第一个参数：替换成的节点，第二个参数：被替换的节点 必须使用父节点进行替换，不能自己替换自己
ul.replaceChild(li5, li2);

}

function cloneNode1(){
/*
1、获得ul
2、执行复制方法cloneNode方法复制true
3、把复制之后的内容放到div里面去
获取到div
appendChild方法
*/
//获得根节点
var ul=document.getElementById("ul1");
//执行复制方法,复制ul
var ulcopy=ul.cloneNode(true);
//把复制之后的内容放到div里面
var div1=document.getElementById("div1");
div1.appendChild(ulcopy);
}
</script>