Chọn thuộc tính JavaScript

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Để lấy một phần tử theo thuộc tính, phương thức “querySelector()” được sử dụng. Nó trả về phần tử đầu tiên của tài liệu khớp với thuộc tính cụ thể. Phương pháp này chọn một thẻ cụ thể với một giá trị thuộc tính cụ thể. Các tham số cần được chuyển là “TagID”, “class”, v.v.

Cú pháp
Sử dụng cú pháp được đề cập bên dưới để lấy phần tử theo thuộc tính.

tài liệu. querySelector("[myAttribute=value]");

Trong cú pháp trên, chuyển thuộc tính với giá trị được gán của nó dưới dạng tham số

Ví dụ
Trong tệp HTML, trước tiên, hãy tạo phần tử “div” bằng cách sử dụng thẻ

< div id ="divId"><Click to Get Element<br><br>
 <button onclick="getElement()">Clickbutton>
div>

Để tạo kiểu cho div, chúng tôi sẽ sử dụng các dòng mã bên dưới

#divId {
 phần đệm . 10px ;
 chiều cao . 100px ;
 chiều rộng . 200px ;
 lề . tự động ;
 nền - màu . : hồng ;
}

Đầu ra tương ứng sẽ như sau

Trong tệp JavaScript, hãy xác định chức năng “getElement()” sẽ kích hoạt khi nhấp vào nút. Gọi phương thức “querySelector()” và chuyển thuộc tính “id” và giá trị của nó “divId” làm đối số và lưu phần tử kết quả trong một biến “phần tử”

function getElement (){
 var element = document.Bộ chọn truy vấn('[id="divId"]');
 alert(element);
}

Đầu ra đã cho cho thấy thuộc tính “divId” thuộc về một phần tử “div”

Nếu bạn muốn xem tất cả các phần tử bên trong phần tử cụ thể, thay vì gọi phương thức alert(), hãy sử dụng “console. log()” sẽ hiển thị phần tử bao gồm các phần tử con của nó

function getElement (){
 var element = document.Bộ chọn truy vấn('[id="divId"]');
 console.log( phần tử );
}

đầu ra

GIF ở trên hiển thị phần tử HTML “div” có thuộc tính có giá trị “divId”, với các phần tử con của nó trong bảng điều khiển bằng cách nhấp vào nút

Phần kết luận

Để nhận phần tử theo thuộc tính, hãy sử dụng phương thức “querySelector()” được xác định trước của JavaScript. Nó được sử dụng để chọn một thẻ cụ thể với một giá trị thuộc tính cụ thể. Hướng dẫn này giải thích quy trình lấy phần tử HTML theo thuộc tính bằng JavaScript

Hầu hết, thuộc tính giá trị của thẻ tùy chọn được sử dụng trong hộp chọn. Bên cạnh giá trị tùy chọn, các thuộc tính tùy chỉnh có thể được xác định trong thẻ tùy chọn của menu thả xuống chọn. Bạn cũng có thể lấy giá trị thuộc tính tùy chỉnh từ hộp chọn bằng JavaScript. Giá trị thuộc tính của tùy chọn đã chọn có thể được truy xuất dễ dàng bằng JavaScript

Trong đoạn mã ví dụ này, chúng tôi sẽ chỉ cho bạn cách lấy giá trị thuộc tính của tùy chọn đã chọn trong JavaScript

Hộp thả xuống chọn sau đây chứa danh sách quốc gia. ID được xác định trong thuộc tính value và mã quốc gia được xác định trong thuộc tính country_code

 
	
	
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Mã sau có thể được sử dụng để lấy giá trị thuộc tính country_code từ tùy chọn đã chọn trong danh sách thả xuống quốc gia bằng JavaScript

Phương thức Document.querySelectorAll(selector) trả về danh sách các phần tử tài liệu khớp với các bộ chọn đã chỉ định. Chúng ta có thể chỉ định thuộc tính trong bộ chọn

Kiểm tra ví dụ dưới đây

document.querySelectorAll("[myAttribute=value]");

Ví dụ trên có một bộ chọn thuộc tính, trong đó giá trị thuộc tính được xác định, myAttribute=value

Chức năng này được hỗ trợ với hầu hết các trình duyệt hiện đại

Sử dụng Thư viện jQuery để lấy phần tử theo thuộc tính của nó trong JavaScript

jQuery là một thư viện JavaScript nhanh, mạnh mẽ. Chúng ta có thể chọn các phần tử theo thuộc tính của chúng bằng bộ chọn phần tử jQuery

document.querySelectorAll("[myAttribute=value]");

select() trong JavaScript là gì?

thuộc tính chọn là gì?

Làm cách nào để chọn thuộc tính lớp trong JavaScript?

Cách lấy giá trị thuộc tính tùy chọn trong JavaScript?