1.如何获取节点

1.1 getElementById() 通过id/class来获取

    <div id="app">one</div>
    <div class="one">one1</div>
    <div class="one">one2</div>
    <div class="one">one3</div>
<script>
        /* 在文档上获取元素通过id */
    var app = document.getElementById("app");
    console.log(app)
    /* class  HTMLCollection  数组 */
    var all = document.getElementsByClassName("one");
    console.log(all)
</script>

1.2 getElementsByTagName() 通过标签名获取

    <div id="app">one</div>
    <div class="one">one1</div>
    <div class="one">one2</div>
    <div class="one">one3</div>
<script>
        /* 通过标签名获取 */
    var divs = document.getElementsByTagName("div");
    console.log(divs);
</script>

1.3 querySelectorAll() 通过选择器获取

 <div class="parent">
        <p>hello1</p>
        <p>hello2</p>
</div>
<script>
        /* 通过选择器获取 */
    var all = document.querySelectorAll(".parent p");
    console.log(all);
</script>

1.4 nodeType 节点的类型

• nodeType == 1 元素节点
• nodeType == 2 属性节点

• nodeType == 3 文本节点

  <p id="app">hello world</p>
    <script>
        /* 节点的类型   nodeType
        元素节点         1
        属性节点         2
        文本节点         3
        */
        var app = document.getElementById("app");
        var app_id = app.getAttributeNode("id"); //getAttributeNode() 获取属性节点
        var txt = app.firstChild;
        console.log(app.nodeType);
        console.log(app_id.nodeType);
        console.log(txt.nodeType)
    </script>

  1.5 parentNode 获取所有父节点

  <div id="parent">
        <div id="child">child</div>
  </div>
    <!-- 1、获取父节点 
        parentNode  获取元素的父节点
    -->
    <script>
        var child = document.getElementById("child");
        var parent = child.parentNode;
        console.log(parent)
    </script>

  1.6 childNodes 获取所有子节点

    <div id="parent">
        <p class="one">1</p>
        <p class="one">2</p>
        <p class="one">3</p>
    </div>
    <script>
        /* tips: childNodes获取所有类型的节点 */
        var parent = document.getElementById("parent");
        var childs = parent.childNodes;
        console.log(childs)
        console.log(parent.firstChild)
    </script>

  1.7 children 只获取子 元素 节点

  <ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
  </ul>
    <script>
        var app = document.getElementById("app")
        console.log(app.children)  // 只获取子元素节点
    </script>

  1.8 节点和元素节点

  ```javascript firstChild() 获取第一个子节点 lastChild() 获取最后一个子节点

childNodes 获取所有子节点 children 获取所有子元素节点 parentNode 获取父节点

firstChild 获取第一个子节点 firstElementChild 获取第一个元素子节点 lastChild 获取最后一个子节点 lastElementChild 获取最后一个元素子节点

nextSibling 前一个节点 nextElementSibling 前一个元素节点 previousSibling 获取前一个兄弟节点 previousElementSibling 获取前一个兄弟元素节点 ```