Trong khi tạo trang web và làm việc với JavaScript, bạn sẽ thường xuyên cần truy cập vào các phần tử trong DOM cho các mục đích khác nhau
Hướng dẫn này chỉ cho bạn các cách khác nhau để lấy một phần tử từ DOM bằng JavaScript
getElementById
Phương thức getElementById[] cho phép bạn truy xuất một phần tử từ DOM bằng cách sử dụng ID của phần tử đó
Nếu không có phần tử nào tồn tại trong DOM với ID đã cung cấp, thay vào đó,
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
8 sẽ được trả vềVí dụ
const mainElement = document.getElementById['main'];
getElementsByTagName
getElementsByTagName[] cho phép bạn truy xuất một HTMLCollection gồm các phần tử có tên thẻ mà bạn cung cấp cho phương thức. Một ví dụ về tên thẻ là
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
9Các mục trong một
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
0 có thể được truy cập tương tự như cách bạn truy cập các mục trong một mảngVí dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
Bạn có thể sử dụng phương pháp này trên bất kỳ phần tử nào chứ không chỉ
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1. Bằng cách đó, bạn có thể truy xuất tất cả phần tử con của phần tử đó có tên thẻ được cung cấpVí dụ
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
getElementsByClassName[]
Phương thức getElementsByClassName[] cho phép bạn truy xuất một
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
0 phần tử trực tiếp có tên lớp mà bạn cung cấp làm tham sốMột
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
0 trực tiếp có nghĩa là các mục trong bộ sưu tập được cập nhật với bất kỳ cập nhật nào xảy ra với DOM. Vì vậy, ví dụ: nếu một mục là một phần của bộ sưu tập vì nó có lớp được cung cấp làm tham số, nhưng sau đó lớp của nó bị xóa, thì mục đó sẽ bị xóa khỏi bộ sưu tậpVí dụ
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
getElementsByName[]
Phương thức getElementsByName[] cho phép bạn truy xuất các phần tử theo giá trị của thuộc tính
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
4. Ví dụ: bạn có thể sử dụng nó để truy xuất các phần tử const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
5 có thuộc tính const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
4 được đặt thành const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
7Phương thức này trả về một NodeList trực tiếp, thường tương tự như một
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
0, nhưng các mục trong danh sách có thể được truy cập thông qua nó cung cấpVí dụ
const emailElements = document.getElementsByName['email'];
console.log[emailElements.item[0]];
bộ chọn truy vấn
Phương thức querySelector[] cho phép bạn truy xuất phần tử đầu tiên khớp với bộ chọn đã chỉ định. Bộ chọn có thể là bất kỳ bộ chọn CSS nào
Ví dụ
const elm = document.querySelector['.main > p'];
console.log[elm];
Phương pháp này có thể được sử dụng trên bất kỳ phần tử nào, không chỉ đối với
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1. Vì vậy, bạn có thể sử dụng nó để truy xuất phần tử con của phần tử cha khớp với bộ chọn đã chỉ địnhVí dụ
const table = document.querySelector['.main > table'];
const thead = table.querySelector['thead'];
truy vấnSelectorAll
Phương thức querySelectorAll[] cho phép bạn truy xuất tất cả các phần tử khớp với bộ chọn đã chỉ định. Phương thức này trả về một
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
0Ví dụ
const elms = document.querySelectorAll['.main > p'];
console.log[elms.item[0]];
Phương pháp này có thể được sử dụng trên bất kỳ phần tử nào, không chỉ đối với
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1. Vì vậy, bạn có thể sử dụng nó để truy xuất tất cả các phần tử con của phần tử cha khớp với bộ chọn đã chỉ địnhVí dụ
const table = document.querySelector['.main > table'];
const rows = table.querySelectorAll['tr'];
for [const row of rows] {
console.log[row];
}
những đứa trẻ
Thuộc tính
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
2 cho phép bạn truy xuất tất cả các phần tử con trực tiếp của const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1 hoặc bất kỳ phần tử nào. Loại tài sản này là một const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
0 trực tiếpVí dụ
const rows = document.querySelectorAll['table tr'];
for [const row of rows] {
console.log[row.children];
}
yếu tố đầu tiênCon
Thuộc tính
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
5 cho phép bạn truy xuất phần tử con đầu tiên của const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1 hoặc bất kỳ phần tử nàoNếu phần tử không có con, giá trị của
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
5 là const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
8Ví dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
0lastElementCon
Thuộc tính
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
9 cho phép bạn truy xuất phần tử con cuối cùng của const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1 hoặc bất kỳ phần tử nàoNếu phần tử không có con, giá trị của
const mainElements = document.getElementsByClassName['main'];
console.log[mainElements];
9 là const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
8const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
1kịch bản
Thuộc tính
const emailElements = document.getElementsByName['email'];
console.log[emailElements.item[0]];
3 cho phép bạn truy xuất tất cả các phần tử const emailElements = document.getElementsByName['email'];
console.log[emailElements.item[0]];
4 trong tài liệu. Nó trả về một const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
0 phần tửVí dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
2phần tửFromPoint
Phương thức elementFromPoint[] cho phép bạn truy xuất phần tử trên cùng bắt đầu từ một điểm đã chỉ định. Nó nhận tọa độ x và y để định vị điểm cần tìm phần tử
Ví dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
3phần tửFromPoint
Phương thức ElementFromPoint[] cho phép bạn truy xuất một mảng các Phần tử bắt đầu từ một điểm xác định cho đến khi kết thúc khung nhìn
Ví dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
4gần nhất
Phương thức gần nhất[] có sẵn trên các phần tử [không phải trên
const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1] cho phép bạn truy xuất tổ tiên gần nhất [là cha mẹ] của phần tử khớp với bộ chọn đã chỉ định. Nếu không tìm thấy phần tử nào, phương thức trả về const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
8Ví dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
5tiếp theoElementAnh chị em
Thuộc tính
const emailElements = document.getElementsByName['email'];
console.log[emailElements.item[0]];
8 trên các phần tử [không phải trên const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1] cho phép bạn truy xuất phần tử theo sau phần tử hiện tại trong số các phần tử con của cha mẹ nóNếu không có phần tử nào sau phần tử này, giá trị của thuộc tính sẽ là
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
8Ví dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
6trướcYếu tốAnh chị em
Thuộc tính
const elm = document.querySelector['.main > p'];
console.log[elm];
1 trên các phần tử [không phải trên const divElements = document.getElementsByTagName['div'];
const pElements = divElements[0].getElementsByTagName['p'];
console.log[pElements];
1] cho phép bạn truy xuất phần tử tiếp theo phần tử hiện tại trong số các phần tử con của cha mẹ nóNếu không có phần tử nào trước phần tử này, giá trị của thuộc tính sẽ là
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
8Ví dụ
const divElements = document.getElementsByTagName['div'];
console.log[divElements[0]];
7Phần kết luận
Hướng dẫn này khám phá danh sách các phương thức và thuộc tính mà bạn có thể sử dụng để truy xuất các phần tử trong JavaScript. Mỗi mục đích khác nhau và có thể được sử dụng khác nhau dựa trên trường hợp sử dụng của bạn