码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript基础 -- 常见DOM树操作

时间:2017-10-13 17:12:15      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:tno   csdn   element   cond   元素   操作   tle   ext   指定   

技术分享

1.创建并增加元素节点

  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var NewNode= document.createElement("li");
  9. NewNode.innerText="AddNode";
  10. parentElement.appendChild(NewNode);
  11. </script>

 

2.判断是否存在子节点

  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <ol id="ol"></ol>
  7. <script>
  8. var parentElement = document.getElementById("ul");
  9. var parentElement2 document.getElementById("ol");
  10. if(parentElement.hasChildNodes()) {
  11.  alert("<ul>有子节点");
  12. }
  13. if(parentElement2.hasChildNodes()) {
  14.  alert("<ol>有子节点");
  15. }
  16. </script>

 

3.新建节点插入指定子节点的前面
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var secondNode = parentElement.getElementsByTagName("li")[1];
  9. varNewNode = document.createElement("li");
  10. NewNode.innerText "insertNode";
  11. parentElement.insertBefore(NewNode, secondNode);   //将NewNode插入在secondNode前面
  12. </script>

 

4.替换子节点
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var secondNode = parentElement.getElementsByTagName("li")[1];
  9. varNewNode = document.createElement("li");
  10. NewNode.innerText "replaceNode";
  11. parentElement.replaceChild(NewNode, secondNode);  //将secondNode替换成NewNode
  12. </script>

 

5.删除指定节点
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var secondNode parentElement.getElementsByTagName("li")[1];
  9. parentElement.removeChild(secondNode);
  10. </script>

JavaScript基础 -- 常见DOM树操作

标签:tno   csdn   element   cond   元素   操作   tle   ext   指定   

原文地址:http://www.cnblogs.com/jeremy5810/p/7661713.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!