1. DOM HTML trong Javascript là gì?

HTML DOM cho phép Js thay đổi nội dung của các phần tử HTML. Nó cũng thay đổi thuộc tính của thẻ HTML. Khi làm việc với Js thì việc lấy nội dung bên trong của một thẻ HTML là rất thường xuyên, và đôi khi bạn cũng cần gán nội dung vào các thẻ HTML để tạo các thông báo đến người dùng.

Ví dụ, việc xây dựng chức năng validate dữ liệu của form đăng ký thành viên. Ta có thể sử dụng hàm alert để thông báo những vi phạm của người dùng. Nhưng chuyên nghiệp hơn thì ta có thể tạo ra những thông báo trực tiếp trên trang HTML, bằng cách sử dụng Js để bổ sung nội dung lỗi vào các vị trí đã xác định từ trước.

2. Lấy và thay đổi nội dung trong thẻ HTML bằng Javascript

Cách dễ nhất để sửa đổi nội dung của một phần tử HTML là sử dụng thuộc tính innerHTML . Cú pháp của nó là:

document.getElementById("content").innerHTML

Trong đó innerHTML chính là thuộc tính của đối tượng HTML, công dụng của nó là dùng để lấy hoặc gán giá trị cho một thẻ HTML.

Với việc thay đổi nội dung cho một thẻ HTML, ta dùng cú pháp sau:

document.getElementById(id).innerHTML = new HTML

Ví dụ: lấy nội dung bên trong thẻ HTMl

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>laptrinhtudau.com</title>
</head>

<body>
    <div id="hello">Chào mừng các bạn đến với website học lập trình online </div>
    <div class="laptrinhtudau">laptrinhtudau.com 
    </div>
    
    <script type="text/javascript">
        //lấy nội dung của thẻ có id = hello
        var content = document.getElementById('hello').innerHTML;
        //in ra nội dung của thẻ đó.
        alert(content);
    </script>
</body>

</html>

Thay đổi nội dung của một thẻ <p> :

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "Laptrinhtudau.com";
</script>

<p>Đoạn văn trên đã được thay đổi</p>

3. Thay đổi thuộc tính thẻ HTML bằng Javascript

Để thay đổi giá trị của thuộc tính HTML thì ta sử dụng cú pháp như sau:

document.getElementById(id).attribute = new value

Để lấy giá trị của thuộc tính HTML ta sử dụng cú pháp sau:

document.getElementById("element").attributeName;

AttributeName là tên của thuộc tính mà ta cần xử lý. Tùy vào mỗi thẻ HTML mà có các thuộc tính khác nhau.

Ví dụ: thay đổi thuộc tính src của một thẻ <img> :

<img id="image" src="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>Hình ảnh ban đầu là smiley.gif, nhưng tập lệnh đã thay đổi nó thành landscape.jpg</p>

4. Tạo và lấy nội dung của các attribute trong thẻ HTML

Để tạo ra các attribute có các thẻ HTML chúng ta sử dụng cú pháp:

element.setAttribute('attrName','attrValue');

Để lấy ra giá trị của các attribute trong thẻ HTML chúng ta sử dụng cú pháp:

element.getAttribute('AttrName');

Trong đó:

element là các đối tượng HTML (được gọi bằng các phương thức getElement …).
AttrName là tên của attribute mà ta muốn lấy hay tạo ra
attrValue là giá tri của attribute các ta muốn set .

Ví dụ: tạo ra attribute có tên là data-id và có giá trị bằng 5

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>laptrinhtudau.com</title>
</head>

<body>
    <div id="hello" data-id='javascript'>  Chào mừng các bạn đến với <a href="http://.com">website học lập trình online</a> </div>
    <div class="laptrinhtudau">laptrinhtudau.com 
    </div>
    
    <script type="text/javascript">
        //tạo ra data-id cho thẻ có id = hello
        document.getElementById('hello').setAttribute('data-id','5');
    </script>
</body>

</html>

Lấy ra giá trị data-id của thẻ HTML có id=hello .

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>laptrinhtudau.com</title>
</head>

<body>
    <div id="hello" data-id='javascript'>  Chào mừng các bạn đến với <a href="http://.com">website học lập trình online</a> </div>
    <div class="laptrinhtudau">laptrinhtudau.com
    </div>
    
    <script type="text/javascript">
        //lấy nội dung data-id của thẻ có id = hello
        var content = document.getElementById('hello').getAttribute('data-id');
        //in ra thông nội dung lấy được.
        alert(content);
    </script>
</body>

</html>