zoukankan      html  css  js  c++  java
  • 关于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. varNewNode= 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. varNewNode= 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. varNewNode= 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()--两个节点位置交换的实现方法,一直没实现,希望路过的大牛,指点迷津~
     
     
     





  • 相关阅读:
    BZOJ2763 [JLOI2011]飞行路线(SPFA + DP)
    HDU5838 Mountain(状压DP + 容斥原理)
    HDU4787 GRE Words Revenge(AC自动机 分块 合并)
    HDU5909 Tree Cutting(树形DP + FWT)
    HDU5456 Matches Puzzle Game(DP)
    SPOJ DQUERY D-query(主席树)
    POJ2104 K-th Number(主席树)
    Tsinsen A1493 城市规划(DP + CDQ分治 + NTT)
    BZOJ3438 小M的作物(最小割)
    BZOJ1565 [NOI2009]植物大战僵尸(拓扑排序 + 最大权闭合子图)
  • 原文地址:https://www.cnblogs.com/Jener/p/5954038.html
Copyright © 2011-2022 走看看