4 phương pháp tìm phần tử HTML là gì?

Trong HTML, đôi khi người dùng cần truy cập các phần tử HTML để hiển thị cho người dùng những thay đổi khác nhau. Chúng tôi có thể hỗ trợ điều này bằng cách sử dụng JavaScript hiện đại. Để tạo điều kiện thuận lợi cho việc này, chúng ta có thể tiếp tục và thay đổi phần tử HTML bằng cách sử dụng các kỹ thuật sau –

• Nhận phần tử HTML theo Id

• Nhận phần tử HTML theo className

• Nhận phần tử HTML theo Tên

• Nhận phần tử HTML theo tagName

• Nhận phần tử HTML bằng CSS Selector

Dưới đây chúng tôi đã thêm phần trình diễn cho các phương pháp trên

Nhận phần tử HTML theo Id

Phương thức này lấy phần tử từ một ID duy nhất và cho phép người dùng truy cập phần tử đó. Người dùng có thể sử dụng phương thức getElementById() để truy cập và cập nhật nội dung HTML. Nếu bất kỳ phần tử nào không tồn tại với Id đã cho, phương thức sẽ trả về null

cú pháp

document.getElementById(element_ID);

Tham số - Nó lấy id phần tử cho phần tử được truy cập

Giá trị trả về - Nó trả về đối tượng có id cụ thể. Nếu phần tử có id cụ thể không tồn tại, null được trả về

ví dụ 1

#têntệp. mục lục. html

   DOM getElementById() Method


   
   
      Welcome To Tutorials Point
   
   
DOM getElementById() Method
   

đầu ra

Nhận phần tử HTML theo className

Điều này chọn phần tử từ tên lớp. Chúng ta có thể cung cấp tên lớp cho từng phần tử trong HTML và sau đó truy cập phần tử tương tự bằng cách sử dụng tên lớp đó. Trong phần này, chúng ta sẽ sử dụng phương thức getElementsByClassName() để lấy và cập nhật phần tử

cú pháp

document.getElementsByClassName(classnames);

Tham số - Nó nhận đầu vào cho tên lớp của phần tử cần được truy cập

Giá trị trả về - Nó trả về tập hợp các đối tượng có tên lớp cụ thể. Người dùng có thể truy cập bộ sưu tập này bằng cách sử dụng các chỉ mục

ví dụ 2

#têntệp. mục lục. html

   DOM getElementsByClassName() Method


   Welcome To Tutorials Point
   
   
Tutorials Point #1
   
Tutorials Point #2
   
Tutorials Point #3




   DOM getElementsByclassName() Method

đầu ra

Nhận phần tử HTML theo Tên

Trong JavaScript, chúng ta có thể truy cập các phần tử bằng cách sử dụng phương thức getElementsByName(). Nó giúp người dùng có được một phần tử với sự trợ giúp của một cái tên. Tên ở đây là tên thuộc tính của phần tử HTML

cú pháp

document.getElementsByName(element_name);

Tham số - Nó nhận đầu vào cho tên của phần tử mà người dùng muốn truy cập

Giá trị trả về - Nó trả về tập hợp các phần tử có tên cụ thể

ví dụ 3

#têntệp. mục lục. html

   DOM getElementByName() Method


   Welcome To Tutorials Point
   
   
Tutorials Point #1
   
Tutorials Point #2
   
Tutorials Point #3
   
DOM getElementsByName() Metho

đầu ra

Nhận các phần tử HTML theo TagName

Trong JavaScript, chúng ta có thể sử dụng phương thức getElementsByTagName() để truy cập tất cả các phần tử có tên thẻ đã cho. Phương thức này giống như phương thức getElementsByName(). Ở đây, chúng tôi đang truy cập các phần tử bằng cách sử dụng tên thẻ thay vì sử dụng tên của phần tử

cú pháp

document.getElementsByTagName(Tag_name);

Tham số - Nó nhận đầu vào cho tên thẻ

Giá trị trả về - Nó trả về tập hợp các phần tử bao gồm tên thẻ được truyền dưới dạng tham số

Ví dụ 4

#têntệp. mục lục. html

   DOM getElementByTagName() Method


   Welcome To Tutorials Point
   
   
TutorialsPoint #1
   
TutorialsPoint #2
   
TutorialsPoint #3
   
DOM getElementsByTagName() Method

đầu ra

Nhận các phần tử HTML bằng CSS Selector

Chúng ta có thể chọn các phần tử HTML bằng cách sử dụng các bộ chọn CSS như Id lớp và Tên thẻ. Các phần tử HTML có thể được truy xuất bằng bộ chọn CSS theo hai cách. Phương thức querySelector() trả về phần tử đầu tiên khớp với bộ chọn CSS cụ thể. Phương thức querySelectorAll() trả về tất cả phần tử khớp với bộ chọn CSS cụ thể

cú pháp

Tham số - Là một tham số, nó chấp nhận các bộ chọn CSS khác nhau như lớp, tên thẻ và id

Giá trị trả về − Phương thức querySelector() trả về đối tượng đầu tiên khớp với bộ chọn cCSS, trong khi phương thức querySelectorAll() trả về một tập hợp tất cả các đối tượng khớp với bộ chọn CSS

4 yếu tố của HTML là gì?

Các cách khác nhau để xác định các phần tử trong trang HTML là gì?

Các phương pháp khác nhau để tìm các phần tử HTML trong DOM là gì?

Phương pháp nào được sử dụng để truy cập các phần tử HTML?