Hướng dẫn get element by attribute javascript - lấy phần tử theo thuộc tính javascript

Bạn có thể vui lòng cho tôi biết nếu có bất kỳ API DOM nào tìm kiếm một phần tử có tên thuộc tính và giá trị thuộc tính đã cho:

Cái gì đó như:

doc.findElementByAttribute("myAttribute", "aValue");

Nakilon

34.3K14 Huy hiệu vàng104 Huy hiệu bạc138 Huy hiệu đồng14 gold badges104 silver badges138 bronze badges

Hỏi ngày 22 tháng 4 năm 2010 lúc 21:27Apr 22, 2010 at 21:27

Michaelmichaelmichael

103K114 Huy hiệu vàng240 Huy hiệu bạc342 Huy hiệu Đồng114 gold badges240 silver badges342 bronze badges

2

CẬP NHẬT: Trong vài năm qua, cảnh quan đã thay đổi mạnh mẽ. Bây giờ bạn có thể sử dụng một cách đáng tin cậy

$("[myAttribute=value]")

$("[myAttribute=value]")

$("[myAttribute=value]")

$("[myAttribute=value]")

Không cần phải phụ thuộc jQuery bây giờ. Nếu bạn đang sử dụng jQuery, tuyệt vời ... nếu bạn không, bạn không cần phải dựa vào chỉ để chọn các phần tử bằng các thuộc tính nữa.

Không có cách nào rất ngắn để làm điều này trong Vanilla JavaScript, nhưng có một số giải pháp có sẵn.

Bạn làm một cái gì đó như thế này, lặp qua các yếu tố và kiểm tra thuộc tính

Nếu một thư viện như jQuery là một tùy chọn, bạn có thể làm điều đó dễ dàng hơn một chút, như thế này:

$("[myAttribute=value]")

Nếu giá trị không phải là định danh CSS hợp lệ (nó có khoảng trắng hoặc dấu câu trong đó, v.v.), bạn cần báo giá xung quanh giá trị (chúng có thể là đơn hoặc gấp đôi):

$("[myAttribute='my value']")

Bạn cũng có thể thực hiện

$("[myAttribute=value]")

$("[myAttribute=value]")

$("[myAttribute=value]")

Brasofilo

25K15 Huy hiệu vàng90 Huy hiệu bạc177 Huy hiệu đồng15 gold badges90 silver badges177 bronze badges

Đã trả lời ngày 22 tháng 4 năm 2010 lúc 21:31Apr 22, 2010 at 21:31

Nick Cravernick CraverNick Craver

616K134 Huy hiệu vàng1293 Huy hiệu bạc1152 Huy hiệu đồng134 gold badges1293 silver badges1152 bronze badges

4

Chúng ta có thể sử dụng bộ chọn thuộc tính trong DOM bằng cách sử dụng các phương thức

$("[myAttribute=value]")

$("[myAttribute=value]")

cho bạn:

document.querySelector("[myAttribute='aValue']");

và bằng cách sử dụng

$("[myAttribute='my value']")

document.querySelectorAll("[myAttribute='aValue']");

Trong các phương thức

$("[myAttribute='my value']")

$("[myAttribute='my value']")

Thông tin thêm về các bộ chọn thuộc tính "CSS" trong https://developer.mozilla.org/en-us/docs/web/css/attribute_selectorors

Albert

8.0683 Huy hiệu vàng46 Huy hiệu bạc62 Huy hiệu Đồng3 gold badges46 silver badges62 bronze badges

Đã trả lời ngày 21 tháng 1 năm 2018 lúc 9:01Jan 21, 2018 at 9:01

NAVEEN PANTRANAVEEN PANTRANaveen Pantra

1.1281 Huy hiệu vàng7 Huy hiệu bạc 6 Huy hiệu đồng1 gold badge7 silver badges6 bronze badges

1

FindByAttributeValue("Attribute-Name", "Attribute-Value");   

P.S. Nếu bạn biết loại phần tử chính xác, bạn sẽ thêm tham số thứ 3 (tức là .________ 23):

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");   

Nhưng lúc đầu, xác định chức năng này:

function FindByAttributeValue(attribute, value, element_type)    {
  element_type = element_type || "*";
  var All = document.getElementsByTagName(element_type);
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}

P.S. Cập nhật cho mỗi khuyến nghị bình luận.

Đã trả lời ngày 24 tháng 1 năm 2014 lúc 10:15Jan 24, 2014 at 10:15

4

Sử dụng bộ chọn truy vấn, ví dụ:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

$("[myAttribute='my value']")

$("[myAttribute='my value']")

$("[myAttribute='my value']")

$("[myAttribute='my value']")

$("[myAttribute='my value']")

$("[myAttribute='my value']")

Đã trả lời ngày 11 tháng 6 năm 2020 lúc 21:05Jun 11, 2020 at 21:05

Daniel de Leóndaniel de LeónDaniel De León

12.8k5 Huy hiệu vàng83 Huy hiệu bạc70 Huy hiệu Đồng5 gold badges83 silver badges70 bronze badges

1

Đây là cách bạn có thể chọn bằng cách sử dụng

$("[myAttribute=value]")

document.querySelector("tagName[attributeName='attributeValue']")

Đã trả lời ngày 16 tháng 9 năm 2021 lúc 18:36Sep 16, 2021 at 18:36

SiddharthsiddharthSiddharth

4645 Huy hiệu bạc12 Huy hiệu Đồng5 silver badges12 bronze badges

Dưới đây là một ví dụ, cách tìm kiếm hình ảnh trong tài liệu của thuộc tính SRC:

$("[myAttribute=value]")

Đã trả lời ngày 18 tháng 12 năm 2016 lúc 8:59Dec 18, 2016 at 8:59

Boubkhaledboubkhaledboubkhaled

3795 Huy hiệu bạc6 Huy hiệu Đồng5 silver badges6 bronze badges

Sửa đổi cho câu trả lời của Daniel de León, có thể tìm kiếm với

document.querySelector("[myAttribute='aValue']");

document.querySelector("[myAttribute='aValue']");

document.querySelector("[myAttribute='aValue']");

document.querySelector("[myAttribute='aValue']");

$("[myAttribute=value]")

Đã trả lời ngày 19 tháng 4 lúc 14:30Apr 19 at 14:30

$("[myAttribute=value]")

Đây là một hàm được sử dụng TU để chọn một thẻ cụ thể với giá trị thuộc tính cụ thể. Các tham số được truyền là ID thẻ, sau đó tên thẻ - bên trong ID thẻ đó và thuộc tính và thứ tư là giá trị thuộc tính. Hàm này sẽ trả về số lượng các phần tử được tìm thấy với thuộc tính được chỉ định và giá trị của nó. Bạn có thể sửa đổi nó theo bạn.

Đã trả lời ngày 25 tháng 12 năm 2021 lúc 12:18Dec 25, 2021 at 12:18

1

Làm thế nào để bạn có được một phần tử dựa trên thuộc tính?

Bạn có thể nhận được phần tử theo tên trong JavaScript không?

Làm thế nào để tôi tìm thấy các thuộc tính dữ liệu?

Làm thế nào để bạn sử dụng getattribut?