ค้นหาองค์ประกอบใน DOM ตามค่าแอททริบิว

คุณช่วยบอกฉันได้ไหมถ้ามี DOM API ที่ค้นหาองค์ประกอบด้วยชื่อแอตทริบิวต์ที่กำหนดและค่าแอตทริบิวต์:

สิ่งที่ต้องการ:

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

ปรับปรุง:ในไม่กี่ปีที่ผ่านมาภูมิทัศน์มีการเปลี่ยนแปลงอย่างมาก ตอนนี้คุณสามารถใช้อย่างน่าเชื่อถือquerySelectorและquerySelectorAllดูคำตอบของ Wojtekสำหรับวิธีการทำสิ่งนี้

ไม่จำเป็นต้องพึ่งพาการใช้ jQuery หากคุณใช้ jQuery ยอดเยี่ยม ... หากคุณไม่ได้ใช้งานคุณไม่จำเป็นต้องพึ่งมันเพียงเลือกองค์ประกอบตามคุณลักษณะอีกต่อไป

ไม่มีวิธีที่สั้นมากในการทำเช่นนี้ในวานิลลาจาวาสคริปต์ แต่มีวิธีแก้ปัญหาบางอย่าง

คุณทำสิ่งนี้โดยวนลูปผ่านองค์ประกอบต่างๆและตรวจสอบคุณสมบัติ

หากไลบรารีอย่างjQueryเป็นตัวเลือกคุณสามารถทำได้ง่ายขึ้นเช่นนี้

$("[myAttribute=value]")

หากค่านั้นไม่ใช่ตัวระบุ CSS ที่ถูกต้อง(มีช่องว่างหรือเครื่องหมายวรรคตอนอยู่ในนั้น ฯลฯ ) คุณต้องมีเครื่องหมายอัญประกาศรอบค่า (อาจเป็นแบบเดี่ยวหรือคู่):

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

นอกจากนี้คุณยังสามารถทำstart-with, ends-with, containsฯลฯ ... มีหลายตัวเลือกสำหรับการเลือกแอตทริบิวต์

เบราว์เซอร์สมัยใหม่รองรับ Native querySelectorAllเพื่อให้คุณสามารถ:

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

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

รายละเอียดเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์:

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

คุณสามารถใช้ jQuery เพื่อรองรับเบราว์เซอร์ที่ล้าสมัย (IE9 ขึ้นไป):

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

เราสามารถใช้ตัวเลือกคุณสมบัติใน DOM โดยใช้document.querySelector()และdocument.querySelectorAll()วิธีการ

สำหรับคุณ:

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

และโดยการใช้querySlectorAll():

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

ในquerySelector()และquerySelectorAll()วิธีการที่เราสามารถเลือกวัตถุที่เราเลือกใน "CSS"

เพิ่มเติมเกี่ยวกับตัวเลือกแอตทริบิวต์ "CSS" ในhttps://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

ป.ล. ถ้าคุณรู้องค์ประกอบประเภทที่แน่นอนคุณเพิ่มพารามิเตอร์ตัวที่ 3 (เช่นdiv, a, p ...etc...):

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

แต่ในตอนแรกให้นิยามฟังก์ชั่นนี้:

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 ตามคำแนะนำความคิดเห็น

นี่คือตัวอย่างวิธีค้นหารูปภาพในเอกสารโดย src attribute:

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

คุณสามารถใช้ getAttribute:

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

ใช้ตัวเลือกคิวรีตัวอย่าง:

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

input[name]องค์ประกอบอินพุตพร้อมnameคุณสมบัติ

[id|=view]view-องค์ประกอบที่มีรหัสที่ขึ้นต้นด้วย

[class~=button]องค์ประกอบกับbuttonคลาส