首页 > 代码库 > 关于DOM树的常见增删操作

关于DOM树的常见增删操作

//具体关于DOM的内容可参考我的另外一篇文章“文本对象模型(Document Object Model)”.
案例要点:
    1.创建并增加元素节点
    2.判断是否存在子节点
    3.新建节点插入指定子节点的前面
    4.替换子节点
    5.删除指定节点
★ 示例一  创建并增加元素节点(appendChild(childItem)
实现代码
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. <script>
  8. var parentElement = document.getElementById("ul");
  9. var NewNode = document.createElement("li");
  10. NewNode.innerText="AddNode";
  11. parentElement.appendChild(NewNode);
  12. </script>
技术分享

 ★ 示例二  判断是否存在子节点(hasNodes())
实现代码
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. <ol id="ol"></ol>
  8. <script>
  9. var parentElement = document.getElementById("ul");
  10. var parentElement2=document.getElementById("ol");
  11. if (parentElement.hasChildNodes()){
  12. alert("<ul>有子节点");
  13. }
  14. if(parentElement2.hasChildNodes()){
  15. alert("<ol>有子节点");
  16. }
  17. </script>
最终的效果,应该是只弹出提示框“<ul>有子节点”。
技术分享

 ★ 示例三  新建子节点插入到已知节点的前面(insertBefore())
实现代码
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. <script>
  8. var parentElement = document.getElementById("ul");
  9. var secondNode = parentElement.getElementsByTagName("li")[1];
  10. var NewNode = document.createElement("li");
  11. NewNode.innerText = "insertNode";
  12. parentElement.insertBefore(NewNode, secondNode); //将NewNode插入在secondNode前面
  13. </script>

  ★ 示例四  替换指定子节点(replaceChild())
实现代码
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. >
  8. var parentElement = document.getElementById("ul");
  9. var secondNode = parentElement.getElementsByTagName("li")[1];
  10. var NewNode = document.createElement("li");
  11. NewNode.innerText = "replaceNode";
  12. parentElement.replaceChild(NewNode, secondNode); //将secondNode替换成NewNode
  13. </script>
技术分享

★ 示例五  删除节点(removeChild())
实现代码
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. <script>
  8. var parentElement = document.getElementById("ul");
  9. var secondNode=parentElement.getElementsByTagName("li")[1];
  10. parentElement.removeChild(secondNode);
  11. </script>
技术分享
 

我的疑惑:对swapNode()--两个节点位置交换的实现方法,一直没实现,希望路过的大牛,指点迷津~
 




来自为知笔记(Wiz)


关于DOM树的常见增删操作