Htmlcollection vào nodelist

Question

Bài viết này là một phần của sê-ri JavaScript dành cho người không mới, giúp các bạn đã có kinh nghiệm code trong các ngôn ngữ khác nhanh chóng làm quen với JS

Nội dung chính Show

A. Giới thiệu DOM
1. Giới thiệu
B. phần tử DOM
1. Tìm phần tử
2. yếu tố truy cập
3. đi ngang qua
C. nút DOM
1. Giao diện nút
2. Tạo phần tử
3. Loại bỏ, thay thế phần tử
4. Bộ sưu tập HTML và NodeList
D. sự kiện DOM
1. Tổng quan
2. người nghe sự kiện

Nếu được rất mong nhận được sự ủng hộ và đóng góp ý kiến của mọi người để hoàn thiện series

A. Giới thiệu DOM

1. Giới thiệu

DOM (Mô hình đối tượng tài liệu) là một thực thể được tạo ra bởi trình duyệt khi tải một trang web. DOM bao gồm nhiều phần tử, tổ chức phân cấp theo dạng cây nên được gọi là cây DOM. Cấu trúc cây DOM khá giống với cấu trúc các phần tử trong tài liệu HTML, các thẻ lồng nhau được mô hình hóa tương ứng trong DOM

Ví dụ bắt đầu với đoạn HTML after

<html>
<head>
head>
<body>
    <p>This is a simple paragraphp>
    <div>
        <a href="">A linka>
    div>
body>
html>

Trang HTML khi được tải, thì một đối tượng DOM tương ứng được tạo ra bởi trình duyệt. Đối tượng DOM có cấu trúc phân cấp tương tự như các phần tử trong trang HTML trên

Document
    html - Root element
        head
        body
            p
            div
                a

Trình duyệt sẽ hiển thị trang web dựa trên cấu trúc DOM như trên, và nó cũng cung cấp API cho JS truy cập vào, làm như vậy JS mới có khả năng truy cập vào các phần tử trên trang web (thông qua DOM) và tạo nên sự.

Nhờ có DOM, JS mới có thể thực hiện các hành động sau

Đọc dữ liệu và thay đổi các phần tử
Change CSS style for element
Thêm, xóa phần tử hoặc thuộc tính của nó
Xử lý sự kiện cho các phần tử

DOM có 3 loại, bao gồm Core DOM, XML DOM và HTML DOM. Phần này chỉ trình bày về HTML DOM. Hiểu đơn giản, DOM là một giao diện, bao gồm các đối tượng tiêu chuẩn, phương thức,. trình duyệt được cung cấp cho các ngôn ngữ như JS có thể truy cập vào, từ đó thực hiện các hành vi trên trang web

B. phần tử DOM

1. Tìm phần tử

Để thực hiện các hành động trên trang web, trước tiên chúng ta cần "chọn" những yếu tố cần thiết, sau đó mới thực hiện các hành động như đọc, thay đổi nội dung,. on the selector element

Để tối ưu hơn cho hiệu suất, thì không nên truy cập DOM quá nhiều, vì các thao tác với DOM khá chậm. Vì vậy, khi "chọn" xong một phần tử cần thực hiện nhiều hành động, thì nên lưu phần tử đó vào một biến. Ví dụ

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

Tài liệu đối tượng cung cấp nhiều phương thức để thực hiện việc "chọn" các phần tử

Find the id, class or tag
Find with string CSS selector
Tìm các phần tử thuộc về các bộ sưu tập có sẵn

Chú ý, đây là một lỗi khá cơ bản. Phương thức dùng để chọn phần tử có thể chọn một hoặc nhiều phần tử. Chú ý những phương thức chọn nhiều phần tử sẽ có thêm

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

4 trong tên phương thức, ví dụ

document.getElementById('title');  // không có s
document.getElementsByTagName('div');  // có s

Find the ID, class, tag name

let e = document.getElementById("logo");

Trả về một phần tử có id xác định, nếu không tìm thấy trả về null

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

Tìm theo tên lớp hoặc tên thẻ. Khác với việc tìm theo ID chỉ trả về một phần tử, hai phương thức này trả về một mảng (thực ra chỉ hơi giống chứ không phải mảng). Do đó, có thể truy cập từng phần tử cụ thể tương tự như truy cập các phần tử của mảng

Search the CSS selector string

let first_box = document.querySelector("div.box");

Trả về phần tử đầu tiên được tìm thấy, là một đối tượng Nút khớp với bộ chọn chuỗi. Nếu không tìm thấy phương thức được trả về null

________số 8

Trả về một NodeList các phần tử được tìm thấy. Cấu trúc NodeList bằng cách sử dụng tương tự mảng

Hai method on throws error SYNTAX_ERR if string selector sai

Tìm kiếm trong các bộ sưu tập có sẵn

Trong DOM có một số bộ sưu tập được xây dựng sẵn (tích hợp sẵn), chứa các thành phần nhóm thường được sử dụng như biểu mẫu, liên kết, hình ảnh,. trong toàn bộ tài liệu

HTMLcollection khá giống NodeList, both all are used to anar array. Phần này sẽ được nói rõ hơn trong phần sau

2. yếu tố truy cập

Với DOM có thể truy cập vào bất kỳ phần tử bất kỳ nào trên trang web, để đọc dữ liệu và thay đổi nội dung, thuộc tính hoặc phong cách của nó

nội dung phần tử

Để truy cập phần tử nội dung văn bản, hãy sử dụng thuộc tính

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

5. Thuộc tính chứa chuỗi nội dung (không chứa thẻ mã) và có thể gán giá trị mới

Document
    html - Root element
        head
        body
            p
            div
                a

0

Có những phần tử không có nội dung, chẳng hạn như img,

Ngoài ra còn có hai thuộc tính

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

6 và

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

7 tương tự

thuộc tính HTML

Do DOM mô hình hóa các phần tử thành đối tượng, nên các thuộc tính HTML cũng được mã hóa thành các thuộc tính của đối tượng DOM

Chú ý, trong HTML thuộc tính là thuộc tính, nhưng trong DOM gọi là thuộc tính. Thuộc tính hiểu là thông tin bổ sung thêm cho phần tử, trong khi thuộc tính nhấn mạnh tính chất sở hữu của phần tử khi ở dạng đối tượng

Tên thuộc tính tương tự với tên thuộc tính nên dễ làm quen và sử dụng

Document
    html - Root element
        head
        body
            p
            div
                a

3

Để truy cập thuộc tính, cần gọi tên đối tượng kèm theo và dấu chấm, tiếp theo tới tên thuộc tính như trên

Ngoài ra còn hai phương thức là

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

8 và

let boxes = document.getElementsByClassName("box");
let links = document.getElementsByTagName("a");

9, giúp đọc và thay đổi thuộc tính HTML (một lần nữa, thuộc tính của HTML chứ không phải thuộc tính CSS)

Document
    html - Root element
        head
        body
            p
            div
                a

0

phong cách CSS

Các kiểu được DOM cho vào một đối tượng thuộc tính, có tên là kiểu. Do đó, chúng ta cần gọi thuộc tính trong thuộc tính như mã ví dụ bên dưới

Document
    html - Root element
        head
        body
            p
            div
                a

1

Thuộc tính trong CSS sử dụng gạch nối, nhưng trong JS được đổi lại thành camelCase. Và các thuộc tính tốc ký được viết ở dạng chuỗi tương tự trong CSS as on

3. đi ngang qua

Do các phần tử trong DOM được tổ chức phân cấp, có mối quan hệ với nhau nên từ một phần tử chúng ta có thể tìm ra các phần tử liên quan dựa trên mối quan hệ giữa chúng

Từ đây mình sẽ dùng từ nút để gọi các phần tử. Nút sẽ bàn tới trong phần sau, nhưng cơ bản mỗi phần tử đều là nút

DOM cung cấp cho chúng ta một số thuộc tính để tìm kiếm các nút liên quan đến nút đã chọn

Document
    html - Root element
        head
        body
            p
            div
                a

2

Các thuộc tính này trả về một tham chiếu tới nút đối tượng khác có liên quan

C. nút DOM

1. Giao diện nút

Nút là đối tượng cơ bản nhất trong DOM, mọi thứ trong tài liệu, phần tử cũng là nút. Bản chất nút là một giao diện, mọi đối tượng trong DOM đều triển khai giao diện này, nên mọi đối tượng trong DOM đều có thể xem như một nút. Vì vậy, chúng có những thuộc tính và phương thức chung

Nút có thể là phần tử, có thể là thuộc tính (thuộc tính HTML), văn bản (nút văn bản), ghi chú (nút nhận xét). Ngoài ra còn có nhiều loại khác nữa như thực thể, ký hiệu, loại tài liệu,. nhưng chúng ta không cần quan tâm quá nhiều

thành viên nút

Document
    html - Root element
        head
        body
            p
            div
                a

3

Thuộc tính

let first_box = document.querySelector("div.box");

0 trả về một số, có thể hiện nút loại. Ví dụ như nút phần tử (1), nút thuộc tính (2), nút văn bản (3), nút bình luận (8),

Một phần tử thực sự được tạo ra bởi nhiều nút, do đó khi tạo phần tử cần tạo nút con nheièu và ghép chúng lại thành phần tử hoàn chỉnh. Ví dụ như một thẻ a as after

Document
    html - Root element
        head
        body
            p
            div
                a

4

Thì sẽ bao gồm 3 nút cơ bản

Document
    html - Root element
        head
        body
            p
            div
                a

5

Mỗi nút sẽ có một thuộc tính là

let first_box = document.querySelector("div.box");

1, chứa giá trị của nút

nút gốc

Tài liệu đối tượng chứa hai nút đặc biệt là

let first_box = document.querySelector("div.box");

2,

let first_box = document.querySelector("div.box");

3 và

let first_box = document.querySelector("div.box");

4. JS có thể truy cập vào hai nút này, từ đó truy cập toàn bộ đối tượng trên trang web

2. Tạo phần tử

Để tạo một phần tử trong DOM, bao gồm 4 bước

Tạo nút phần tử
Tạo nút văn bản, nút thuộc tính con
Thêm các nút con trên vào nút phần tử
Thêm nút phần tử vào một vị trí bất kỳ

Ví dụ để thêm liên kết phần tử như phần trên, thì chúng ta sử dụng mã sau

Document
    html - Root element
        head
        body
            p
            div
                a

6

Đoạn mã trên chỉ tạo một liên kết, nhưng nó không xuất hiện. You have to add it into a element any that by two method after

Document
    html - Root element
        head
        body
            p
            div
                a

7

Ngoài cách tạo phần tử bằng từng nút con, chúng ta có thể thực hiện bằng một số phương thức có sẵn của phần tử. Ví dụ thay vì tạo nút tr, td để chèn thêm dòng vào một bảng, thì chỉ cần chọn bảng đó rồi gọi phương thức

let first_box = document.querySelector("div.box");

5 của nó là xong

Tuy nhiên, cách này yêu cầu bạn phải nhớ các phương pháp dành riêng cho từng loại phần tử cụ thể, làm điều đó ít khi được sử dụng

3. Loại bỏ, thay thế phần tử

loại bỏ phương pháp

Sử dụng phương thức

let first_box = document.querySelector("div.box");

6 của phần tử để xóa chính nó

Document
    html - Root element
        head
        body
            p
            div
                a

8

Phương thức RemoveChild

Đôi khi vì trình duyệt không hỗ trợ nên phương thức

let first_box = document.querySelector("div.box");

6 không thể hoạt động. Khi đó, chúng ta có thể xóa gián tiếp thông qua parentNode của nó, và xóa bằng phương pháp

let first_box = document.querySelector("div.box");

8

Document
    html - Root element
        head
        body
            p
            div
                a

9

Phương thức ReplaceChild

Sử dụng phương pháp

let first_box = document.querySelector("div.box");

9 để thay thế một nút bằng nút mới

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

0

Phương thức nhận hai tham số, tham số đầu là phần tử mới, tham số 2 là phần tử cũ cần thay thế

4. Bộ sưu tập HTML và NodeList

Bộ sưu tập HTML và NodeList

Như đã nói ở trên, một số phương thức dùng để tìm nhiều phần tử như

let boxes = document.querySelectorAll("div.box");

0,

let boxes = document.querySelectorAll("div.box");

1,

let boxes = document.querySelectorAll("div.box");

2 trả về các cấu trúc giống mảng, nhưng không phải mảng, là HTMLcollection và NodeList

Các cụ thể như sau

let boxes = document.querySelectorAll("div.box");

0 return HTMLcollection

let boxes = document.querySelectorAll("div.box");

1,

let boxes = document.querySelectorAll("div.box");

2 return NodeList

Thuộc tính
```
let boxes = document.querySelectorAll("div.box");
```
6 của bất kỳ nút nào cũng là một NodeList

So sánh với mảng

Mặc dù HTMLcollection và NodeList có thể truy cập qua mảng tương tự chỉ mục, có thuộc tính

let boxes = document.querySelectorAll("div.box");

7 để lấy độ dài, nhưng thực tế chúng không phải là mảng

Chúng không có các phương thức của mảng như

let boxes = document.querySelectorAll("div.box");

8,

let boxes = document.querySelectorAll("div.box");

9,

Document
    html - Root element
        head
        body
            p
            div
                a

00,

Bộ sưu tập HTML so với NodeList

HTMLcollection chỉ chứa các nút phần tử, trong khi NodeList chứa mọi loại nút

HTMLcollection có thể truy cập bằng tên, id hoặc chỉ mục, trong khi NodeList chỉ truy cập được thông qua chỉ mục

Trên đây là hai sự khác biệt giữa HTMLcollection và NodeList

Được xây dựng trong bộ sưu tập HTML

Có một số HTMLcollection được xây dựng sẵn như sau

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

1

Ví dụ lấy HTMLcollection

Document
    html - Root element
        head
        body
            p
            div
                a

01. Bởi vì HTMLcollection có thể truy cập thông qua cả tên và chỉ mục, do đó chúng tôi có thể lấy ra một hình thức bất kỳ trên trang web

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

2

D. sự kiện DOM

1. Tổng quan

We are doing quen thuộc với sự kiện trong các chương trình trước. Về cơ bản sự kiện là một sự kiện xảy ra tại thời điểm xác định nhất, hoặc đáp ứng một số điều kiện nào đó, và có thể được gán mã cho nó. Khi sự kiện xảy ra (cháy - bắn ra), thì mã được gắn với sự kiện sẽ được thực thi

Trong sự kiện HTML là một thuộc tính của phần tử, có giá trị là mã JS để thực thi khi sự kiện xảy ra

Thay vì gắn trực tiếp sự kiện trong tài liệu HTML khi viết mã, thì chúng ta có thể gắn hoặc điều chỉnh sự kiện ngay trong thời gian chạy thông qua DOM

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

3

Ví dụ về định nghĩa hàm

Document
    html - Root element
        head
        body
            p
            div
                a

02, và sử dụng DOM để gắn nó cho sự kiện onclick của phần tử (có id là closeButton). Khi click vào phần tử này, sự kiện onclick được bắn ra, và hàm

Document
    html - Root element
        head
        body
            p
            div
                a

02 được thực thi

2. người nghe sự kiện

Trình lắng nghe sự kiện có tác dụng lắng nghe sự kiện cụ thể của một phần tử bất kỳ đó, và khi sự kiện đó xảy ra thì nó sẽ gọi một phương thức đã định sẵn. Phương thức được gắn vào trình xử lý sự kiện được gọi là trình xử lý sự kiện

Trình nghe sự kiện có thể lắng nghe các sự kiện từ mọi đối tượng DOM, không chỉ có các phần tử trực quan trên trang web

Lợi ích của người nghe sự kiện

Dễ dàng thêm và xóa. Xử lý sự kiện thông thường bạn phải thay đổi mã HTML để thực hiện điều này, nhưng với trình xử lý sự kiện, có thể thực hiện được cả trong thời gian chạy (runtime)
Can could have many event handler. Sự kiện thường chỉ có một trình xử lý sự kiện, nhưng với trình xử lý sự kiện, có thể thêm nhiều trình xử lý sự kiện cho một sự kiện
Tách mã JS ra khỏi HTML. Tổ chức mã nguồn tốt hơn và không phụ thuộc vào tài liệu HTML vốn cố định và không thay đổi

Thêm người nghe sự kiện

Để thêm một trình lắng nghe sự kiện cho một cụ thể sự kiện của phần tử được chọn, hãy gọi phương thức

Document
    html - Root element
        head
        body
            p
            div
                a

04 cho sự kiện đó. Có thể thêm cùng lúc nhiều trình xử lý sự kiện hoặc nhiều loại sự kiện cho cùng một phần tử

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

4

Phương thức nhận hai đối số bắt buộc

thông số 1. chuỗi tên sự kiện, tương ứng với các sự kiện trong HTML nhưng không có từ "on" ở đầu
tham số 2. hàm sẽ chạy khi sự kiện xảy ra

Ngoài ra còn có tùy chọn tham số 3 là một boolean

Document
    html - Root element
        head
        body
            p
            div
                a

05 (default false). Nếu tham số này là đúng, thì sự kiện sẽ sử dụng chụp, ngược lại là sủi bọt

sủi bọt. đi từ phần tử được chọn tới các tổ tiên. Ví dụ click vào nút thì onclick của nút được thực hiện đầu tiên, sau đó đến onclick của nút gốc và đi lên nữa
Chụp. quay ngược lại với bong bóng, đi từ phần tử tổ tiên trước rồi mới tới phần tử hiện tại ở cuối cùng

Ý niệm trên call là sự lan truyền sự kiện

Xóa trình nghe sự kiện

Use delete event listener for element

// Bad, select 2 times
document.getElementById('title').innerHTML = 'Page title';
document.getElementById('title').style.color = 'red';

// Good, select 1 time
let e = document.getElementById('title');
e.innerHTML = 'Page title';
e.style.color = 'red';

5

Chú ý tên sự kiện và tên hàm được gọi phải giống với khi thêm và chỉ xóa được đối với hàm gọi hàm xử lý sự kiện (hàm ẩn danh sẽ không hoạt động)

Hỗ trợ IE8

Phiên bản trình duyệt IE 8 không hỗ trợ hai phương pháp trên, nên phải thay thế bằng

Document
    html - Root element
        head
        body
            p
            div
                a

06 và

Document
    html - Root element
        head
        body
            p
            div
                a

07

Có thể dùng mã sau để kiểm tra, nếu có phương thức

Document
    html - Root element
        head
        body
            p
            div
                a

04 thì dùng, nếu không có thì dùng

Document
    html - Root element
        head
        body
            p
            div
                a

06 thay thế

programming html

Htmlcollection vào nodelist

A. Giới thiệu DOM

1. Giới thiệu

B. phần tử DOM

1. Tìm phần tử

2. yếu tố truy cập

3. đi ngang qua

C. nút DOM

1. Giao diện nút

2. Tạo phần tử

3. Loại bỏ, thay thế phần tử

4. Bộ sưu tập HTML và NodeList

D. sự kiện DOM

1. Tổng quan

2. người nghe sự kiện

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội