Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
Việc truy cập các phần tử trong JavaScript thuần túy bằng DOM trước đây không phải là quá tầm thường. Điều này đến hai phương pháp mới, querySelector & querySelectorAll , hiện đã được hỗ trợ trong tất cả các trình duyệt hiện đại, tác vụ này giờ đây dễ dàng hơn nhiều.
querySelector
querySelector trả về phần tử đầu tiên phù hợp với truy vấn CSS được cung cấp. Sử dụng nó trên toàn bộ tài liệu:
let myElem = document.querySelector('#myElem');
Hoặc sử dụng nó trên một phần tử để lấy một phần tử trong phần tử:
let elem = document.querySelector('p');
let myElem = elem.querySelector('#myElem');
querySelectorAll
querySelector trả về tất cả các phần tử phù hợp với bộ chọn được cung cấp:
let elems = document.querySelectorAll('p');
Và ở đây bạn có thể làm tương tự và thu hẹp lựa chọn của bạn . Hãy chọn các phần tử span nằm trong phần tử p đầu tiên:
let firstP = document.querySelector('p');
let spanElems = firstP.querySelectorAll('span');
Bạn có thể tìm thêm dữ liệu về hỗ trợ tính năng bộ chọn truy vấn trên các trình duyệt chính từ caniuse.com .
Các tin liên quan
Một trang đơn giản mờ dần với JavaScript2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10
Chức năng của Trình tạo trong JavaScript với ES6 / ES2015
2016-11-07
Tham số phần còn lại trong JavaScript với ES6 / ES2015
2016-11-02
Hứa hẹn trong JavaScript với ES6 / ES2015
2016-10-31
Chữ mẫu trong JavaScript (ES6 / ES2015)
2016-10-11
console.table () trong JavaScript
2016-09-28
console.time () & console.timeEnd () trong JavaScript
2016-09-28
Phương thức chuỗi toLowerCase () và toUpperCase trong JavaScript
2016-08-29
Loại bỏ JavaScript chặn hiển thị với Async và Defer
2016-08-20
