JavaScript - DOM là gì ?

19/03/2019, 9:57 AM | 19/03/2019, 9:59 AM | 710 | 020

Javascript là ngôn ngữ được sử dụng trong các trình duyệt Browser, vì vậy để thao tác với các thẻ HTML nó phải thông qua một cơ chế là DOM. Bài này chúng ta cùng tìm hiểu DOM là gì nhé.
DOM là gì ?
DOM là viết tắt của Document Object Model, là một chuẩn được định nghĩa bởi W3C dùng để truy xuất đến các tài liệu HTML. Với DOM chúng ta có thể thao tác, thay đổi các thuộc tính, cấu trúc của thẻ HTML một cách dễ dàng.

Ở hình vẽ mô tả trên bạn có thể thấy các thẻ HTML đều được quản lý bởi đối tượng document, như vậy để thao tác với các thẻ HTML ta sẽ sử dụng đối tượng document. Ví dụ :

Xem DEMO

<html>
    <head>
        <title></title>
        <script language="javascript">
            function EditText(){

                // tìm thẻ có id="MyName" và thay đổi nội dung thẻ đó thành "Chúc bạn ngày mới vui vẻ !"
                document.getElementById("MyName").innerHTML = "Chúc bạn ngày mới vui vẻ !";
            }
            
       </script>
    </head>
    <body>
      <p id="MyName">vnfree.net</p>
      
      <input type="button" onclick="EditText()" value="thay đổi text" />
    </body>
</html>

Ở ví dụ trên khi bạn click vào button nó sẽ gọi đến hàm EditeText(). Và hàm này mình sử dụng đối tượng documet tìm thẻ có id="MyName" rồi thay đổi nội dung thẻ đó thành "Chúc bạn ngày mới vui vẻ !".

Sơ qua về DOM bạn có thể hiều đơn giản vậy thôi, các bài tiếp mình sẽ giới thiệu từng loại DOM cụ thể. Hava a nice day :)