07/09/2018, 15:23

Các danh sách Node trong JavaScript HTML DOM

Đối tượng NodeList trong HTML DOM Một đối tượng NodeList là một danh sách (tập hợp) các nút được trích xuất từ một tài liệu. Một đối tượng NodeList hầu như giống như một đối tượng HTMLCollection. Một số trình duyệt (cũ) trả lại một đối tượng NodeList thay vì ...

Đối tượng NodeList trong HTML DOM

Một đối tượng NodeList là một danh sách (tập hợp) các nút được trích xuất từ một tài liệu. Một đối tượng NodeList hầu như giống như một đối tượng HTMLCollection.

Một số trình duyệt (cũ) trả lại một đối tượng NodeList thay vì một HTMLCollection cho các phương thức như getElementsByClassName().

Tất cả các trình duyệt trả về một đối tượng NodeList cho các thuộc tính childNodes. Hầu hết các trình duyệt trả về một đối tượng NodeList cho phương thức querySelectorAll().

Đoạn mã sau chọn tất cả các node <p> trong một tài liệu:

var myNodeList = document.querySelectorAll(“p”);

Các phần tử trong NodeList có thể được truy cập bởi một số chỉ mục. Để truy cập node <p> thứ hai bạn có thể viết:

y = myNodeList[1];

Lưu ý: chỉ mục bắt đầu từ 0.

Độ dài danh sách node HTML DOM

Thuộc tính length xác định số node trong một danh sách node:

var myNodelist = document.querySelectorAll(“p”);
document.getElementById(“demo”).innerHTML = myNodelist.length;

Giải thích ví dụ:

  1. Tạo một danh sách tất cả các phần tử <p>
  2. Hiển thị chiều dài của danh sách

Thuộc tính length hữu ích khi bạn muốn lặp qua các node trong một danh sách node. Ví dụ thay đổi màu nền của tất cả các phần tử <p> trong một danh sách node:

var myNodelist = document.querySelectorAll(“p”);
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = “red”;
}

Sự Khác biệt giữa HTMLCollection và NodeList

Một HTMLCollection là một tập hợp các phần tử HTML. Một NodeList là một tập hợp các node tài liệu. Trong nhiều trường hợp, hai đối tượng này rất giống nhau.

Cả hai đối tượng HTMLCollection và NodeList là một danh sách giống như mảng (collection) các đối tượng. Cả hai đều có thuộc tính chiều dài xác định số lượng mục trong danh sách. Cả hai đều cung cấp một chỉ mục (0, 1, 2, 3, 4, …) để truy cập vào từng mục như một mảng.

Các mục HTMLCollection có thể được truy cập theo tên, id hoặc số thứ tự của chúng.

Các mục NodeList chỉ có thể được truy cập bởi số chỉ mục của chúng.

Chỉ đối tượng NodeList có thể chứa các node thuộc tính và văn bản.

Một danh sách node trông có vẻ giống nhưng không phải là một mảng. Bạn có thể lặp lại danh sách node và xem các node của nó như một mảng. Tuy nhiên, bạn không thể sử dụng phương thức mảng như valueOf(), push(), pop(), hoặc join() trên một danh sách node.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
Bài liên quan

Các danh sách Node trong JavaScript HTML DOM

Đối tượng NodeList trong HTML DOM Một đối tượng NodeList là một danh sách (tập hợp) các nút được trích xuất từ một tài liệu. Một đối tượng NodeList hầu như giống như một đối tượng HTMLCollection. Một số trình duyệt (cũ) trả lại một đối tượng NodeList thay vì ...

Tạ Quốc Bảo viết 15:23 ngày 07/09/2018

Các lỗi thường gặp trong JavaScript

Dưới đây là một số lỗi cơ bản bạn có thể gặp trong khi lập trình JavaScript. Vô tình sử dụng toán tử gán Các chương trình JavaScript có thể tạo ra các kết quả không mong muốn nếu một lập trình vô tình sử dụng toán tử gán (=), thay vì toán tử so sánh (==) trong ...

Trần Trung Dũng viết 15:01 ngày 07/09/2018

Các phép tính Bitwise trong JavaScript

Các phép tính Bitwise Toán tử Tên Mô tả & AND Thực hiện một phép toán AND logic trên mỗi bit của các tham số integer | OR Thực hiện một phép toán OR logic trên mỗi bit của các tham số integer ^ XOR Thực hiện một phép toán ...

Trịnh Tiến Mạnh viết 14:53 ngày 07/09/2018

Các loại dữ liệu trong JavaScript

Các biến JavaScript có thể chứa nhiều loại dữ liệu: số, chuỗi, đối tượng…: var length = 16; // Number var lastName = “Johnson”; // String var x = {firstName:”John”, ...

Bùi Văn Nam viết 14:43 ngày 07/09/2018

Sắp xếp thứ tự các phần tử mảng trong JavaScript

- Mặc định thì thứ tự của các phần tử trong mảng sẽ giống với thứ tự được sắp xếp lúc khai báo. - Tuy nhiên, với các phương thức xử lý mảng trong JavaScript, ta có thể sắp xếp lại thứ tự các phần tử cho mảng. 1) Sắp xếp theo thứ tự tăng dần trong từ điển - Phương thức sort() được dùng để ...

Bùi Văn Nam viết 11:13 ngày 18/08/2018
0