Найти элемент в DOM на основе значения атрибута - PullRequest
189 голосов
/ 23 апреля 2010

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

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

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

Ответы [ 6 ]

337 голосов
/ 27 мая 2013

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

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

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

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

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

$('[data-foo="value"]');
127 голосов
/ 23 апреля 2010

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

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


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

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

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

$("[myAttribute=value]")

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

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

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

22 голосов
/ 21 января 2018

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

18 голосов
/ 24 января 2014
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 обновлено в соответствии с комментариями рекомендации.

3 голосов
/ 30 декабря 2016

вы можете использовать getAttribute:

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

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

3 голосов
/ 18 декабря 2016

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

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...