Chia sẻ về DOM – Phần 2 : Element Node Selection


Chia sẻ về DOM – Phần 2 : Element Node Selection

Element Node Selection ( tạm dịch: cách lựa chọn phần tử ), thực ra là cách bận lấy về element đó và xử lý nó theo cách nào đó, VD: jQuery(‘body’)

Trong bài viết tôi sẽ dùng 1 số ký hiệu (m1,m2, n1,n2, ..) để viết ngắn gọn hơn

1. Chọn 1 element được chỉ rõ

Những phương thức chung nhất dùng cho mục đích lấy về 1 tham chiếu tới 1 element đơn là:


Chia sẻ về DOM – Phần 2 : Element Node Selection

  • document.querySelector()
  • document.getElementByID()
<ul>
<li>Hello</li>
<li>big</li>
<li>bad</li>
<li id="last">world</li>
</ul>
<script>
   console.log(document.querySelector('li').textContent); //logs Hello
   console.log(document.getElementById('last').textContent); //logs world
</script>

Phương thức getElementByID() (m1) và querySelector() (m2) đều có chung 1 mục đích, nhưng m1 đơn giản hơn m2. Với

  • m1: tham số được truyền vào là 1 chuỗi, đó cũng chính là id của element mà bạn muốn chọn, và kết quả trả về là element đầu tiên đc tim thấy
  • m2: tham số truyền vào cũng là 1 chuỗi, nhưng nó xử lý như khi bạn viết selector trong css để style 1 element. Bạn có thể dùng css để lấy về thẻ <b> như sau: “#header ul li a > b” => đây chính là selector. Vậy cùng 1 cách chọn ta có thể viết trong m2 như sau: document.querySelector(‘#header ul li a > b’).

 

2. Lấy về hay tạo 1 danh sách Element (hay Node List)

Những phưng thức cho phép lấy/ tạo ra 1 Node List như sau:

  • document.querySelectorAll() (n1)
  • document.getElementsByClassName() (n2)
  • document.getElementsByTagName() (n3)

Chúng ta cùng xem ví dụ sau:

<ul>
<li class="liClass">Hello</li>
<li class="liClass">big</li>
<li class="liClass">bad</li>
<li class="liClass">world</li>
</ul>
<script>
console.log(document.querySelectorAll('li'));
console.log(document.getElementsByTagName('li'));
console.log(document.getElementsByClassName('liClass'));
</script>

Kết quả của ví dụ trên lần lượt trả về cho chúng ta 1 danh sách các element phù hợp. Điểm cần lưu ý ở đây là

  • Node List đc lấy về sử dụng n2 và n3 trả về cho ta 1 danh sách động. Nghĩa là danh sách được lấy về cũng phản ánh chính xác lại tình trạng hiện tại của document, thậm trí là nếu 1 node trong node list được thay đổi sau khi node list đc tạo
  • Với n1, node list là 1 ‘danh sách tĩnh’, giống như bạn chỉ chụp đc 1 bức ảnh của document. Do đó, nó là 1 danh sách tĩnh ko phải động
  • Nếu ta truyền vào n1 và n3 tham số ‘*’ nó sẽ lấy về danh sách của tất cả element thuộc dom
  • NodeList cũng là 1 kiểu mảng, nên nó có thuộc tính length nhưng lại ko kế thừa gì từ những phương thức của mảng

 

3. Lấy về những element nằm trong cùng ngữ cảnh (contextual elements)

Những phương thức như querySelector(), querySelectorAll(), getElementsByTagName(), và getElementsByClassName, cơ bản đều được truy cập từ document object, và nó cũng đc định nghĩa trong từng element node. Việc này cho phép những phương thức giới hạn kết quả tìm kiếm trong dom tree. Nói cách khác, bạn có thể chỉ rõ ra ngữ cảnh mà bạn muốn những phương thức tìm kiếm những element nodes bằng cách gọi những phương thức này trên từng đối tượng element node. Vd cho dễ hiểu:

<div>
<ul>
<li class="liClass">Hello</li>
<li class="liClass">big</li>
<li class="liClass">bad</li>
<li class="liClass">world</li>
</ul>
</div>
<ul>
<li class="liClass">Hello</li>
</ul>
<script> 
  var div = document.querySelector('div');
  console.log(div.querySelector('ul'));
  console.log(div.querySelectorAll('li'));
  console.log(div.getElementsByTagName('li'));
  console.log(div.getElementsByClassName('liClass'));
</script>

 

4. Những danh sách element được cấu hình trước

Có 1 số những danh sách elements được cấu hình, được xây dựng từ trước mà dom api cung cấp cho ta, chúng cũng là những danh sách dạng mảng. Dưới đây là danh sách 1 vài element nodes được xây dựng sẵn:

  • document.all
  • document.forms
  • document.images
  • document.links
  • document.scripts
  • document.styleSheets

Tôi sẽ ko giải thích nhiều về những shorthand này (cái tên nói lên tất cả), bạn muốn biết thì có thể tìm thêm trên mạng hoặc bật DevTools để thử trực tiếp (F12 > Tab Console > Copy&Paste > Enter)

 

5. Sử dụng matches() để xác thực 1 element được chọn

Phương thức này cho phép bạn xác thực 1 element có đúng/ phù hợp với 1 ‘chuỗi selector’ (vd: ‘li:last-child’) hay ko . VD:

<ul>
<li>Hello</li>
<li>world</li>
</ul>
<script>
console.log(document.querySelector('li').matches('li:first-child'));
</script>

 

Tổng kết

Ở phần 2 này chúng ta đã đi qua 1 lượt về cách tìm kiếm, lựa chọn element từ dom. Các cách sử dụng của getElementByID, querySelector(), … Hy vọng những điều này sẽ giúp bạn thao tác và hiểu biết về DOM hơn.

Ở phần kế tiếp tôi sẽ nói về cấu trúc hình học element nodes, cách dom phân tích và vẽ element hiển thị trên webpage.

 


Chia sẻ về DOM – Phần 2 : Element Node Selection

Chia sẻ về DOM – Phần 2 : Element Node Selection
Đánh giá bài viết này