Hướng dẫn này sẽ trình bày các phương pháp khác nhau để chọn các phần tử DOM trong JavaScript.
Các cách khác nhau để chọn các phần tử DOM trong JavaScript là gì?
Sử dụng các phương pháp sau để chọn các phần tử DOM trong JavaScript:
- phương thức getElementById()
- phương thức getElementsByClassName()
- phương thức getElementsByTagName()
- phương thức querySelector()
- phương thức querySelectorAll()
Phương pháp 1: Chọn các phần tử DOM bằng phương thức “getElementById()”
Để chọn các thành phần DOM, hãy sử dụng “ getElementById() ” dựa trên id được chỉ định của phần tử. Phương pháp này chọn một phần tử duy nhất bằng “ nhận dạng ' thuộc tính. Nó đưa ra một tham chiếu đến phần tử có id được chỉ định và trả về “ vô giá trị ” nếu không tìm thấy phần tử phù hợp.
cú pháp
Sử dụng cú pháp dưới đây cho phương thức getElementById():
tài liệu. getElementById ( 'idName' )
Ở đây, “ idName ” là tên của một thuộc tính id được gán cho một phần tử.
Ví dụ
Trong tệp HTML, hãy tạo hai tiêu đề trong phần tử div bằng cách sử dụng “ h4 ' nhãn. Gán id cho phần tử div và tiêu đề phần tử “h4” có tên “ div ' Và ' phần mở đầu ', tương ứng. Thêm thuộc tính style vào phần tử div để căn giữa nó. Ngoài ra, chỉ định một lớp “ phần ” đến tiêu đề thứ hai thay đổi màu sắc của nó:
< div nhận dạng = 'div' phong cách = 'căn chỉnh văn bản: trung tâm;' >< h4 nhận dạng = 'phần mở đầu' > Truy cập các phần tử DOM bằng các phương thức khác nhau < / h4 >
< h4 lớp học = 'phần' nhận dạng = 'phần mở đầu' > Chọn các phần tử DOM trong JavaScript bằng phương thức 'getElementById()'
< / h4 >
< / div >
Bây giờ, chúng ta sẽ nhận được “ div ” phần tử sử dụng id được chỉ định của nó với sự trợ giúp của phần tử “ getElementById() ' phương pháp:
đã từng là getById = tài liệu. getElementById ( 'div' ) ;In phần tử so với id “ div ” trên bảng điều khiển:
bảng điều khiển. đăng nhập ( getById ) ;Có thể thấy rằng phần tử HTML được yêu cầu đã được truy xuất thành công:
Phương pháp 2: Chọn các phần tử DOM bằng phương thức “getElementsByClassName()”
Bạn cũng có thể chọn phần tử DOM bằng cách sử dụng lớp được chỉ định của nó với sự trợ giúp của “ getElementsByClassName() ' phương pháp. Nó chọn một danh sách các phần tử theo tên lớp của chúng. Nó xuất ra một đối tượng HTMLCollection trực tiếp, một đối tượng giống như mảng chứa tất cả các phần tử có tên lớp được chỉ định.
cú pháp
Cú pháp sau đây được sử dụng cho phương thức “getElementsByClassName()”:
tài liệu. getElementsByClassName ( 'tên lớp' )Ví dụ
Tại đây, chúng ta sẽ lấy phần tử chứa class “ phần ” và in trên bàn điều khiển:
đã từng là getByClass = tài liệu. getElementsByClassName ( 'phần' ) ;bảng điều khiển. đăng nhập ( getByClass ) ;
Như bạn có thể thấy ở đầu ra, một mảng có độ dài 1 được trả về có chứa một phần tử “ h4 ” ai thuộc lớp “ phần ”:
Phương pháp 3: Chọn các phần tử DOM bằng phương thức “getElementsByTagName()”
Trong trường hợp không có id hoặc lớp được gán cho một phần tử, hãy sử dụng “ getElementsByTagName() ” để lấy phần tử theo tên thẻ của chúng. Nó cũng trả về một đối tượng HTMLCollection trực tiếp, là một đối tượng giống như mảng chứa tất cả các phần tử có tên thẻ đã chỉ định.
cú pháp
Thực hiện theo cú pháp đã cho để chọn các thành phần dựa trên tên thẻ:
getElementsByTagName ( tên thẻ )Ví dụ
Gọi phương thức “getElementsByTagName()” bằng cách chuyển tên thẻ “ h4 ”. Sau đó, in danh sách các phần tử khớp với tên thẻ đã chỉ định trên bảng điều khiển:
đã từng là getByTag = tài liệu. getElementsByTagName ( 'h4' ) ;bảng điều khiển. đăng nhập ( getByTag ) ;
đầu ra
Phương pháp 4: Chọn các phần tử DOM bằng phương thức “querySelector()”
Sử dụng ' truy vấnSelector() ” để lấy phần tử DOM. Nó chọn một phần tử duy nhất khớp với bộ chọn CSS đã chỉ định. Nó trả về phần tử phù hợp đầu tiên được tìm thấy trong tài liệu. Nếu không có phần tử nào được khớp, nó sẽ cho “ vô giá trị ”.
cú pháp
Cú pháp được đề cập dưới đây được sử dụng cho phương thức “querySelector()”:
tài liệu. bộ chọn truy vấn ( thuộc tính )Ở đây, thuộc tính là một bộ chọn CSS, chẳng hạn như id hoặc lớp là “ #mã số của tôi ” “ .lớp học của tôi “.
Ví dụ
Gọi phương thức “querySelector()” và truyền id “ #phần mở đầu ” để lấy các phần tử có cùng id:
đã từng là getByquery = tài liệu. bộ chọn truy vấn ( '#phần mở đầu' ) ;bảng điều khiển. đăng nhập ( getByquery ) ;
Nó cung cấp phần tử phù hợp đầu tiên làm đầu ra:
Phương pháp 5: Chọn các phần tử DOM bằng phương thức “querySelectorAll()”
Nếu bạn muốn chọn tất cả các thành phần chứa thuộc tính đã chỉ định (id hoặc class), hãy sử dụng “ truy vấnSelectorAll() ' phương pháp. Nó chọn một danh sách các phần tử khớp với một bộ chọn CSS được xác định cụ thể. Nó đưa ra một đối tượng NodeList chứa tất cả các phần tử trong tài liệu phù hợp với bộ chọn CSS cụ thể.
cú pháp
Sử dụng cú pháp sau để lấy danh sách các phần tử:
tài liệu. truy vấnSelectorAll ( thuộc tính )Ví dụ
Để lấy danh sách phần tử phù hợp có chứa id “ phần mở đầu ” với “ truy vấnSelectorAll() ” và in trên các phần tử trên bàn điều khiển:
đã từng là getByqueryAll = tài liệu. truy vấnSelectorAll ( '#phần mở đầu' ) ;bảng điều khiển. đăng nhập ( getByqueryAll ) ;
đầu ra
Đó là tất cả về việc chọn các phần tử DOM trong JavaScript.
Phần kết luận
Để chọn các phần tử DOM trong JavaScript, hãy sử dụng “ getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ truy vấnSelector() ', hoặc là ' truy vấnSelectorAll() ' phương pháp. Các phương thức này cung cấp các cách khác nhau để chọn các phần tử từ DOM dựa trên mã định danh, tên lớp, tên thẻ hoặc bộ chọn CSS duy nhất của chúng. Hướng dẫn này trình bày các phương pháp khác nhau để chọn các phần tử DOM trong JavaScript.