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 nhau nhanh chóng làm quen với JS
Nội dung chính Hiển thị
- A. DOM description
- 1. Giới thiệu
- B. DOM phần tử
- 1. Element section
- 2. access element
- 3. ngang qua
- C. nút DOM
- 1. Node giao diện
- 2. Create element
- 3. Loại bỏ, thay thế phần tử
- 4. HTML file và NodeList
- D. DOM event
- 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. DOM description
1. Giới thiệu
DOM [Mô hình tài liệu đối tượng] là một tài liệu thực tế có thể được tạo ra bởi trình duyệt khi tải xuống 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à DOM cây. Cấu hình 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
This is a simple paragraph
A link
Trang HTML khi được tải xuống, thì một đối tượng DOM tương ứng được tạo 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à
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ử
- Thay đổi kiểu CSS cho phần tử
- 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, từ đó thực hiện các hành vi trên trang web
B. DOM phần tử
1. Element section
Để 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,. trên phần tử chọn
Để 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';
Đối tượng tài liệu cung cấp nhiều phương thức để thực hiện việc "lựa chọn" các phần tử
- Tìm id, lớp hoặc thẻ
- Tìm với bộ chọn chuỗi CSS
- 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 sử dụng để chọn phần tử có thể chọn một hoặc nhiều phần tử. Chú ý các 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
Tìm ID, lớp, tên thẻ
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 kiế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
Tìm kiếm chuỗi bộ chọn CSS
let first_box = document.querySelector["div.box"];
Trả về phần tử đầu tiên được tìm thấy, là một Nút đối tượng khớp với chuỗi bộ chọn. Nếu không tìm thấy phương thức được trả về null
________số 8Trả 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 phương thức ném lỗi SYNTAX_ERR nếu bộ chọn chuỗi 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 tập tin được xây dựng sẵn [tích hợp sẵn], bao gồm 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, cả hai đều được sử dụng cho mảng anar. Phần này sẽ được nói rõ hơn trong phần sau
2. access element
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ó
content section
Để 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 mã thẻ] và có thể gán giá trị mớiDocument
html - Root element
head
body
p
div
a
0Có 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 thông hiểu là thông tin bổ sung bổ sung 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ê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à______39, 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
0phong cách CSS
DOM type are for a property property, has name is the type. 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
1Thuộ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 ký tự tốc độ được viết ở dạng chuỗi tương tự trong CSS như trên
3. 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ẽ 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 của 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
2Thuộc tính này trả về tham chiếu tới nút đối tượng khác có liên quan
C. nút DOM
1. Node giao diện
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 phát triển 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ú [không nhận xét]. Ngoài ra còn có nhiều loại khác như thực tế, ký hiệu, loại tài liệu,. nhưng chúng ta không cần quan tâm quá nhiều
node thành viên
Document
html - Root element
head
body
p
div
a
3Thuộc tính
let first_box = document.querySelector["div.box"];
0 return a number, could show the type node. 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], nútMộ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
4Thì sẽ bao gồm 3 nút cơ bản
Document
html - Root element
head
body
p
div
a
5Mỗi nút sẽ có một thuộc tính là
let first_box = document.querySelector["div.box"];
1, contains the value of nodenút gốc
Các đối tượng tài liệu 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à_______74. 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 web2. Create element
Để 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 nút con 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. Bạn phải thêm nó vào một phần tử bất kỳ bằng hai phương pháp sau
Document
html - Root element
head
body
p
div
a
7Ngoà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 of it is doneTuy 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
Use method
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
8Phươ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 could not active. 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áplet first_box = document.querySelector["div.box"];
8Document
html - Root element
head
body
p
div
a
9Phương thức ReplaceChild
Use method
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';
0Phươ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. HTML file và NodeList
HTML file và NodeList
Như đã nói ở trên, một số phương thức được sử dụng để tìm nhiều phần tử như
let boxes = document.getElementsByClassName["box"];
let links = document.getElementsByTagName["a"];
60,let boxes = document.getElementsByClassName["box"];
let links = document.getElementsByTagName["a"];
61,let boxes = document.getElementsByClassName["box"];
let links = document.getElementsByTagName["a"];
62 trả về các cấu trúc giống mảng, nhưng không phải mảng, là HTMLcollection và NodeListThe tools can like after
60 trả về bộ sưu tập HTMLlet boxes = document.getElementsByClassName["box"]; let links = document.getElementsByTagName["a"];
61,let boxes = document.getElementsByClassName["box"]; let links = document.getElementsByTagName["a"];
62 trả lại NodeListlet boxes = document.getElementsByClassName["box"]; let links = document.getElementsByTagName["a"];
- Thuộc tính
66 của bất kỳ nút nào cũng là một NodeListlet boxes = document.getElementsByClassName["box"]; let links = document.getElementsByTagName["a"];
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.getElementsByClassName["box"];
let links = document.getElementsByTagName["a"];
67 để lấy độ dài, nhưng thực tế chúng không phải là mảngChúng không có các phương thức của mảng như
________ 368,________ 369,________ 100,HTML file set with 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
Rebuildable HTML HTML 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';
1Ví 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 tin 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_______22D. DOM event
1. tổng quan
We are doing quen thuộc với các 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 trả lời 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';
3Ví 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ó vào sự kiện title của phần tử [có id là closeButton]. Khi click vào phần tử này, sự kiện title được bắn ra, và hàmDocument
html - Root element
head
body
p
div
a
02 được thực thi2. người nghe sự kiện
Trình lắng nghe sự kiện có tác dụng ứng dụng công cụ lắng nghe sự kiện 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 đã đượ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]
- Có thể có nhiều trình xử lý sự kiện. Sự kiện thông 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ể bổ sung 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 sự kiện cụ thể 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 for that event. 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';
4Phương thức nhận hai đối số bắt buộc
- number 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. function will run when doing the event
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 [mặc định sai]. Nếu tham số này là đúng, thì sự kiện sẽ sử dụng ảnh chụp, quay ngược lại là bọt- sủi bọt. đi từ phần tử được chọn đến các tổ hợp đầu tiên. Ví dụ nhấp vào nút thì title của nút được thực hiện đầu tiên, sau đó đến title 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 đến phần tử hiện tại ở cuối cùng
Ý niệm trên gọi là sự kiện lan truyền
Delete the event event
Sử dụng trình xử lý sự kiện xóa cho 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';
5Chú ý tên sự kiện và tên hàm được gọi phải giống với khi thêm và chỉ bị xóa đối với hàm gọi hàm xử lý sự kiện [hàm ẩn danh sẽ không hoạt động]