Javascript

DOM in JS #1: Getting started

DOM in JS 1 - Getting started

1. Mở đầu

DOM là viết tắt của Document Object Model, nó được tạo ra khi mà Page Loaded. Với DOM bạn có thể làm được rất nhiều việc với HTML, làm cho Web của chúng ta thêm phần ảo diệu hơn như các phần mình có trình bày ở bên dưới.

  • Change all the HTML elements in the page.
  • Change all the HTML attributes in the page.
  • Change all the CSS styles in the page.
  • Remove existing HTML elements and attributes.
  • Add new HTML elements and attributes.
  • React to all existing HTML events in the page.
  • Create new HTML events in the page.

Để làm được các điều trên thì DOM cung cấp cho chúng ta một số các Api mà bạn có thể dựa vào đó để có thể thao tác với DOM.

https://curriculum-content.s3.amazonaws.com/fewpjs/fewpjs-the-dom-tree/Image_6_DomTree.png

2. Chi tiết

DOM là gì?

Dom là một API cho phép thao tác với phần view của Web, DOM là một khái niệm mà các ngôn ngữ khác cũng có thể thao tác đến chứ không riêng gì JS.

Một đối tượng DOM đại diện cho một HTML hoặc XML với các thứ bậc của các node (node là gì thì mình giải thích ở phần dưới nhé).

Trong một đối tượng DOM thì Document là đối tượng cha to nhất nó sẽ bao gồm rất nhiều con cháu, chắt, chút, chít, ….. bên trong nó.

Có những loại DOM nào?

Theo tài liệu này thì chúng ta sẽ có 3 loại DOM chính, đó chính là:

  • The Legacy DOM: Nó được giới thiệu trong những phiên bản đầu của JS – ngày nay chúng ta không dùng đối tượng này được vì đơn giản là trình duyệt đã cung cấp cho chúng ta cách khác để thao tác với DOM, đó là W3C.
  • The W3C DOM: Ngày nay chuẩn DOM này được áp dụng rộng rãi trên các trình duyệt và phần bài này mình sẽ chỉ nói về nó thôi nhé. :v.
  • The IE4 DOM: (HAHAHAAAA) Cái này mình chỉ muốn nói đơn giản là nó dùng cho IE4 trở xuống, còn từ IE5 nó dùng chuẩn DOM W3C rồi. (Nói để nắm được chút lịch sử thôi nhé các bạn)

Node là gì?

Node đơn giản các bạn có thể hiểu nó là các đối tượng hay chính là các nút trong cây DOM, ngoài Node trong DOM còn có một khái niệm là Element – chính là Node được chỉ rõ kiểu hoặc loại cụ thể là Node.ELEMENT_NODE. Mình sẽ trình bày kiểu của node ở bảng bên dưới.

Các kiểu của Node.

Node có rất nhiều kiểu khác nhau và được biểu thị là các interger, bạn có thể quan sát bảng ở dưới để hiểu rõ hơn.

ConstantValueDescription
Node.ELEMENT_NODE1An Element node like <p> or <div>.
Node.TEXT_NODE3The actual Text inside an Element or Attr.
Node.CDATA_SECTION_NODE4CDATASection, such as <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE7ProcessingInstruction of an XML document, such as <?xml-stylesheet … ?>.
Node.COMMENT_NODE8Comment node, such as <!-- … -->.
Node.DOCUMENT_NODE9Document node.
Node.DOCUMENT_TYPE_NODE10DocumentType node, such as <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE11DocumentFragment node.

Vậy lấy cái giá trị type kia ra kiểu gì? – Đơn giản là các bạn chỉ cần vào trình duyệt F12 rồi gõ Node hoặc vào bất kì Node trong Dom rồi gõ ra thì nó sẽ log ra cho bạn xem, tương tự khi bạn code chỉ cần log thẳng Node type ra nhé. Ví dụ F12 lên vào paste thẳng đoạn này vào:

console.log("Node.ELEMENT_NODE", Node.ELEMENT_NODE);
console.log("Node.TEXT_NODE", Node.TEXT_NODE);
console.log("Node.CDATA_SECTION_NODE", Node.CDATA_SECTION_NODE);
console.log("Node.PROCESSING_INSTRUCTION_NODE", Node.PROCESSING_INSTRUCTION_NODE);
console.log("Node.COMMENT_NODE", Node.COMMENT_NODE);
console.log("Node.DOCUMENT_NODE", Node.DOCUMENT_NODE);
console.log("Node.DOCUMENT_TYPE_NODE", Node.DOCUMENT_TYPE_NODE);
console.log("Node.DOCUMENT_FRAGMENT_NODE", Node.DOCUMENT_FRAGMENT_NODE);

Đó là các loại Node mà DOM cho chúng ta và để lấy kiểu node hiện tại của bạn là gì thì hãy dùng đến property của node đó là nodeType. Còn lấy như thế nào bạn hãy xem ví dụ bên dưới nhé.

document.children[0].nodeType; // 1

Bạn chỉ cần mở tab trên trình duyệt, F12 và paste dòng trên vào nhé. Còn hỏi tại sao lại có children, sao lại là 0 thì mình xin trả lời ở phần sau nhé. Vì DOM thật sự rất rộng.

Ngoài nodeType bạn cũng có thể get Name của nó để biết Node này là thẻ nào nhé, nodeName và nodeType là 2 propertype rất quan trọng mà bạn lên để ý nhé. Khi lấy Node ra để dùng thì dùng 2 thuộc tính này để validate để tránh lỗi nhé ^^.

document.children[0].nodeName; // "HTML"

Quan hệ của các Node.

Các Node trong một cây Dom có mỗi quan hệ cha con và anh em với nhau, hãy xem đoạn code HTML bên dưới và mình sẽ giải thích phần nào đó nhé.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chamdev.com</title>
</head>
<body>
    <div>
        <h1>This is h1 element</h1>
        <a>This is a element</a>
    </div>
</body>
</html>

Như các bạn có thể thấy head và body là con của html, div là con của body, h1 và a cùng cấp lên chúng nó là anh em. Hay h1 cũng là Node con thứ nhất của div. Đó dễ hiểu chưa nào. Và chúng ta có một số phương thức mà DOM cho để thao tác kiểu gia đình này (Đấy là mình hiểu thế thôi nhé ^^ chứ document nó không có từ gia đình đâu).

https://cdn.javascripttutorial.net/wp-content/uploads/2020/01/JavaScript-DOM-Node-Relationships.png

Một số phương thức để thao tác theo kiểu GIA ĐÌNH vai vế này đó là: firstChild, lastChild, parentNode, nextSibling, … (Mình đã viết ở hình minh họa trên nhé – hãy chú ý là nó có 1 node cha và 3 node anh em cùng vai vế nhé, chỉ cần chú ý thằng nào trước thằng nào sau thôi).

3. Kết luận

Trên đây là một chút kinh nghiệm cũng như là sự tìm hiểu của mình về DOM một cách cơ bản nhất, có gì thiếu sót hay sai gì thì mong các bạn hãy viết xuống phần bình luận bên dưới cho mình biết với nhé. Sẽ còn rất nhiều bài mà mình sẽ viết về DOM nữa vì DOM thực sự rất rộng.

Time gần đây mình bận quá, nên không viết được bài nào ^^ (đấy, lại lý do lý trấu @@). Mình sẽ vẫn cố gắng ra bài mới vào mỗi cuối tuần nhé các bạn.

4. Tham khảo

# JavaScript HTML DOM
# JavaScript – Document Object Model or DOM
# JavaScript DOM

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