Знайдіть елемент у DOM на основі значення атрибута

Скажіть, будь-ласка, чи існує API DOM, який шукає елемент із заданим іменем та значенням атрибута:

Щось на зразок:

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

Оновлення: За останні кілька років ландшафт кардинально змінився. Тепер ви можете надійно використовувати querySelectorі querySelectorAll, дивіться відповідь Войтека, як це зробити.

Зараз немає потреби в залежності від jQuery. Якщо ви використовуєте jQuery, чудово ... якщо ви цього не робите, вам більше не потрібно покладатися лише на вибір елементів за атрибутами.

Існує не дуже короткий спосіб зробити це у ванільному javascript, але є деякі рішення.

Ви робите щось подібне, перебираючи елементи та перевіряючи атрибут

Якщо бібліотека на зразок jQuery - це варіант, ви можете зробити це трохи простіше, як це:

$("[myAttribute=value]")

Якщо значення не є дійсним ідентифікатором CSS (у ньому є пробіли або розділові знаки тощо), вам потрібні лапки навколо значення (вони можуть бути одиничними чи подвійними):

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

Ви можете також зробити start-with, ends-with, containsі т.д. ... Є кілька варіантів для вибору атрибута .

Сучасні веб-переглядачі підтримують нативну, 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");   

ps, якщо ви знаєте точний тип елемента, ви додаєте 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:

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]Елементи з id, які починаються з view-.

[class~=button]Елементи з buttonкласом.