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

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

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

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

ОТВЕТЫ

Ответ 1

Обновление: за последние несколько лет пейзаж резко изменился. Теперь вы можете надежно использовать querySelector и querySelectorAll, см. Ответ Wojtek для того, как это сделать.

Теперь нет необходимости в зависимости от jQuery. Если вы используете jQuery, отлично... если нет, вам не нужно полагаться только на выбор элементов по атрибутам.

Там не очень короткий способ сделать это в javascript, но есть некоторые доступные решения.

Вы делаете что-то вроде этого, перебираете элементы и проверяете атрибут

Если библиотека, подобная jQuery, является вариантом, вы можете сделать это немного проще, например:

$("[myAttribute=value]")

Если значение не является допустимым идентификатором CSS (в нем есть пробелы или знаки препинания и т.д.), Вам нужны котировки вокруг значения (они могут быть одиночными или двойными):

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

Вы также можете start-with, ends-with, contains и т.д.... есть несколько опций для селектора атрибутов.

Ответ 2

Современные браузеры поддерживают родной querySelectorAll, чтобы вы могли:

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

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

Сведения о совместимости браузера:

Вы можете использовать jQuery для поддержки устаревших браузеров (IE9 и старше):

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

Ответ 3

Мы можем использовать селектор атрибутов в 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

Ответ 4

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

p.s. если вы знаете точный тип элемента, вы добавляете третий параметр (т.е. 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]; }
  }
}

p.s. обновленные рекомендации по комментариям.

Ответ 5

Вот пример: Как искать изображения в документе по атрибуту src:

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