DOM之获取结点的方式

首先我们先找到我们要获取的父结点

<div>
   <p>hello</p>
   <span>我是 span标签</span>
   <p>world</p>
</div>

  let box = document.querySelector('div')

1.childNodes 获取所有的子节点

let childAll = box.childNodes

获取父元素下所有的子节点

返回的是一个伪数组

console.log(childAll)

// 打印出的结点信息
NodeList(7) [text, p, text, span, text, p, text]
length: 7
0: text
1: p
2: text
3: span
4: text
5: p
6: text
__proto__: NodeList

返回所有的结点包括文本结点、元素结点、注释结点等等 都会在一个伪数组中进行返回

2. children 获取所有的元素结点 

let childEde = box.children

获取一个元素下的所有元素结点

返回的是一个伪数组

console.log(childEde)

HTMLCollection(3) [p, span, p]
length: 3
0: p
1: span
2: p
__proto__: HTMLCollection

 

3.firstChild  获取一个元素下的第一个子节点

 let first = box.firstChild

firstChild获取到的第一个子节点是包括了 文本结点 、注释结点、元素结点 

谁在第一个就获取谁

console.log(first)

#text

这个打印的是 tex t是因为我的 html 中第一个结点是一个空格也就是文本结点

<div>
   <p>hello</p>
   <span>我是 span标签</span>
   <p>world</p>
</div>

4.firstElementChild 获取一个元素的第一个元素子节点

let firstEle = box.firstElementChild

firstElementChild 只回去元素结点 注释结点和文本结点是获取不到

console.log(firstEle)

<p>hello</p>

p 标签 是我的第一个元素字节点 所有打印的是 p 标签

 5.lastChild 获取元素下的最后一个结点

 let last = box.lastChild

lastChild 和 firstChild  是一个样的 只不过是 最后一个和第一个区别

6. lastElementChild 获取元素下的最后一个元素子节点

  let lastEle = box.lastElementChild

lastElementChild 和 firstElementChild 是一个样的 只不过是 最后一个和第一个区别

7.previousSibling  获取一个元素的上一个兄弟结点 （上一个哥哥结点）

 let prev = span.previousSibling

previousSibling  这个属性获取的不仅仅是元素结点 还有 注释结点 文本结点等等但是它只获取一个

 8.previousElementSibling 获取一个元素的上一个兄弟元素结点 （上一个哥哥元素）

 let prevEle = span.previousElementSibling

previousElementSibling 这个是获取一个元素结点

 9.nextSibling 获取一个元素的下一个兄弟结点 （下一个弟弟结点）

 let next = span.nextSibling

nextSibling 这个属性获取的不仅仅是元素结点 还有 注释结点 文本结点等等但是它只获取一个

10. nextElementSibling获取一个元素的下一个兄弟元素结点 （下一个弟弟元素）

 let nextEle = span.nextElementSibling

nextElementSibling 这个是获取一个元素结点

7、8、9、10 都是兄弟之间在获取元素 

11.parentNode 获取一个元素的父结点

 let par = span.parentNode

好了 获取结点的方式总共有十一个 我自己做记录也希望可以帮助到大家