JS 13 – JS HTML DOM

0
98

1. Giới thiệu về JS HTML DOM

DOM là từ viết tắt của Document Object Model được hiểu là Mô hình đối tượng trong tài liệu HTML.

Với HTML DOM thì Javascript có thể truy cập và thay đổi tất cả các phần tử của một tài liệu HTML.
Trong bài viết này tôi sẽ giới thiệu cho các bạn một số phương thức , thuộc tính có trong  HTML DOM

2. Các phương thức tìm thành phần HTML

2.1. Phương thức document.getElementById()

Phương thức  document.getElementById() cho chúng ta tìm kiếm phần tử HTML bằng id của phần tử đó

Cú pháp

Ví dụ

See the Pen wqxBZq by Cao Anh Nhất (@xeko995) on CodePen.dark

Note: Vì ID là duy nhất nên phương thức này chỉ trả về các thuộc tính và giá trị của phần tử đầu tiên nó tìm được.

2.2. Phương thức document.getElementsByClassName()

Phương thức getElementsByClassName()  cho phép chúng ta tìm một class nào đó trong các phần tử HTML

Cú pháp

Khi sử dụng phần tử này kết quả trả về là một mảng các phần tử chứa class đó.

Ví dụ

See the Pen GvBJEM by Cao Anh Nhất (@xeko995) on CodePen.dark

2.3. Phương thức document.getElementsByTagName()

Phương thức document.getElementsByTagName() cho phép chúng ta tìm một thẻ HTML bất kỳ.

Cú pháp

 

Tương tự như phương thức document.getElementsByClassName() thì phương thức document.getElementsByTagName()  cũng trả về kết quả là một mảng chứa tất cả các danh sách phần tử được tìm thấy.

Ví dụ

See the Pen gxjpzv by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Thuộc tính thay đổi phần tử HTML

3.1. Thay đổi nội dung HTML

Để thay lấy và thay đổi nội dung trong thẻ HTML chúng ta sử dụng thuộc tính innerHTML

Cú pháp

Ví dụ.

See the Pen YxjypL by Cao Anh Nhất (@xeko995) on CodePen.dark

3.2. Thay đổi thuộc tính các thẻ HTML

Để lấy nội dung thuộc tính và thay đổi thuộc tính các thẻ HTML chúng ta sử dụng cú pháp

Ví dụ.

See the Pen NvBGyW by Cao Anh Nhất (@xeko995) on CodePen.dark

 

Các bài viết trước:

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here