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!



    document.getElementById["text"].innerHTML = "Hello THT!";

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 {. }] 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?