Giá trị chuỗi phải khớp với giá trị của thuộc tính ID được chỉ định trong Đánh dấu HTML
Trong trường hợp này. hộp
Sau khi khớp, nó sẽ trả về đối tượng HTMLDivElement
const box = document.getElementById["box"];
Gán nó vào một hộp được gọi là hằng số
Nếu không khớp, phương thức getElementById[] sẽ trả về null
Phương thức getElementByID[] sẽ chỉ khả dụng trong đối tượng tài liệu chung
Bởi vì, giá trị của thuộc tính ID phải là duy nhất cho toàn bộ trang HTML
Nhận phần tử theo Id bằng cách sử dụng querySelector[]
Ngoài ra, phương thức querySelector[] cũng lấy một phần tử theo id trong JavaScript
Gọi phương thức querySelector[] trên đối tượng tài liệu
Phương thức querySelector[] cũng nhận một đối số là chuỗi
const box = document.querySelector["#box"];
Giá trị chuỗi phải khớp với giá trị của thuộc tính ID được chỉ định trong Đánh dấu HTML cùng với ký hiệu Bộ chọn CSS
Ví dụ. # đăng ký ID
Vì vậy, giá trị chuỗi sẽ là #box
Nhận phần tử theo ID InnerHTML
Nhận phần tử con theo ID
Bạn cũng có thể lấy phần tử con theo id bằng cách sử dụng. tài sản trẻ em
Div có phần tử hộp Id có phần tử div con có id
Nhận tham chiếu DOM đến phần tử hộp div là phần tử gốc
Gán nó vào một hộp cố định
Các. thuộc tính con lấy tất cả các phần tử bên trong phần tử hộp div
Phần tử chúng tôi muốn lấy là div với id box-inner
Gọi phương thức item[] trên hộp. những đứa trẻ
Truyền giá trị thuộc tính ID của phần tử con
Trong trường hợp này. hộp bên trong
const box = document.getElementById["box"];
const boxInner = box.children.item["box-inner"];
Nhận phần tử theo ID InnerHTML
Tìm hiểu cách đặt/lấy văn bản hoặc Phần tử HTML bằng thuộc tính có tên là innerHTML
const box = document.getElementById["box"];
box.innerHTML = "Box";
Bạn cũng có thể thêm các Phần tử HTML bằng cách sử dụng InternalHTML
const box = document.getElementById["box"];
box.innerHTML = "Box
";
Nhận phần tử theo giá trị ID
Tìm hiểu cách lấy giá trị của bất kỳ thành phần biểu mẫu HTML nào bằng phương thức getElementById[]
Để làm điều đó, hãy gọi phương thức getElementById[] trên đối tượng tài liệu truyền giá trị của thuộc tính ID làm đối số
Để chạy chương trình trên, lưu tên file là anyName. html[chỉ mục. html] và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong trình chỉnh sửa Mã VS
Sau đây là đầu ra. Khi bạn nhấp chuột và đặt phím mũi tên, bạn sẽ nhận được đầu ra sau
Thuộc tính điều hướng DOM tuyệt vời khi các phần tử gần nhau. Nếu họ không thì sao?
Có các phương pháp tìm kiếm bổ sung cho điều đó
Nếu một phần tử có thuộc tính
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3, chúng ta có thể lấy phần tử đó bằng cách sử dụng phương thức
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
4, bất kể nó ở đâuVí dụ
Element
// get the element
let elem = document.getElementById['elem'];
// make its background red
elem.style.background = 'red';
Ngoài ra, có một biến toàn cục được đặt tên bởi
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 tham chiếu đến phần tử
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
…Đó là trừ khi chúng ta khai báo một biến JavaScript có cùng tên, thì nó sẽ được ưu tiên
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
Vui lòng không sử dụng các biến toàn cục có tên id để truy cập các phần tử
Hành vi này được mô tả, nhưng nó được hỗ trợ chủ yếu để tương thích
Trình duyệt cố gắng giúp chúng tôi bằng cách trộn các không gian tên của JS và DOM. Điều đó tốt cho các tập lệnh đơn giản, được đưa vào HTML, nhưng nhìn chung không phải là điều tốt. Có thể có xung đột đặt tên. Ngoài ra, khi một người đọc mã JS và không có HTML trong chế độ xem, thì không rõ biến đó đến từ đâu
Ở đây trong hướng dẫn này, chúng tôi sử dụng
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 để tham chiếu trực tiếp một phần tử cho ngắn gọn, khi rõ ràng phần tử đó đến từ đâuTrong cuộc sống thực
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
7 là phương pháp ưa thích
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 phải là duy nhất
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 phải là duy nhất. Chỉ có thể có một phần tử trong tài liệu với
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 đã choNếu có nhiều phần tử có cùng
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3, thì hành vi của các phương thức sử dụng nó là không thể đoán trước, e. g.
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
7 có thể trả lại bất kỳ yếu tố nào như vậy một cách ngẫu nhiên. Vì vậy, hãy tuân thủ quy tắc và giữ cho
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 là duy nhấtChỉ
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
7, không phải
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
5Phương thức
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
6 chỉ có thể được gọi trên đối tượng
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
7. Nó tìm kiếm
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3 đã cho trong toàn bộ tài liệuCho đến nay, phương pháp linh hoạt nhất,
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
9 trả về tất cả các phần tử bên trong
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
0 khớp với bộ chọn CSS đã choỞ đây chúng tôi tìm kiếm tất cả các phần tử
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
1 là phần tử con cuối cùng
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
Phương pháp này thực sự mạnh mẽ, bởi vì bất kỳ bộ chọn CSS nào cũng có thể được sử dụng
Cũng có thể sử dụng các lớp giả
Các lớp giả trong bộ chọn CSS như
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
2 và
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
3 cũng được hỗ trợ. Chẳng hạn,
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
4 sẽ trả về tập hợp có các phần tử mà con trỏ hiện đã kết thúc [theo thứ tự lồng nhau. từ
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
5 ngoài cùng đến cái lồng vào nhau nhất]Lệnh gọi tới
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
6 trả về phần tử đầu tiên cho bộ chọn CSS đã choNói cách khác, kết quả giống như
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
7, nhưng cái sau đang tìm kiếm tất cả các phần tử và chọn một phần tử, trong khi
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
8 chỉ tìm kiếm một phần tử. Vì vậy, nó nhanh hơn và cũng ngắn hơn để viếtCác phương pháp trước đó là tìm kiếm DOM
Nó không tìm kiếm bất cứ thứ gì, nó chỉ kiểm tra xem
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
0 có khớp với bộ chọn CSS đã cho hay không. Nó trả về ...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
0 hoặc ...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
1Phương thức này rất hữu ích khi chúng ta đang lặp lại các phần tử [như trong một mảng hoặc thứ gì đó] và cố gắng lọc ra những phần tử mà chúng ta quan tâm
Ví dụ
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
Tổ tiên của một phần tử là. cha mẹ, cha mẹ của cha mẹ, cha mẹ của nó, v.v. Tổ tiên cùng nhau tạo thành chuỗi cha mẹ từ phần tử đến đỉnh
Phương thức
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
2 tìm tổ tiên gần nhất khớp với bộ chọn CSS. Bản thân
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
0 cũng được đưa vào tìm kiếmNói cách khác, phương thức
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
4 đi lên từ phần tử và kiểm tra từng phần tử cha. Nếu nó khớp với bộ chọn, thì quá trình tìm kiếm sẽ dừng lại và tổ tiên được trả vềVí dụ
Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
Ngoài ra còn có các phương pháp khác để tìm kiếm các nút theo thẻ, lớp, v.v.
Ngày nay, chúng chủ yếu là lịch sử, vì
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
5 mạnh mẽ hơn và viết ngắn hơnVì vậy, ở đây chúng tôi trình bày chúng chủ yếu để hoàn thiện, trong khi bạn vẫn có thể tìm thấy chúng trong các tập lệnh cũ
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
6 tìm kiếm các phần tử với thẻ đã cho và trả về bộ sưu tập của chúng. Tham số ...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
7 cũng có thể là dấu sao ...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
8 cho “bất kỳ thẻ nào”...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
9 trả về các phần tử có lớp CSS đã choContents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
0 trả về các phần tử có thuộc tính Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
1 đã cho, trên toàn bộ tài liệu. Rất hiếm khi được sử dụng
Ví dụ
// get all divs in the document
let divs = document.getElementsByTagName['div'];
Hãy tìm tất cả các thẻ
Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
2 bên trong bảng
Your age:
less than 18
from 18 to 50
more than 60
let inputs = table.getElementsByTagName['input'];
for [let input of inputs] {
alert[ input.value + ': ' + input.checked ];
}
Đừng quên lá thư Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
3
Các nhà phát triển mới làm quen đôi khi quên chữ cái
Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
3. Đó là, họ cố gắng gọi Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
5 thay vì Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
6Chữ cái
Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
3 không có trong
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
6, vì nó trả về một phần tử duy nhất. Nhưng Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
9 trả về một tập hợp các phần tử, vì vậy có Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
3 bên trongNó trả về một bộ sưu tập, không phải một phần tử
Một sai lầm phổ biến khác của người mới là viết
// doesn't work
document.getElementsByTagName['input'].value = 5;
Điều đó sẽ không hiệu quả, bởi vì nó lấy một tập hợp các đầu vào và gán giá trị cho nó thay vì cho các phần tử bên trong nó
Chúng ta nên lặp lại bộ sưu tập hoặc lấy một phần tử theo chỉ mục của nó, sau đó gán, như thế này
// should work [if there's an input]
document.getElementsByTagName['input'][0].value = 5;
Tìm kiếm các yếu tố
// get all divs in the document
let divs = document.getElementsByTagName['div'];
1
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
0Tất cả các phương pháp
// get all divs in the document
let divs = document.getElementsByTagName['div'];
2 trả về một bộ sưu tập trực tiếp. Các bộ sưu tập như vậy luôn phản ánh trạng thái hiện tại của tài liệu và “tự động cập nhật” khi nó thay đổiTrong ví dụ bên dưới, có hai tập lệnh
- Cái đầu tiên tạo một tham chiếu đến bộ sưu tập của
// get all divs in the document
let divs = document.getElementsByTagName['div'];
3. Hiện tại, chiều dài của nó là // get all divs in the document
let divs = document.getElementsByTagName['div'];
4 - Các tập lệnh thứ hai chạy sau khi trình duyệt gặp thêm một
// get all divs in the document
let divs = document.getElementsByTagName['div'];
3, vì vậy độ dài của nó là // get all divs in the document
let divs = document.getElementsByTagName['div'];
6
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
1Ngược lại,
// get all divs in the document
let divs = document.getElementsByTagName['div'];
7 trả về một bộ sưu tập tĩnh. Nó giống như một mảng các phần tử cố địnhNếu chúng ta sử dụng nó thay thế, thì cả hai tập lệnh đều xuất ra
// get all divs in the document
let divs = document.getElementsByTagName['div'];
4
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
2Bây giờ chúng ta có thể dễ dàng nhận thấy sự khác biệt. Bộ sưu tập tĩnh không tăng sau khi xuất hiện một
// get all divs in the document
let divs = document.getElementsByTagName['div'];
9 mới trong tài liệuCó 6 phương pháp chính để tìm kiếm các nút trong DOM
Phương thứcTìm kiếm theo. Có thể gọi một phần tử không?Live?...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
5CSS-selector✔-// get all divs in the document
let divs = document.getElementsByTagName['div'];
7CSS-selector✔-
let elem = 5; // now elem is 5, not a reference to
alert[elem]; // 5
6
Element
// elem is a reference to DOM-element with id="elem"
elem.style.background = 'red';
// id="elem-content" has a hyphen inside, so it can't be a variable name
// ...but we can access it using square brackets: window['elem-content']
3--
Your age:
less than 18
from 18 to 50
more than 60
let inputs = table.getElementsByTagName['input'];
for [let input of inputs] {
alert[ input.value + ': ' + input.checked ];
}
4Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
1-✔Contents
- Chapter 1
- Chapter 2
let chapter = document.querySelector['.chapter']; // LI
alert[chapter.closest['.book']]; // UL
alert[chapter.closest['.contents']]; // DIV
alert[chapter.closest['h1']]; // null [because h1 is not an ancestor]
9tag hoặc
Your age:
less than 18
from 18 to 50
more than 60
let inputs = table.getElementsByTagName['input'];
for [let input of inputs] {
alert[ input.value + ': ' + input.checked ];
}
7✔✔
Your age:
less than 18
from 18 to 50
more than 60
let inputs = table.getElementsByTagName['input'];
for [let input of inputs] {
alert[ input.value + ': ' + input.checked ];
}
8class✔✔Cho đến nay, những thứ được sử dụng nhiều nhất là
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
5 và // get all divs in the document
let divs = document.getElementsByTagName['div'];
7, nhưng // doesn't work
document.getElementsByTagName['input'].value = 5;
1 có thể hữu ích một cách rời rạc hoặc được tìm thấy trong các chữ viết cũbên cạnh đó
- Có
// doesn't work
document.getElementsByTagName['input'].value = 5;
2 để kiểm tra xem
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
0 có khớp với bộ chọn CSS đã cho hay không - Có
...
...
// can be any collection instead of document.body.children
for [let elem of document.body.children] {
if [elem.matches['a[href$="zip"]']] {
alert["The archive reference: " + elem.href ];
}
}
2 để tìm tổ tiên gần nhất khớp với bộ chọn CSS đã cho. Bản thân
- The
- test
- has
- passed
let elements = document.querySelectorAll['ul > li:last-child'];
for [let elem of elements] {
alert[elem.innerHTML]; // "test", "passed"
}
0 cũng được kiểm tra
Và hãy đề cập đến một phương pháp khác ở đây để kiểm tra mối quan hệ cha-con, vì nó đôi khi hữu ích
Làm cách nào để có được div trong JavaScript?
Có thể truy cập phần tử getElementById[] .
Làm cách nào để gọi một div trong JavaScript?
Sử dụng tài liệu.
bật querySelector để chọn một div và sau đó chọn một phần tử bên trong nó với lớp đã cho . Chúng tôi chỉ gọi querySelector trên phần tử có ID mydiv để chọn các mục bên trong div đó. Do đó, innerDiv là div với lớp myclass.
Làm cách nào để truy cập nội dung div trong JavaScript?
Sử dụng thuộc tính textContent để lấy văn bản của phần tử div , e. g. kết quả const = phần tử. văn bảnnội dung. Thuộc tính textContent sẽ trả về nội dung văn bản của div và hậu duệ của nó. Nếu phần tử trống, một chuỗi rỗng được trả về.
Làm cách nào để chọn một div cụ thể trong JavaScript?
getElementsByTagName[] sẽ chọn tất cả các phiên bản của một phần tử HTML nhất định trên trang web hiện tại dựa trên tên thẻ của nó, i. e. . getElementsByTagName["div"] là tất cả những gì bạn cần làm để chọn tất cả các phần tử
Chủ Đề