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

关于DOM树的常见增删操作

2024-08-16 10:01:22   222人阅读

//具体关于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>
  8. <script>
  9.     var parentElement = document.getElementById("ul");
  10.     var NewNode = document.createElement("li");
  11.     NewNode.innerText="AddNode";
  12.     parentElement.appendChild(NewNode);
  13. </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>
  9. <script>
  10.  var parentElement = document.getElementById("ul");
  11.     var parentElement2=document.getElementById("ol");
  12.     if (parentElement.hasChildNodes()){
  13.         alert("<ul>有子节点");
  14.     }
  15.     if(parentElement2.hasChildNodes()){
  16.         alert("<ol>有子节点");
  17.     }
  18. </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>
  8. <script>
  9.     var parentElement = document.getElementById("ul");
  10.     var secondNode = parentElement.getElementsByTagName("li")[1];
  11.     var NewNode = document.createElement("li");
  12.     NewNode.innerText = "insertNode";
  13.     parentElement.insertBefore(NewNode, secondNode);  //将NewNode插入在secondNode前面
  14. </script>

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

★ 示例五  删除节点（removeChild()）
实现代码
  1. <ul id="ul">
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5.     <li>4</li>
  6. </ul>
  8. <script>
  9.     var parentElement = document.getElementById("ul");
  10.     var secondNode=parentElement.getElementsByTagName("li")[1];
  11.     parentElement.removeChild(secondNode);
  12. </script>
技术分享
 
我的疑惑：对swapNode()--两个节点位置交换的实现方法，一直没实现，希望路过的大牛，指点迷津~
 




来自为知笔记(Wiz)


关于DOM树的常见增删操作


联系
我们