DOM节点

shuye1015
100 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第7天

DOM节点

  • DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
  • 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
  • 比如我们标签里面写的文字，那么就是文本节点
  • 写在每一个标签上的属性，就是属性节点

元素节点

  • 我们通过 getElementBy... 获取到的都是元素节点

属性节点

  • 我们通过 getAttribute 获取的就是元素的属性节点

文本节点

  • 我们通过 innerText 获取到的就是元素的文本节点

获取节点

  • childNodes：获取某一个节点下 所有的子一级节点

    <body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
    var oDiv = document.querySelector('div')
    
    console.log(oDiv.childNodes) 
    /*
        NodeList(3) [text, p, text]
      0: text
      1: p
      2: text
      length: 3
      __proto__: NodeList
    */
  </script>
</body>
    • 我们会发现，拿到以后是一个伪数组，里面有三个节点
    • 一个 text：从 <div> 一直到 <p> 中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点
    • 一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
    • 一个 text：从 </p> 一直到 </div> 中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点
    • 这个时候就能看到我们有不同的节点类型了

  • children ：获取某一节点下所有的子一级 元素节点

    <body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
    var oDiv = document.querySelector('div')
    
    console.log(oDiv.children) 
    /*
        HTMLCollection [p]
      0: p
      length: 1
      __proto__: HTMLCollection
    */
  </script>
</body>
    • 我们发现只有一个节点了，因为 children 只要元素节点
    • div 下面又只有一个元素节点，就是 p
    • 所以就只有一个，虽然只有一个，但是也是一个 伪数组

  • firstChild：获取某一节点下子一级的 第一个节点

    <body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
    var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstChild) // #text 
  </script>
</body>
    • 这个是只获取一个节点，不再是伪数组了
    • 获取的是第一个
    • 第一个就是 <div> 一直到 <p> 的那个换行和空格，是个文本节点

  • lastChild：获取某一节点下子一级的 最后一个节点

    <body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
    var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastChild) // #text 
  </script>
</body>
    • 只获取一个节点，不再是伪数组
    • 获取的是最后一个
    • 最后一个就是 </p> 一直到 </div> 之间的换行和空格，是个文本节点

  • firstElementChild：获取某一节点下子一级 第一个元素节点

    <body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
    var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstElementChild) // <p>hello</p>
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是第一个 元素节点
    • 第一个元素节点就是 p 标签，是一个元素节点

  • lastElementChild：获取某一节点下子一级 最后一个元素节点

    <body>
  <div>
    <p>hello</p>
    <p>world</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
    var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastElementChild) // <p>world</p>
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是最后一个 元素节点
    • 最后一个元素节点是 <p>world</p>，是一个元素节点

  • nextSibling：获取某一个节点的 下一个兄弟节点

    <body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
    var oLi = document.querySelector('#b')
    
    console.log(oLi.nextSibling) // #text
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的下一个兄弟节点
    • 因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

  • previousSibling：获取某一个节点的 上一个兄弟节点

    <body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
    var oLi = document.querySelector('#b')
    
    console.log(oLi.previousSibling) // #text
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的上一个兄弟节点
    • 因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

  • nextElementSibling：获取某一个节点的 下一个元素节点

    <body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
    var oLi = document.querySelector('#b')
    
    console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的下一个兄弟元素节点
    • 因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点

  • previousElementSibling：获取某一个节点的 上一个元素节点

    <body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
    var oLi = document.querySelector('#b')
    
    console.log(oLi.previousElementSibling) // <li id="a">hello</li>
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的上一个兄弟元素节点
    • 因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点

  • parentNode：获取某一个节点的 父节点

    <body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
    var oLi = document.querySelector('#b')
    
    console.log(oLi.parentNode) // <ul>...</ul>
  </script>
</body>
    • 只获取一个节点，不在是伪数组
    • 获取的是当前这个 li 的父元素节点
    • 因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

  • attributes：获取某一个 元素节点 的所有 属性节点

    <body>
  <ul>
    <li id="a" a="100" test="test">hello</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
    var oLi = document.querySelector('#a')
    
    console.log(oLi.attributes) 
    /*
        NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
      0: id
      1: a
      2: test
      length: 3
      a: a
      id: id
      test: test
      __proto__: NamedNodeMap
    
    */
  </script>
</body>
    • 获取的是一组数据，是该元素的所有属性，也是一个伪数组
    • 这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个

\

avatar
文章
阅读
粉丝