关于DOM树的常见增删操作

Posted 2020-08-14 Jener_Yan

//具体关于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. varNewNode= 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. varNewNode= 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. varNewNode= 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)