操作DOM树及常用方法

操作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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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();

秒客网

操作DOM树及常用方法

相关文章