Làm cách nào bạn có thể truy cập các phần tử HTML bằng JavaScript?

Làm cách nào bạn có thể truy cập các phần tử HTML bằng JavaScript?

Hãy coi đối tượng tài liệu là tài liệu HTML của bạn. Để lấy các phần tử HTML khác nhau, bạn có thể gọi một số phương thức tích hợp sẵn của đối tượng tài liệu với mục đích thực hiện truy xuất

Tất cả các phần tử HTML được lưu trữ trong tài liệu, vì vậy mỗi khi chúng tôi lấy một phần tử HTML từ DOM, chúng tôi bắt đầu bằng

greeting.innerHTML = "Hello THT!"

4 theo sau là phương thức

Trong bài đăng này, chúng tôi sẽ giới thiệu các phương pháp khác nhau mà bạn có thể sử dụng để lấy các phần tử HTML từ DOM. Đầu tiên, chúng ta xem qua cú pháp JavaScript trước ES6 trước khi chuyển sang các phương thức ES6 mới hơn. Chúng tôi kết thúc với một dự án gọn gàng áp dụng tất cả những gì chúng tôi học được vào thực tế

nội dung

ES6 là phiên bản cập nhật của cú pháp JavaScript được xây dựng trên JavaScript tiêu chuẩn. Cả JavaScript tiêu chuẩn và ES6 đều được hỗ trợ nên bạn có thể sử dụng bất cứ thứ gì bạn muốn

Tìm hiểu thêm về ES6 JavaScript tại đây

Phương thức JavaScript tiêu chuẩn

Các phương thức JavaScript tiêu chuẩn để tìm nạp các phần tử từ DOM bao gồm getElementById(), getElementsByTagName() và getElementsByClassName()

1) Nhận một phần tử theo id của nó

getElementById(". ")

Chúng tôi sử dụng thuộc tính id HTML để chỉ các phần tử cụ thể. Vì một id là duy nhất - nó không nên xuất hiện cho nhiều hơn một phần tử - việc chọn một phần tử HTML với một id cụ thể sẽ đảm bảo trỏ đến phần tử đó

Đọc. Cách sử dụng các lớp và ID để chọn các phần tử trong CSS

Ví dụ. Lấy thẻ

greeting.innerHTML = "Hello THT!"

5 theo id của nó và thay đổi nội dung của nó thành thứ khác bằng JavaScript

Gợi ý. Để thay đổi nội dung bên trong, hãy đặt giá trị mới cho thuộc tính InternalHTML

Hello World!

Phân tích JavaScript nhanh

• tài liệu

Chỉ vào DOM, yêu cầu trình duyệt tìm trong tài liệu HTML của chúng tôi

• (chấm/dấu chấm/dấu chấm sau

  greeting.innerHTML = "Hello THT!"

  4)

Yêu cầu trình duyệt đi vào đối tượng tài liệu

• getElementById("văn bản")

Lấy phần tử có id là "văn bản" từ tài liệu

• internalHTML = "Xin chào THT. "

Chỉ định cách chúng tôi muốn thay đổi phần tử đã chọn - trong trường hợp này là thay đổi nội dung của nó

Trong ví dụ trên, chúng tôi đã yêu cầu trình duyệt vào trong tài liệu này, lấy phần tử có id là văn bản và thay đổi nội dung của phần tử đó

---

Ghi chú. chính tả

Bắt đầu bằng chữ thường và mỗi từ sau đó được chỉ định bằng chữ cái đầu tiên viết hoa. Điều này còn được gọi là vỏ lạc đà. JavaScript phân biệt chữ hoa chữ thường nên việc viết đúng chính tả là rất quan trọng để tránh lỗi

---

>> Mẹo <<

Giả sử chúng ta muốn làm những việc khác với thẻ

greeting.innerHTML = "Hello THT!"

5 ở trên. Thay vì lấy phần tử từ DOM mỗi lần, chúng ta có thể lấy nó một lần và lưu trữ nó trong một biến để sử dụng nhiều lần

Tạo một biến (bạn có thể gọi nó là bất cứ thứ gì bạn muốn) và đặt nó bằng phần tử p đã truy xuất

const greeting = document.getElementById("text");

Bây giờ thay đổi nội dung của nó như vậy

greeting.innerHTML = "Hello THT!"

2) Lấy một phần tử HTML theo lớp của nó

tài liệu. getElementsByClassName(". ")

Lưu ý "Elements" ở dạng số nhiều không giống như getElementById ở dạng số ít

Lấy các phần tử theo tên lớp trả về danh sách tất cả các phần tử trong tài liệu với lớp đã chỉ định. Vì lớp không phải là mã định danh duy nhất như id - có thể có nhiều hơn một phần tử trong cùng một lớp - phản hồi trả về là một danh sách

Điều quan trọng là phải hiểu điều này bởi vì làm bất cứ điều gì với các phần tử được truy xuất theo cách này yêu cầu phải lặp qua danh sách để (1) kéo phần tử mà chúng ta muốn tác động hoặc (2) tác động đến tất cả các phần tử

Thách đấu. Lấy các phần tử có lớp "demo" và chuyển nội dung của phần tử đầu tiên thành chữ hoa để nó có nội dung "TÔI LÀ PHẦN MỀM ĐẦU TIÊN CÓ LỚP DEMO"

I'm the FIRST element with a class of demo.
I'm the SECOND element with a class of demo.
I'm the THIRD element with a class of demo.
I'm the FOURTH element with a class of demo.

Các bước để làm theo

1. Lưu trữ danh sách được truy xuất bằng getElementsByClassName() trong một biến
2. Lấy mục đầu tiên trong danh sách đó (gợi ý. nó có chỉ số bằng 0)
3. Lấy nội dung của mục đầu tiên và biến nó thành chữ hoa bằng cách sử dụng phương thức JavaScript tích hợp toUpperCase()

________số 8

Mẹo. Lưu trữ

greeting.innerHTML = "Hello THT!"

8 trong một biến để sử dụng lại dễ dàng hơn

3) Nhận một phần tử HTML bằng thẻ của nó

getElementsByTagName(". ")

Giống như getElementsByClassName() trả về danh sách tất cả các phần tử của một lớp cụ thể, getElementsByTagName() trả về danh sách tất cả các phần tử của một thẻ cụ thể

Khi chúng ta nói "thẻ", chúng ta đang nói về các thẻ HTML như p, div, li, ul, v.v.

Trong ví dụ trước, chúng ta có thể dễ dàng lấy các thẻ p theo tên thẻ của chúng thay vì tìm kiếm bằng tên lớp

greeting.innerHTML = "Hello THT!"

0

Tóm lược

• getElementById(". ") trả về một mục duy nhất
• getElementsByClassName(". ") và getElementsByTagName(". ") mỗi cái trả về một danh sách

Phương thức JavaScript ES6

Cú pháp mới hơn cho phép chúng ta lấy một phần tử hoặc tất cả các phiên bản của một phần tử bằng hai phương thức tương đối linh hoạt

Cả hai phương pháp đều sử dụng bộ chọn CSS để xác định (các) phần tử cần lấy. Điều này có nghĩa là khi chọn một phần tử theo id của nó, bạn sẽ tìm kiếm "#myID" vì đó là cách bạn tham chiếu phần tử đó trong CSS. Tương tự như vậy, nếu tìm kiếm theo lớp, nó sẽ là ". myClass", hoặc theo thẻ, "p"

1) Chọn một phần tử

truy vấnSelector(". ")

Điều này sẽ trả về một phần tử duy nhất - nếu nhiều phần tử xuất hiện trong tài liệu, nó sẽ chỉ trả về phần tử đầu tiên

Trong ví dụ trên, chúng ta có thể lấy phần tử p đầu tiên theo tên thẻ hoặc tên lớp bằng một phương thức duy nhất

Thách đấu. Chuyển đoạn đầu tiên thành chữ hoa và tô màu nền cho đoạn đó bằng cách chọn

greeting.innerHTML = "Hello THT!"

5 đầu tiên theo hai cách khác nhau

1. Lấy nội dung theo tên thẻ bằng cách sử dụng querySelector() và biến chúng thành chữ hoa
2. Lấy nội dung theo tên lớp sử dụng querySelector() và đặt màu nền là vàng

greeting.innerHTML = "Hello THT!"

2

Có sự dư thừa trong ví dụ khi chúng ta chọn cùng một phần tử theo những cách khác nhau, nhưng điều đó dẫn đến điểm chính, phải không?

2) Chọn tất cả các phiên bản của một phần tử

truy vấnSelectorAll(". ")

Việc thêm "Tất cả" vào phương thức trước đó sẽ cho phép bạn truy cập vào một phương thức khác trả về danh sách tất cả các lần xuất hiện của phần tử

Tương tự như querySelector(), querySelectorAll() tìm kiếm các phần tử bằng bộ chọn CSS. Một lần nữa, điều này có nghĩa là để tham chiếu một lớp, bạn sẽ cần dấu chấm hết ở phía trước (. lớp học của tôi);

Làm quen với các bộ chọn CSS bằng cách đọc Các bộ chọn CSS phổ biến cần biết và cách sử dụng chúng

Thử thách mã hóa. Nhấn vào nút

Thử nghiệm những gì bạn đã học được về các phương pháp lựa chọn JavaScript

Mục tiêu. Để tạo một cửa sổ có ba nút. Mỗi nút đi kèm với một số đại diện cho thứ tự mà người dùng sẽ nhấp vào nó

• nút đầu tiên. thay đổi màu nền của cửa sổ
• nút thứ hai. thay đổi văn bản của cửa sổ
• nút thứ ba. nhắc nhập tên người dùng và thêm nó vào văn bản

Khi người dùng nhấp vào một nút, nút đó sẽ biến mất. Cuối cùng, bạn có một cửa sổ hoàn toàn mới với một nút đặt lại duy nhất, khi được nhấp vào, sẽ trả về màn hình ban đầu

Xem Pen Click the Button (Code Challenge) của Klea Merkuri (@thehelpfultipper) trên CodePen

Hãy tự mình thử hoặc làm theo vì chúng tôi sẽ hướng dẫn bạn từng bước

1) Thêm các thành phần HTML

Bắt đầu bằng cách tạo kiểu cho phần thân, tạo màu nền, sau đó thêm văn bản và ba nút

greeting.innerHTML = "Hello THT!"

3____14

2) Căn giữa các phần tử

Để hiển thị mọi thứ ở giữa màn hình, hãy đặt chiều rộng cho #main và đặt lề của nó thành tự động. Sau đó, căn chỉnh các phần tử bên trong #main ở giữa và tạo kiểu cho văn bản

greeting.innerHTML = "Hello THT!"

5

Đây là những gì bạn nên có cho đến nay

3) Tạo kiểu cho các nút

Đã đến lúc làm cho các nút của chúng tôi ở dạng hoàn hảo nhất và tất cả bắt đầu bằng cách loại bỏ các kiểu nút mặc định

const greeting = document.getElementById("text");

0

Ghi chú. Chúng tôi cung cấp cho nút cuối cùng không có lề để hoàn tác lề phải mà chúng tôi thêm vào tất cả các nút. Có một cách tốt hơn để đặt lề ở đây và đó là sử dụng bộ chọn CSS giả để chọn tất cả các nút trừ nút cuối cùng,. không phải(. loại cuối cùng)

4) Đặt trạng thái di chuột của các nút

Khi người dùng di chuột qua một nút, sẽ có một số dấu hiệu cho thấy đó là phần tử có thể nhấp được. Chúng tôi sẽ làm điều này theo hai cách

1. con trỏ sẽ thay đổi thành một con trỏ
2. màu nền của nút sẽ chuyển thành màu trắng và màu văn bản thành màu đen

Gợi ý. Để đặt trạng thái di chuột, hãy sử dụng bộ chọn giả CSS. bay lượn

const greeting = document.getElementById("text");

1

Và để làm cho màu nền thay đổi khi di chuột ít chói tai hơn, hãy thêm

I'm the FIRST element with a class of demo.
I'm the SECOND element with a class of demo.
I'm the THIRD element with a class of demo.
I'm the FOURTH element with a class of demo.

0 vào phần tử nút

Chúng tôi kết thúc với

Đến thời điểm này, chúng tôi đã đặt màn hình ban đầu chỉ bằng HTML và CSS. Để các nút làm điều gì đó, chúng tôi sẽ giới thiệu JavaScript. Sẳn sàng?

5) Lưu trữ các phần tử từ DOM trong các biến

Lấy các nút, văn bản và nội dung từ tài liệu HTML và đặt chúng trong các biến vì chúng ta sẽ cần trỏ đến chúng khi chúng ta thực hiện các thay đổi bằng JavaScript

Bạn nên sử dụng phương pháp nào để lấy các phần tử? . bạn có thể làm

Đối với các nút

• Lấy cả ba và tham chiếu theo chỉ mục bằng querySelectorAll("button") hoặc getElementsByTagName("button")
• Lấy từng cái một bằng cách sử dụng id tương ứng của chúng như vậy querySelector("#b1") hoặc getElementById("b1")

Đối với thẻ body và thẻ tiêu đề

• Nhận theo tên thẻ - getElementsByTagName("h1") - lưu ý rằng bạn sẽ cần tham chiếu bằng cách sử dụng chỉ mục mặc dù chỉ có một h1 trong danh sách mà phương thức trả về. Ngay cả với một mục, nó vẫn là một danh sách
• Nhận bằng querySelector("h1") - cách tốt nhất ở đây, nếu bạn hỏi ĐÓ (bạn hoàn toàn nên btw)

Chúng tôi sẽ làm điều này cho mã của chúng tôi

const greeting = document.getElementById("text");

2

Cách chúng tôi nhận được các nút là hoàn toàn bổ sung, nhưng nó dành cho mục đích trình diễn - mọi người đều được chào đón

6) Thay đổi màu nền của cơ thể

Khi người dùng nhấp vào nút đầu tiên, có hai điều cần xảy ra

1. màu nền của cơ thể sẽ thay đổi
2. nút đầu tiên sẽ biến mất khỏi chế độ xem

Ở đây, chúng ta sẽ cần thêm một trình lắng nghe sự kiện vào nút đầu tiên đang chờ "nhấp chuột" để thực hiện hai việc đó

const greeting = document.getElementById("text");

3

Nút đang chờ sự kiện cũng là nút cần biến mất, vì vậy để tham chiếu chính nó, chúng tôi sử dụng từ khóa this

Ghi chú. Bạn không thể sử dụng chức năng này trong chức năng mũi tên (tôi. e. () => {. }) do hạn chế

7) Hiển thị văn bản mới

Nhấp vào nút thứ hai sẽ thực hiện các hành động sau

1. thay đổi nội dung h1
2. loại bỏ h3 - chúng tôi không muốn nó nữa
3. nút biến mất khỏi chế độ xem

const greeting = document.getElementById("text");

4

Chúng tôi sử dụng textBtn[1] vì chúng tôi có nút thứ hai bằng cách sử dụng getElementsByTagName(). Và chúng tôi đã thêm

I'm the FIRST element with a class of demo.
I'm the SECOND element with a class of demo.
I'm the THIRD element with a class of demo.
I'm the FOURTH element with a class of demo.

1 xung quanh phần được gạch chân vì phần đó sẽ được điền sau khi người dùng nhấp vào nút cuối cùng

Mẹo. Để tránh xóa các nút khỏi luồng của trang, do đó, mỗi nút không di chuyển về giữa do căn giữa, bạn có thể sử dụng visibility="hidden" thay vì đặt hiển thị là không có

8) Nhắc tên người dùng và hiển thị tên đó

Cuối cùng, chúng tôi muốn hiển thị tên người dùng trong văn bản mới của chúng tôi. Điều này đòi hỏi chúng ta

1. nhắc người dùng nhập tên và lưu trữ nó trong một biến
2. chèn biến có tên trong thẻ span để hiển thị
3. làm cho nút cuối cùng biến mất

Để yêu cầu người dùng nhập tên, chúng tôi sẽ sử dụng phương thức prompt() và lưu trữ đầu vào trong một biến mà chúng tôi đưa vào thẻ span

const greeting = document.getElementById("text");

5

Ghi chú. Để điều này hoạt động vào thời điểm này, người dùng cần nhấp vào hai nút đầu tiên

9) Nút Reset và các lỗi

Nếu bạn cố nhấp vào nút đặc biệt trước khi nhấp vào một trong hai nút đầu tiên, bạn sẽ gặp lỗi hiển thị trong bảng điều khiển

Để tránh lỗi, chúng tôi cần thực thi thứ tự nút đối với hành vi của người dùng bằng một số logic có điều kiện

Đầu tiên, thêm vùng chứa lỗi trong tệp HTML ngay bên dưới h3 ban đầu bị ẩn khỏi chế độ xem. Cung cấp cho vùng chứa lỗi một số kiểu

const greeting = document.getElementById("text");

6

const greeting = document.getElementById("text");

7

Thứ hai, thêm nút đặt lại thứ tư và gán lớp 'ẩn' cho nút đó. Chúng ta sẽ chuyển đổi lớp này sau

const greeting = document.getElementById("text");

8

Lấy nút đặt lại ẩn và vùng chứa lỗi từ tài liệu HTML và gán chúng cho các biến

const greeting = document.getElementById("text");

9

Tạo hai biến kiểm soát sẽ cho phép kiểm tra xem một số hành động đã diễn ra chưa

greeting.innerHTML = "Hello THT!"

0

Các biến điều khiển có bản chất là boolean (i. e. chúng đúng hoặc sai) và rất tuyệt khi sử dụng logic có điều kiện để kiểm tra xem có điều gì xảy ra không

Chúng tôi bắt đầu với lỗi và isFirstClicked là sai vì không có lỗi khi tập lệnh bắt đầu cũng như nút đầu tiên được nhấp

Khi người dùng nhấp vào nút đầu tiên, isFirstClicked sẽ trở thành true

I'm the FIRST element with a class of demo.
I'm the SECOND element with a class of demo.
I'm the THIRD element with a class of demo.
I'm the FOURTH element with a class of demo.

2

Sau đó, khi người dùng nhấp vào nút thứ hai, chúng tôi sẽ kiểm tra xem nút đầu tiên có được nhấp hay không trước khi tiếp tục các hành động của nút đặc biệt. Ngoài ra, hãy kiểm tra xem lỗi có đúng không (có nghĩa là thông báo lỗi hiển thị) - nếu không, hãy ẩn thông báo lỗi

Nếu nút đầu tiên không được nhấp, chúng tôi sẽ đưa ra lỗi

greeting.innerHTML = "Hello THT!"

1

Bây giờ, khi nhấp vào nút đặc biệt, chúng tôi sẽ sử dụng thử. bắt câu lệnh để đưa ra một lỗi. Lỗi này sẽ phát sinh khi người dùng chưa nhấp vào nút thứ hai vì sẽ không có thẻ span trong nội dung tài liệu

Ghi chú. Có nhiều cách khác nhau để thực hiện việc này - chúng tôi đã chọn phương pháp này vì nó tương đối đơn giản. Ví dụ: bạn có thể tạo ra một biến kiểm soát khác để giải thích cho lần nhấp vào nút thứ hai

greeting.innerHTML = "Hello THT!"

2

Chúng tôi cập nhật error thành true vì chúng tôi kiểm tra biến này khi nhấp vào hai nút còn lại và trả về sẽ giết phần còn lại của mã để nó không hiển thị

Kết thúc các hành động của nút đặc biệt bằng cách hiển thị nút đặt lại

I'm the FIRST element with a class of demo.
I'm the SECOND element with a class of demo.
I'm the THIRD element with a class of demo.
I'm the FOURTH element with a class of demo.

3

Cuối cùng, thực hiện các hành động của nút đặt lại khi nhấp

greeting.innerHTML = "Hello THT!"

3

Và trong chức năng reset(), đảm bảo ẩn nút đặt lại

I'm the FIRST element with a class of demo.
I'm the SECOND element with a class of demo.
I'm the THIRD element with a class of demo.
I'm the FOURTH element with a class of demo.

4

Chúng tôi cũng đang 'đặt lại' biến điều khiển isFirstClicked để chúng tôi duy trì thứ tự các lần nhấp vào nút trong các vòng liên tiếp

Tuyệt vời, bạn đã hoàn tất. Bạn có thể tìm thấy mã đã hoàn thành trên GitHub. Vui lòng tải xuống HTML và CSS nếu bạn chỉ muốn thực hành JavaScript của mình

Làm cách nào để lấy tất cả các phần tử HTML trong JavaScript?

Làm cách nào bạn có thể truy cập phần tử HTML bằng thuộc tính ID bằng JavaScript?