DOM HTML trong javascript

Sau khi đã tìm kiếm được các thẻ HTML trong javascript thì giờ chúng ta sẽ cùng đi tìm hiểu các hàm tác động vào nó. Cụ thể bài này chúng ta sẽ tìm hiểu các hàm lấy ra giá trị của các thẻ HTML đó.

1, Lấy nội dung trong thẻ HTMl và thay đổi nó.

Lấy nội dung

-Để lấy nội dung bên trong thẻ HTMl chúng ta sử dụng cú pháp:

element.innerHTML

-Trong đó: element là các đối tượng HTML (được gọi bằng các phương thức getElement...).

VD:

//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);

Xem Kết Quả

Thay đổi nội dung

-Để thay đổi nội dung cho thẻ HTML đó thì các bạn chỉ sử dụng cú pháp:

element.innerHTML = 'Giá trị mới';

-Trong đó: element là các đối tượng HTML (được gọi bằng các phương thức getElement...).

VD:

//thay đổi nội dung của thẻ có id = hello
document.getElementById('hello').innerHTML = 'Học javascript cơ bản';

Xem Kết Quả

Lấy và thay đổi nội dung dưới dạng văn bản.

-Nếu như bạn muốn lấy nội dung text, hay thay đổi nội dung dưới dạng dữ liệu thô thì các bạn chỉ cần thay thuộc tính innerHTML thành innerText.

VD: Lấy nội dung text của thẻ HTML.

//lấy nội dung của thẻ có id = hello
var content = document.getElementById('hello').innerText;
//in ra nội dung của thẻ đó.
alert(content);

Xem Kết Quả

VD: Thay đổi nội dung của một thẻ HTML dưới dạng thô.

//thay đổi nội dung của thẻ có id = hello
var content = document.getElementById('hello').innerText = '<b>Học javascript cơ bản</b>';

Xem Kết Quả

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

Tạo ra các attribute cho 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');

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à các bạn muốn tạo ra.
attrValue là giá tri của attribute các bạn muốn set.

VD:tạo ra attribute có tên là data-id và có giá trị = 5.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</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="toidicode">TOIDICODE.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>

Xem Kết Quả

Lấy ra giá trị của các attribute

-Để 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à các bạn muốn lấy.

VD: 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>Toidicode.com javascript</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="toidicode">TOIDICODE.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>

Xem Kết Quả

3, Lời Kết.

-Như vậy mình đã giới thiệu xong đến mọi người cơ bản về DOM HTML trong javascript rồi, còn các vấn đề liên quan đến series thực hành mình sẽ nói sau.

Chúc các bạn học tốt!