Dom Javascript Là Gì

     

Cùng khám phá về DOM vào JavaScript. Các bạn sẽ biết DOM là gì vào JavaScript, tương tự như các yếu tắc của DOM sau bài học kinh nghiệm này.

Bạn đang xem: Dom javascript là gì

DOM là gì trong JavaScript

DOM vào JavaScript là viết tắt của nhiều từ Document Object Model, dịch sang tiếng Việt là Mô hình Đối tượng Tài liệu, là 1 API chuyên dụng để xử lý các tài liệu HTML cùng XML bên dưới dạng những đối tượng(object). DOM trước đó đã được tiêu chuẩn chỉnh hóa vì chưng cơ quan tiền tiêu chuẩn W3C, nhưng bây giờ đã được tiêu chuẩn chỉnh hóa vị WHATWG.

Các tiêu chuẩn về DOM đã được WHATWG chuẩn chỉnh hóa tại website chính thức https://dom.spec.whatwg.org/.

*

Như tên thường gọi của nó, DOM - mô hình Đối tượng Tài liệu góp xử lý những phần tử(element) có trong các tài liệu HTML/XML, cũng tương tự dữ liệu văn bản(text) có trong các phần tử đó dưới dạng các Đối Tượng(object).

DOM coi các tài liệu HTML/XML bên dưới dạng một tổ hợp có vật dụng bậc của những đối tượng. Và JavaScript cũng như rất nhiều ngôn ngữ lập trình web không giống đều cung cấp các API chuyên dụng để xử trí tổ hợp đối tượng người tiêu dùng này.

Node là gì trong JavaScript

Trong DOM, một đối tượng trong tổ hợp tạo nên tài liệu HTML/XML được gọi là một trong những Node(nút). Tùy ở trong vào kiểu đối tượng mà bọn họ sẽ có các kiểu Node không giống nhau, ví như Node phần tử(element node), Node văn bản(text node) hoặc Node trực thuộc tính(attribute node) chẳng hạn.

Nói một giải pháp khác thì Node chính là đơn vị nhỏ dại nhất để cấu tạo nên DOM.

Bằng cách sử dụng JavaScript, bạn cũng có thể thao tác với các Node vào DOM để sửa tư liệu HTML/XML và qua đó trực tiếp đổi khác nội dung hiện trên web. Ví dụ, chúng ta cũng có thể dễ dàng thêm các đối tượng như chiếc văn bản, hộp, nút v.v. Vào web, thêm các xử lý lúc click vào nút, tương tự như là tinh chỉnh xây đắp đồ họa của các đối tượng người tiêu dùng thông qua việc sửa đổi CSS.

Cấu trúc của DOM trong JavaScript

Như đã nói trên thì DOM coi các tài liệu HTML/XML dưới dạng một tổng hợp có trang bị bậc của các đối tượng, mỗi đối tượng người tiêu dùng trong này được gọi là một trong Node, và những Node được phân loại dựa theo phong cách của đối tượng người dùng mà nó đại diện.

Ví dụ cố kỉnh thể, họ có một trang HTML như sau:

Copy

Giống như trên thì Node tất cả thứ bậc cao nhất trong DOM là Document Node. Bên dưới Document Node sẽ có các Node không giống được xếp theo thứ bậc cùng lên kết cùng với nhau. Ví dụ như như các Element Node dùng làm biểu diễn những phần tử của html, các Text Node dùng làm biểu nội dung văn bạn dạng có trong số phần tử, hay các Attribute Node dùng để biểu diễn các thuộc tính của phần tử, ví như thuộc tính id chẳng hạn.

Xem thêm: Nghĩa Của Từ Insurance Là Gì ? Nghĩa Của Từ Insurance

Ngoài các loại Node trên, trong DOM còn có rất nhiều loại khác, ví dụ như comment node biểu diễn các đối tượng người sử dụng ghi chú, hoặc là blank node biểu diễn các khoảng vệ sinh DOM.

Quan hệ giữa những Node trong DOM

Trong một Document Node, những Node tất cả thứ bậc nhỏ tuổi hơn vẫn tồn tại 2 một số loại quan hệ là quan hệ anh emquan hệ phụ thân con, dựa theo địa điểm của chúng trong tổ hợp.

Ví dụ với trang HTML sinh sống trên thì quan hệ giới tính giữa những Node trong DOM như sau:

Giống như bên trên thì body node là node thân phụ của h1 node với p node. Ngược lại thì h1 node với p node chính là node bé của body node. Và chúng là node đồng đội của nhau.

Việc khẳng định quan hệ giữa những node vào DOM rất quan trọng đặc biệt trong vấn đề xác định vị trí của những node lúc cần thao tác với chúng trong DOM.

Ví dụ sử dụng DOM trong JavaScript

Ở phần trên bọn họ đã tìm hiểu về DOM cũng giống như các thành phần cấu tạo của nó rồi.

Sau đây hãy cùng xem một ví dụ đơn giản về làm việc với Node vào DOM bởi đoạn code JavaScript bên dưới đây.

Copy

script>function clickButton() document.getElementById("sample").innerHTML = "Cảm ơn!";script>input type="button" value="Hãy click" onclick="clickButton()">p id="sample">Hãy clickp>

-- --

Xin chào

-- --

Giống như bên trên thì chúng ta có thể dễ dàng mang node trong DOM với tiến hành biến đổi nó một phương pháp dễ dàng.

Tổng kết

Trên trên đây Kiyoshi đang hướng dẫn bạn về DOM vào JavaScript rồi. Để nắm rõ nội dung bài học hơn, chúng ta hãy thực hành thực tế viết lại các ví dụ của ngày hôm nay nhé.

Xem thêm: 2 Cách Hấp Bề Bề Bao Lâu Thì Chín, Bề Bề Hấp Lạnh Hay Hấp Nóng

Và hãy cùng khám phá những kỹ năng sâu hơn về JavaScript trong những bài học tập tiếp theo.

kimsa88
cf68