Tìm một phần tử trong DOM dựa trên giá trị thuộc tính

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ử với tên thuộc tính và giá trị thuộc tính đã cho không:

Cái gì đó như:

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

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 querySelectorvà querySelectorAll, xem câu trả lời của Wojtek để biết cách thực hiện việc này.

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

Không có một cách rất ngắn để làm điều này trong javascript vanilla, 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ó dấu cách hoặc dấu chấm trong đó, v.v.), bạn cần dấu ngoặc kép quanh giá trị (chúng có thể là một hoặc hai):

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

Bạn cũng có thể làm start-with, ends-with, contains, vv ... có một số tùy chọn cho bộ chọn thuộc tính .

Các trình duyệt hiện đại hỗ trợ bản địa querySelectorAllđể bạn có thể làm:

document.querySelectorAll('[data-foo="value"]');

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector ALL

Chi tiết về khả năng tương thích trình duyệt:

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

Bạn có thể sử dụng jQuery để hỗ trợ các trình duyệt lỗi thời (IE9 trở lên):

$('[data-foo="value"]');

Chúng ta có thể sử dụng bộ chọn thuộc tính trong DOM bằng cách sử dụng document.querySelector()và document.querySelectorAll()phương thức.

cho bạn:

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

và bằng cách sử dụng querySlectorAll():

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

Trong querySelector()và querySelectorAll()phương thức chúng ta có thể chọn các đối tượng khi chúng ta chọn trong "CSS".

Tìm hiểu thêm về bộ chọn thuộc tính "CSS" trong https://developer.mozilla.org/en-US/docs/Web/CSS/Attribution_selector

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

ps nếu bạn biết loại phần tử chính xác, bạn thêm tham số thứ 3 (tức là div, a, p ...etc...):

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

nhưng lúc đầu, xác định hàm 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]; }
  }
}

ps cập nhật theo ý kiến ​​bình luận.

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

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

bạn có thể sử dụng getAttribution:

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Euity/getAttribution

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

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

input[name]Đầu vào các yếu tố với nametài sản.

[id|=view]Các yếu tố với id bắt đầu bằng view-.

[class~=button]Các yếu tố với buttonlớp.