Javascript

DOM in JS #2: Selecting elements

DOM in JS 2 - Selecting elements

1. Mở đầu

Như ở phần trước mình cũng đã nói những điểm chung nhất về DOM và ở phần này mình sẽ nói thêm các method mà chúng ta hay sử dụng, nhất là trước đây khi mà Framework chưa ra đời. Hoặc nếu các bạn có cơ hội làm dự án maintain (^^) dùng JS thuần thì sẽ dùng đến các phương thức mình giới thiệu sau đây.

Và cho dù có Framework nào hay thư viện nào đi nữa thì nó cũng được sinh ra từ những nền tảng nhé và DOM hay cụ thể hơn là các phương thức mình giới thiệu sau đây là không thể thiếu và cũng cực kì quan trọng để các bạn hiểu hơn là mình đang được support đến tận răng đến như thế nào.

2. Chi tiết

Giới thiệu tổng quan

Trước khi bạn muốn thao tác với DOM thì phải truy vấn được đến nó và tất nhiên DOM cho chúng ta một số API để có thể truy vấn đến những Node mà mình muốn.

Nếu bạn biết Jquery thì có lẽ sẽ thấy là nó toàn dùng lại nhưng method này, nhưng implement một cách ngắn gọn hơn nhiều.

getElementById() method.

Đầu tiên, mình sẽ giới thiệu với các bạn phương thức hay dùng nhất đó chính là getElementById(). Đây là phương thức dùng để select đến chính xác một element (Hay một Node với type ELEMENT_NODE bằng 1) thông qua id attribute.

getElementById() là một method bên trong document object, nó sẽ return ra một Element object trong trường hợp matching, return null nếu trong trường hợp không tìm thấy Element nào và sẽ return ra Element đầu tiền nếu nó tìm thấy nhiều hơn 1 element matching (Thường thì id element là unique – không ai lại đặt nhiều element với cùng 1 id ^^).

let element = document.getElementById(id);

getElementsByName() method.

Giống như getElementById() thì getElementsByName() sẽ select đến những Element có cùng giá trị name attribute. Nhưng có một điểm khác là bạn có thể select đến nhiều element có cùng name attribute (Không giống như Id thường thì sẽ là unique nên nó chỉ return ra một element).

Vì get ra là những element có cùng giá trị của name attribute nên phương thức này sẽ return là một list node hay list element, trong trường hợp không có name nào matching thì nó sẽ return ra một Array rỗng. Ở đây mình nói là Array nhưng thực chất nó lại không phải như array thường, array này giống y như là argument bên trong function vậy, bạn có thể tham khảo thêm tại đây.

let elements = document.getElementsByName(name);

getElementsByTagName() method.

Giống như tên của nó thì phương thức này dùng để lấy ra tất cả các Element có cùng Tag name, nhưng có điểm khác biệt hơn một chút. Đó là, đây là một phương thức bên trong Document object hoặc cũng có thể bên trong một DOM element.

Phương thức này không return ra element mà thay vào đó sẽ return ra HTMLCollection của elements, trong trường hợp không tìm thấy Tag name nó sẽ return ra Array HTMLCollection rỗng. Và bonus thêm đây cũng không phải array thường nó giống như Argument mà phần trước mình đã giới thiệu vậy.

Đến đây có bạn sẽ thắc mắc: HTMLCollection là gì? Mình xin trả lời nó là một Interface của elements, cụ thể ở phần này nó là Interface của các Element mà dùng getElementsByTagName() lấy ra được. Bên trong HTMLCollection là các method, thuộc tính của element, list ra đây thì nhiều lắm, bạn có thể log ra xem nhé.

Đơn giản nhất là hãy F12 trình duyệt của bạn và test thôi ^^.

let content = document.getElementById("content");
content.getElementsByTagName("div"); // HTMLCollection(9) [div.code-badge-pre, div.code-badge, div, div.code-badge-pre, div.code-badge, div, div.output-cont, div.output, div.helpful-block-content.wth-theme-thumbs]
let divs = document.getElementsByTagName("div"); // HTMLCollection(113) [div#react-container, div.loading-bar, .....

getElementsByClassName() method.

Phương thức này cũng giống như getElementsByTagName() nó cũng có trong document object hoặc bên trong một element nào đó.

Tham số truyền vào bên trong phương thức này là một String chính là giá trị của thuộc tính class bên trong Element bạn muốn select tới. Nó sẽ return ra một HTMLCollection của Elements, trong trường hợp không có thằng nào match thì bạn sẽ có một Array với interface là HTMLCollection rỗng (Đây cũng không phải array, giống như Argument bên trong regular function vậy).

<div>
   <ul id="menu">
       <li class="item">HTML</li>
       <li class="item">CSS</li>
       <li class="item highlight">JavaScript</li> 
       <li class="item">TypeScript</li>
    </ul>
</div>

<script>
    let menu = document.getElementById('menu');
    let itemsFromParent = menu.getElementsByClassName('item'); // HTMLCollection(4) [li.item, li.item, li.item.highlight, li.item]
    let itemsOwn_1 = document.getElementsByClassName('item highlight'); // HTMLCollection [li.item.highlight]
    let itemsOwn_2 = document.getElementsByClassName('item'); // HTMLCollection(4) [li.item, li.item, li.item.highlight, li.item]
    let itemsOwn_3 = document.getElementsByClassName('highlight'); // HTMLCollection [li.item.highlight]
</script>

Hãy đặt log ra và cùng xem nó như thế nào nhé :v.

querySelector() method.

Đây là phương thức dùng để query Element theo CSS selector, nó sẽ return ra element trong trường hợp selector truyền vào matching. Sẽ return ra null nếu không tìm thấy selector matching hoặc trong trường hợp nhiều selector matching thì nó sẽ return ra element đầu tiên (Khá giống với khi query đúng không nào).

Phương thức này tồn tại bên trong document object hoặc một element nào đó, bạn hãy xem syntax bên dưới để hiểu rõ hơn nhé.

let element = parentNode.querySelector(selector);
// OR
let element = document.querySelector(selector);

Dựa vào Selector bạn truyền vào là gì mà phương thức này có một số cách dùng khá hay. Như là :

let element = document.querySelector('*'); // Sẽ tìm đến thẻ đầu tiên của parent hoặc document.
let firstHeading = document.querySelector('h1'); // Sẽ tìm đến thẻ H1 đầu tiên của document hoặc h1
//....

querySelectorAll() method.

Đây là phương thức giống querySelector() nhưng thay vì return ra một Element matching thì nó sẽ return ra một Array với interface là NodeList, trong trường hợp không có thằng nào matching thì nó sẽ return ra một array rỗng. (Array này cũng có tính chất giống Argument trong function).

Và tính chất thì giống như thằng querySelector() nó cũng có thể gọi ra từ Parent hoặc document object, cũng có thể truyền các Selector như của Css.

let element = parentNode.querySelectorAll(selector);
// OR
let element = document.querySelectorAll(selector);

3. Kết luận

Như vậy, trong phần này mình đã giới thiệu với các bạn cách query hay select element hay dùng, mình không mong là các bạn nhớ nhiều mà mình bạn có thể liên hệ lại với những cái mình đã làm trước đây, ví dụ như khi dùng Jquery, để hiểu là nó cũng base ra từ những cái cơ bản này. Và nếu có dùng Jquery chỉ để query cho nhanh, thì HÃY XÓA NÓ ĐI MÀ VIẾT MỘT THƯ VIỆN CỦA RIÊNG BẠN, cài làm gì trong khi chỉ cần JS thuần – bỏ đi sẽ làm cho app của bạn nhẹ hơn.

Cuối cùng SEE YOU SOON!!!!

4. Tham khảo

# JavaScript DOM
# JavaScript – HTML DOM Methods
# Document Object Model (DOM)

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments