DOM selectors thường được sử dụng để truy cập đến các element nodes trong tài liệu HTML bằng Javascript. Hãy cùng tìm hiểu tại bài viết dưới đây nhé!

Có 2 loại DOM selectors, bao gồm:

• Single element selector

• Multiple elements selector

Single element selector

Single element selector chỉ cho phép truy cập duy nhất một element node trong tài liệu HTML.

Các phương thức thường dùng: 

• getElementById
• querySelector

Truy cập element thông qua Id (getElementById)

• Chúng ta có thể truy cập một element node thông qua giá trị của thuộc tính ID bằng cách sử dụng phương thức getElementById.
• Phương thức này sẽ trả về giá trị “null” nếu không có element node nào có Id phù hợp.

Cú pháp: document.getElementById(“ID”)

Ví dụ:

document.getElementById(“poly”).style.color=“orange”;

Truy cập element thông qua truy vấn selector (querySelector)

• Đây là phương thức cho phép truy cập tới một element node thông qua các selector như id selector, class selector hoặc HTML selector.
• Phương thức này chỉ trả về element node đầu tiên phù hợp.

Cú pháp:

• document.querySelector(“.class”)
• document.querySelector(“#Id”)
• document.querySelector(“tag”)

Ví dụ:

document.querySelector(“.poly”).style.color=“orange”;

Multiple elements selector

Multiple elements selector cho phép truy cập tới nhiều element nodes trong tài liệu HTML.

Các phương thức thường dùng: 

• getElementsByClassName
• getElementsByTagName
• querySelectorAll

Truy cập element thông qua class name (getElementsByClassName)

Phương thức getElementsByClassName trả về một tập hợp các element nodes bằng cách truy cập thông qua giá trị của thuộc tính class. Chúng ta có thể truy cập các phần tử bằng cách sử dụng một chỉ mục.

Ví dụ:

let items = document.getElementsByClassName(“poly”);

console.log(items)  //return the list of items

items[3].textContent= “hello world”; //text changed

items[3].style.color = “orange”; //color changed to red

có thể truy cập các phần tử thông qua chỉ mục

for(let i = 0;i<=items.length;i++){

     items[i].style.color = “orange”;}

Truy cập element thông qua tag name (getElementsByTagName)

Phương thức getElementsByTagName trả về một tập hợp các element nodes bằng cách truy cập thông qua tên thẻ.

Ví dụ:

let tagName = document.getElementsByTagName(“li”);

console.log(tagName);

tagName[3].style.color = “red”;

có thể truy cập các phần tử thông qua chỉ mục

for(let i = 0;i<=tagName.length;i++){

     tagName[i].style.color = “orange”;}

Truy cập element thông qua truy vấn tất cả selector (querySelectorAll)

Cách dùng tương tự như phương thức querySelector, tuy nhiên phương thức querySelectorAll trả về một tập hợp các element nodes thay vì một element node.

Cú pháp:

• document.querySelectorAll(“.class”)
• document.querySelectorAll(“#Id”)
• document.querySelectorAll(“tag”)

Ví dụ:

let listItems = document.querySelectorAll(“.class”);

console.log(listItems);

listItems[3].style.color = “red”;

có thể truy cập các phần tử thông qua chỉ mục

for(let i = 0;i<=listItems.length;i++){

     listItems[i].style.color = “orange”;}

Bộ môn Phát triển phần mềm

Cao đẳng FPT Mạng cá cược bóng đá Hà Nội