Nhận id từ htmlcollection

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

9

Cá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ảng

Ví 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ấp

Ví 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ập

Ví 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);

7

Phươ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ấp

Ví 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ỉ định

Ví 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);

0

Ví 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ỉ định

Ví 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ếp

Ví 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ào

Nế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]);

8

Ví dụ

const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);

0

lastElementCon

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ào

Nế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]);

8

const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);

1

kị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]);

2

phầ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]);

3

phầ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]);

4

gầ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]);

8

Ví dụ

const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);

5

tiế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]);

8

Ví dụ

const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);

6

trướ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]);

8

Ví dụ

const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);

7

Phầ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

Làm cách nào để lấy giá trị id trong HTML?

Làm cách nào để lấy ID HTML trong JavaScript?

Làm cách nào để lấy id của div trong JavaScript?

Làm cách nào để lấy giá trị thuộc tính id trong JavaScript?