Traversing the DOM

1 childNodes

1. 包含文本节点

   const list = document.querySelector('ul.collection');
   // Get child nodes
   let val = list.childNodes;
   

2 children

1. 只包含元素节点

   // Get children element nodes
   val = list.children;
   

---

3 first Child

3.1 firstChild

// First child
val = list.firstChild;

3.2 firstElementChild

val = list.firstElementChild;

4 last child

4.1 lastChild

// Last child
val = list.lastChild;

4.2 lastElementChild

val = list.lastElementChild;

---

5 Count child elements

val = list.childElementCount;

6 Get parent node

const listItem = document.querySelector('li.collection-item:first-child');
val = listItem.parentNode;
val = listItem.parentElement;
val = listItem.parentElement.parentElement;

7 Get next sibling

val = listItem.nextSibling;
val = listItem.nextElementSibling

8 Get prev sibling

val = listItem.previousSibling;
val = listItem.previousElementSibling;

9 node type

val = list.childNodes[3].nodeType;
val = list.childNodes[0].nodeName;

1 - Element
2 - Attribute (deprecated)
3 - Text node
8 - Comment
9 - Document itself
10 - Doctype