1 nodeType 节点类型

  • nodeType == 1 元素节点
  • nodeType == 2 属性节点
  • nodeType == 3 文本节点 ```javascript

    hello world

  1. <a name="6yz3H"></a>
  2. ## 2 获取父子兄弟节点
  4. - parentNode
  5. - childNodes       ---- tips:childNodes获取所有类型的节点
  6. - children            ---tips:只获得子节点
  7. - firstChild    firstElementChild    lastChild    lastElementChild
  8. - previousSibling     previousElementSibling
  9. - nextSibling    nextElementSibling
  10. <a name="rw8PD"></a>
  11. ### 2-1.parentNode
  12. ```css
  13. <body>
  14.     <div id="parent">
  15.         <div id="child">
  16.             child
  17.         </div>
  18.     </div>
  19.     <script>
  20.         var child = document.getElementById("child");
  21.         console.log(child);
  22.         var parent = child.parentNode;
  23.         console.log(parent)
  24.     </script>
  25. </body>

2-2.childNode

  1. <body>
  2.     <div id="parent">
  3.         <p class="one">1</p>
  4.         <p class="one">2</p>
  5.         <p class="one">3</p>
  6.     </div>
  7.     <script>
  8.         var parent = document.getElementById("parent");
  9.         console.log(parent);
  10.         var child = parent.childNodes;
  11.         console.log(child);
  13.     </script>
  14. </body>

2-3第一个

  1. <body>
  2.     <div id="parent">
  3.         <p class="one">1</p>
  4.         <p class="one">2</p>
  5.         <p class="one">3</p>
  6.     </div>
  7.     <script>
  8.         var parent = document.getElementById("parent");
  9.         var childs = parent.children;
  10.         // console.log(childs);
  11.         var firstChild = parent.firstChild;
  12.         // console.log(firstChild);
  13.         var firstElement = parent.firstElementChild;
  14.         // console.log(firstElement);
  15.         var lastChild = parent.lastChild;
  16.         console.log(lastChild);
  17.         var lastElement = parent.lastElementChild;
  18.         console.log(lastElement);
  19.     </script>
  20. </body>

前面/后面一个

  1. <body>
  2.     <div>one</div>
  3.     <div id="md">middle</div>
  4.     <div>two</div>
  5.     <script>
  6.         var md = document.getElementById("md");
  7.         var previousSibling = md.previousSibling;
  8.         var sibling = md.previousElementSibling;
  10.         console.log(previousSibling);
  11.         console.log(sibling);
  12.         var nextSibling = md.nextSibling;
  13.         var nextElementSibling = md.nextElementSibling;
  14.         console.log(nextSibling);
  15.         console.log(nextElementSibling );
  18.     </script>

3 增加节点

3-1 appendChild 追加节点(末尾添加节点)

tips:只能添加节点

  1. createElement() 创建节点
  2. createTextNode() 创建文本节点
  1. <body>
  2.     <div id="app">
  3.         <p>one</p>
  4.     </div>
  5.     <script>
  6.         var app = document.getElementById("app");
  7.         var p = document.createElement("p");
  8.         p.innerHTML = "hello world";
  9.         app.appendChild(p);
  10.     </script>
  11. </body>

3-2append

tips：可以添加节点和字符串

  1. <body>
  2.     <div id="app">
  4.     </div>
  5.     <script>
  6.         var app = document.getElementById("app");
  7.         var txt = document.createTextNode("holle world");
  8.         app.append(txt)
  9.     </script>
  10. </body>

3-3prepend 前面加节点

  1. <body>
  2.     <div id="app">
  3.         <div>first</div>
  4.     </div>
  5.     <script>
  6.         var app = document.getElementById("app");
  7.         var p = document.createElement("p");
  8.         p.innerHTML ="前面";
  9.         app.prepend(p);
  10.     </script>
  11. </body>

4 删除节点

4-1 removeChild

从父节点上删除某个子节点

  1. <body>
  2.     <div id="app">
  3.         <p>one</p>
  4.         <p id="two">two</p>
  5.         <button id="btn">删除</button>
  6.     </div>
  7.     <script>
  8.         var app = document.getElementById("app");
  9.         var two = document.getElementById("two");
  10.         var btn = document.getElementById("btn");
  11.         btn.onclick = function(){
  12.             app.removeChild(two);
  14.         }
  15.     </script>
  16. </body>

4-2remove

  1. <script>
  2.         var app = document.getElementById("app");
  3.         var two = document.getElementById("two");
  4.         var btn = document.getElementById("btn");
  5.         btn.onclick = function(){
  6.             two.remove();
  8.         }
  9.     </script>

5 替换节点

5-1 replaceChild 替换节点

  1. <body>
  2.     <div id="app">
  3.         <p id="child">hello world</p>
  4.     </div>
  5.     <script>
  6.         var app = document.getElementById("app");
  7.         var h1 = document.createElement("h1");
  8.             h1.innerHTML = "change";
  9.         var child = document.getElementById("child");
  10.             app.replaceChild(h1,child)
  11.     </script>
  12. </body>