JS中的DOM节点

<ul>
    <li>
      <p>11111</p>
    </li>
    <li>
      <p>2222</p>
    </li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

var list = document.querySelector('ul')

1|0获取子节点(children)

console.log(list.children);//[li, li, li, li, li, li]

父节点.children会拿到一个所有子节点的数组,具体用哪个直接用数组的方法获取父节点.children[1]

   console.log( list.firstElementChild);//获取第一个子节点
    console.log( list.lastElementChild);//获取最后一个子节点

2|0父节点(parentNode/parentElement)

2|1parentNode

获取的是当前元素的直接父元素。parentNode是w3c的标准。

  <div>
    <span id="span">111</span>
    <div>231</div>
    <div>123</div>
    <div>421</div>
  </div>
  console.log(span.parentNode);

2|2parentElement

parentElement和parentNode获取的东西是一样的，只是parentElement是ie的标准。

 

<div>
    <span id="span">111</span>
  </div>

  console.log(span.parentElement);

3|0兄弟节点(previousElementSibling/nextElementSibling) 

<div>
    <div>231</div>
    <span id="span">111</span>
    <div>123</div>
    <div>421</div>
 </div>

通过获取父亲节点再获取子节点来获取兄弟节点

var a =span.parentElement.children[1]

3|1获取上一个兄弟节点(previousElementSibling/previousSibling)

previousElementSibling就是单纯的获取元素的节点,区别是previousSibling会匹配字符，包括换行和空格，而不是节点

 console.log(span.previousElementSibling);//<div>231</div>
 console.log(span.previousSibling);//#text

3|2获取下一个兄弟节点

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。

 console.log(span.nextElementSibling);//<div>123</div>
    console.log(span.nextSibling);//#text

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/16405896.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！