DOM navigation trong Javascript [JAVASCRIPT]


Hôm nay ta tiếp tục tìm hiểu về DOM trong javascript. Ta xem ví dụ sau:

<p id='hello'>Welcome to javascript 2020</p>

<script>
  var p = document.getElementById('hello');
  console.log(p.nodeName); // P
  console.log(p.nodeType); // 1 : Element
  
  console.log(p.childNodes); // NodeList , 0: text
  
  console.log(p.childNodes[0].nodeName); // #text
  console.log(p.childNodes[0].nodeType);  // 3 : Text node
  console.log(p.childNodes[0].nodeValue);  // Welcome to javascript 2020
  
 // 1 - Element
 // 2 - Attribute
 // 3 - Text Node
 // 8 - Comment
 // 9 - Document itself
 // 10 - Doctype

</script>

Ta có thể truy cập vào chi tiết của 1 node trong dom.

p.nodeName lấy ra tên của node.

p.nodeType lấy ra loại của node là gì, ví dụ trên là 1 có nghĩa là Element. Ta xem bảng sau

Element = 1
Attribute = 2
Text Node = 3
Comment = 8
Document itself = 9
Doctype = 10

Ta có thể dùng childNodes để truy cập vào các node con của p, do p chỉ có 1 childNodes nên ta truy cập vào childNodes[0]

  console.log(p.childNodes[0].nodeName); // #text
  console.log(p.childNodes[0].nodeType);  // 3 : Text node
  console.log(p.childNodes[0].nodeValue);  // Welcome to javascript 2020

Ta xem ví dụ sau để hiểu thêm về childNodes nhé:

<ul id='list'>
  <li class='list-item'>Item 1</li>
  <li class='list-item'>Item 2</li>
  <li class='list-item'>Item 3</li>
  <li class='list-item'>Item 4</li>
</ul>

<script>
  var ul = document.getElementById('list');
  
  console.log(ul.childNodes); // NodeList 
  // NodeList(9)
  // 0: "#text"
  // 1: <li class="list-item">
  // 2: "#text"
  // 3: <li class="list-item">
  // 4: "#text"
  // 5: <li class="list-item">
  // 6: "#text"
  // 7: <li class="list-item">
  // 8: "#text"

  </script>

Ta truy cập vào ul là lấy ra childNodes của ul thì ta thấy ngoài 4 item còn có 5 text node là những khoảng trắng. Nếu ta truy cập vào ul.childNodes[0] có nghĩa là text node không phải là li đầu tiên.

  console.log(ul.childNodes[0].nodeName); // #text
  console.log(ul.childNodes[0].nodeType);  // 3 : Text node
  console.log(ul.childNodes[0].nodeValue);  // 

Vậy muốn truy cập vào li đầu tiên ta truy cập vào ul.childNodes[1]

  console.log(ul.childNodes[1].textContent); // Item 1

Nếu ta muốn truy cập vào những li , không quan tâm các text node ta dùng ul.children

  console.log(ul.children); // HTMLCollection(4).  

  // HTMLCollection(4)
  // 0: <li class="list-item">
  // 1: <li class="list-item">
  // 2: <li class="list-item">
  // 3: <li class="list-item">
  // length:4 

Ta truy cập vào li đầu tiên.

  console.log(ul.children[0].textContent); // Item 1

Ta có thể truy cập vào phần tử cuối cùng trong ul.

  console.log(ul.lastChild); // #text

Nhưng lastChild sẽ trả về phần tử cuối cùng trong ul là text node. Nếu muốn trả về element cuối cùng trong ul là "Item 4" ta dùng cách sau:

  console.log(ul.lastElementChild.textContent); // Item 4

Muốn đếm xem trong ul này có bao nhiêu li

 console.log(ul.childElementCount); // 4

Trả về 4 có nghĩa là 4 li không tính text node.

Ngoài ra ta có thể truy cập vào phần tử cha từ phần tử con. Ví dụ ta truy cập vào li rồi dùng parentNode để truy cập vào cha (ul).

  var firstElement = ul.children[0];

  // Get parent node
  console.log(firstElement.parentNode); // <ul id="list">
  console.log(firstElement.parentElement); // <ul id="list">

Hoặc ta muốn truy cập vào anh em của firstElement ta dùng như sau

  // Get next sibling 
  console.log(firstElement.nextSibling); // "#text"

nextSibling của li đầu tiên là text node. Nếu truy cập nextSibling lần nữa thì truy cập vào li thứ 2 "Item 2"

 console.log(firstElement.nextSibling.nextSibling.innerHTML); // Item 2

Hoặc dùng nextElementSibling thì sẽ bỏ qua text node, kết quả tương tự trên

  console.log(firstElement.nextElementSibling.innerHTML); // Item 2

Ta thấy dùng nextElementSibling dễ dùng hơn nextSibling Tương tự ta có previousSiblingpreviousElementSibling.

  // Get previous sibling

  var secondElement = ul.children[1]

  console.log(secondElement.previousSibling); // "#text"
  console.log(secondElement.previousSibling.previousSibling.innerHTML); // Item 1
  console.log(secondElement.previousElementSibling.innerHTML); // Item 1.

Ta ta đã học cơ bản về DOM trong javascript. Chúng ta còn sẽ học những chủ đề thú vị phía trước. ^_^