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')

获取子节点(children)

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

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

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

父节点(parentNode/parentElement)

parentNode

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

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

parentElement

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

 

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

  console.log(span.parentElement);

兄弟节点(previousElementSibling/nextElementSibling) 

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

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

var a =span.parentElement.children[1]

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

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

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

获取下一个兄弟节点

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

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