Найти элемент в DOM на основе значения атрибута

Подскажите, пожалуйста, есть ли какой-нибудь DOM API, который ищет элемент с заданным именем атрибута и значением атрибута:

Что-то вроде:

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 если вы знаете точный тип элемента, вы добавляете третий параметр (т.е. 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]Элементы с идентификатором, которые начинаются с view-.

[class~=button]Элементы с buttonклассом.