DOM Document

Mình sẽ cho bạn thấy được sức mạnh của DOM Document ở bài viết này :v. Trong bài viết trước mình đã nêu ra 3 cách truy xuất phần tử HTML, mình nghĩ là phải làm rõ chúng ra trong bài viết này. Okê bắt đầu đọc hiểu nào :D.

dom document

Mình không biết bạn sẽ làm gì cơ mà, nếu bạn muốn truy cập vào một phần tử HTML nào đó. Thì bạn sẽ phải dùng đến thằng này, chính là thằng mình mà mình đang nói ở đây.

Truy xuất các phần tử

Truy xuất các phần tử của tài liệu là một trong những thao tác cơ bản khi sử dụng DOM trong lập trình với JavaScript. Tại sao phải truy xuất phần tử, bởi vì bạn cần làm điều đó.Tí nữa sẽ giải quyết sau :D.

Truy xuất phần tử bằng ID

Phương thức getElementById() là một trong những phương thức cơ bản của DOM, truy xuất các phần tử xác định của một tài liệu HTML và trả về tham chiếu đến phần tử đó. Phần tử phải có thuộc tính id để được truy xuất bằng phương thức này.

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>
       <h4 id='h-4'> DOM Document</h4>
       <script type="text/javascript">
        var x = document.getElementById('h-4');
        console.log(x);
       </script>
</body>
</html>

Trong ví dụ trên:

Mình đặt id cho thẻ h4 là “h-4”
Dùng biến x để chứa phần tử h4 sau khi sử dụng document.getElementById('h-4') để truy xuất phần tử
Dùng phương thức console.log(x) để kiểm tra đã truy xuất được phần tử h4 hay chưa.

Lưu ý: Khi truy xuất phần tử thì nên đặt nó vào một cái biến để dễ sử dụng

Truy xuất bằng tên thẻ HTML

Phương thức getElementById() rất hữu dụng khi bạn chỉ cần truy xuất một hoặc vài phần tử. Tuy nhiên, nếu bạn muốn truy xuất nhiều phần tử cùng lúc thì dùng phương thức getElementsByTagName() sẽ tốt hơn nhiều. Phương thức getElementsByTagName() trả về một mảng hoặc danh sách tất cả các phần tử có tên thẻ trùng với tên thẻ trong tham số.

Điểm khác biệt của ID và TagName là ở chữ s sau getElement thằng có thằng không, s là số nhiều đúng k. Có nghĩa là thằng TagName sẽ trả về một đống phần tử còn Id thì duy nhất thôi nhé. Khi truy xuất bằng TagName chúng ta cần duyệt mảng để lấy phần tử ngon nhất.

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>
       <h4 id='h-4'> DOM Document</h4>
       <h4>getElementsTagName()</h4>
       <h4>Standard Body</h4>
       <script type="text/javascript">
        var x = document.getElementsByTagName('h4');
        console.log(x);
        alert(x[2].innerHTML);
        </script>
</body>
</html>

Trong ví dụ trên:

Mình sẽ truy xuất thẻ h4
Dùng biến x để chứa phần tử h4 sau khi sử dụng document.getElementsByTagName('h4') để truy xuất phần tử
Dùng phương thức console.log(x) để kiểm tra đã truy xuất được tất cả thẻ h4 hay chưa.
Dùng phương thức alert(x[2].innerHTML) để thông báo ra màn hình nội dung của phần từ h4 thứ 3.

Thay đổi các thành phần HTML

Đây là câu trả lời tại sao phải truy xuất phần tử .

Phương thức	Mô tả
element.innerHTML = new html content	Thay đổi nội dung bên trong của phần tử HTML
element.attribute = new value	Thay đổi thuộc tính của phần tử HTML
element.setAttribute(attribute, value)	Thay đổi thuộc tính của phần tử HTML
element.style.property = new style	Thay đổi style của phần tử HTML

element.innerHTML

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>
       <h4 id='h-4'> DOM Document</h4>
       <script type="text/javascript">
         x = document.getElementById('h-4');
         x.innerHTML = 'Em cua ngay hom wa';
       </script>
</body>
</html>

Mình đã thay đổi nội dung thẻ h4 thành “Em cua ngay hom wa”

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>
       <h4 id='h-4'> DOM Document</h4>
       <script type="text/javascript">
         x = document.getElementById('h-4');
         x.innerHTML = '<button>Click me</button'>
       </script>
</body>
</html>

Mình đã thay đổi nội dung thẻ h4 thành một thẻ button có tên là Click me.

element.attribute

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>       
       <a href="https://google.com">Google</a>
       <script type="text/javascript">
         x = document.getElementsByTagName('a');
         x[0].href = 'http://youtube.com';
       </script>
</body>
</html>

Mình đã thay đổi attribute href của thẻ a thành ‘https://youtube.com’.

element.setAttribute(attribute,value)

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>       
       <a href="https://google.com">Google</a>
       <script type="text/javascript">
         x = document.getElementsByTagName('a');
         x[0].setAttribute('href','https://facebook.com');
       </script>
</body>
</html>

Mình đã thay đổi attribute href của thẻ a thành ‘https://facebook.com’.

element.style.property

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>       
       <a href="https://google.com">Google</a>
       <script type="text/javascript">
         x = document.getElementsByTagName('a');
         x[0].style.color = 'red';
       </script>
</body>
</html>

Mình đã thay đổi style color của thẻ a thành màu “red”.

Bây giờ đã hiểu DOM Document là gì rồi phải không. Mình viết đến đây thôi, mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

5/5 - (2 bình chọn)

DOM Document

Truy xuất các phần tử

Truy xuất phần tử bằng ID

Truy xuất bằng tên thẻ HTML

Thay đổi các thành phần HTML

Bài viết liên quan

Reader Interactions

Để lại một bình luận Hủy