操作dom树:
appendChild方法:1.添加节点到末尾,2.类似于剪切粘贴的效果
<body>
<div id="div1">
<ul id="ulid11">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
</div>
<div id="div2">
</div>
<input type="button" value="add1" οnclick="add11();"/>
<script type="text/javascript">
function add11(){
var div2=document.getElementById("div2");
var ulll=document.getElementById("ulid11");
div2.appendChild(ul11);
}
</script>
</body>
insertBefore():在摸个节点之前插入一个新的节点,两个参数,第一个要插入的节点,第二个参数在谁之前插入
插入一个节点,节点不存在,创建,创建标签,创建文本,把文本添加到标签上
<body>
<ul id="ulid21">
<li id="li11">1111</li>
<li id="li12">2222</li>
<li id="li13">3333</li>
</ul>
<input type="button" value="insert" οnclick="insert1();"/>
<script type="text/javascript">
function insert1(){
//获取到li13标签,创建li,创建文本,把文本添加到li下面,获取到,吧li添加到ul下面
var li13=document.getElementById("li13");
var li14=document.createElement("li");
var text14=document.createTextNode("5555");
li14.appendChild(text14);
//获取到ul
var ul21=document.getElementById("ulid21");
ul21.insertBefore(li14,li13);
}
</script>
</body>
removeChild():删除节点,通过他的父节点删掉,在父节点上执行
<body>
<ul id="ulid31">
<li id="li21">1111</li>
<li id="li22">2222</li>
<li id="li23">3333</li>
<li id="li24">4444</li>
</ul>
<input type="button" value="remove" οnclick="remove1();"/>
<script type="text/javascript">
function remove1(){
//获取到li24标签,获取父节点Ul标签,通过父节点删除
var li24=document.getElementById("li24");
//获取父节点两种方式,通过id,通过parentNode获取
var ulid31=document.getElementById("ulid31");
ulid31.removeChild(li24);
}
</script>
</body>
replaceChild():两个参数,第一个新节点,第二个参数是要被替换的节点,不能自己替换自己,要通过父节点完成替换
<body>
<ul id="ulid41">
<li id="li31">1111</li>
<li id="li32">2222</li>
<li id="li33">3333</li>
<li id="li34">4444</li>
</ul>
<input type="button" value="replace" οnclick="replace1();"/>
<script type="text/javascript">
function replace1(){
//获取到Li,创建标签li,创建文本,把文本添加到li下面,获取ul标签,替换操作
var li34=document.getElementById("li34");
var li35=document.createElement("li");
var text35=document.createTextNode("5555")
li35.appendChild(text35);
var ul41=document.getElementById("ulid41");
ul41.replaceChild(li35,li34);
}
</script>
</body>
cloneNode(boolean):复制节点
<body>
<ul id="ulid41">
<li id="li31">1111</li>
<li id="li32">2222</li>
<li id="li33">3333</li>
<li id="li34">4444</li>
</ul>
<div id="divv">
</div>
<input type="button" value="copy" οnclick="copy1();"/>
<script type="text/javascript">
function copy1(){
//获取到Ul,执行复制方法cloneNode(true),把复制之后的内容放到div
//获取到div,appendChild()方法可以放进去
var ul41=document.getElementById("ulid41");
var ulcopy=ul41.cloneNode(true);//复制ul放到类似于剪切板
var divv=document.getElementById("divv");
divv.appendChild(ulcopy);//放副本
}
</script>
</body>
总结:
获去节点方法:getElementById(),getElementByName(),getElementByTagName()
插入节点方法:insertBefore()在摸个节点之前插入,appendChild():在末尾添加,剪切粘贴
删除节点方法:通过父节点删除removeChild()
替换节点方法:通过父节点操作replaceChild();