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

Question

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

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

что-то типа:

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

491 6

javascript dom

6 ответов:

Comments

Ничего не найдено.

Nick Craver · Accepted Answer · 2018-07-22 04:21:37

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

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

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

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

если библиотека, как jQuery это вариант, вы можете сделать это немного проще, например:
$("[myAttribute=value]")
если значение не является допустимым идентификатор CSS (в нем есть пробелы или знаки препинания и т. д.), вам нужны кавычки вокруг значения (они могут быть одиночными или двойными):
$("[myAttribute='my value']")
вы также можете сделать start-with,ends-with,contains и т. д...есть несколько вариантов для селектора атрибутов.

Wojtek Kruszewski · Accepted Answer · 2016-02-25 09:26:35

современные браузеры поддерживают 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"]');

T.Todua · Accepted Answer · 2017-11-18 10:22:36

FindByAttributeValue("Attribute-Name", "Attribute-Value");   
p. s. Если вы знаете точный тип элемента, вы добавляете 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]; }
  }
}
p.S. Обновлено в комментариях рекомендации.

Deke · Accepted Answer · 2016-12-30 06:35:35

вы можете использовать getAttribute:
 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Naveen Pantra · Accepted Answer · 2018-01-21 11:01:20

мы можем использовать селектор атрибутов в DOM с помощью document.querySelector() и document.querySelectorAll() методы.

для вас:
document.querySelector("<selector>[myAttribute = \'aValue\']");
и с помощью querySlectorAll():
document.querySelectorAll("<selector>[myAttribute] = \'aValue\'");
на querySelector() и querySelectorAll() методы мы можем выбрать объекты, как мы выбираем в "CSS".

\' здесь представляют escape-символ, и он, наконец, представляет selector[myAttrubute = aValue] так же, как в"CSS".

подробнее о селекторах атрибутов " CSS " в https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

KhaledDev · Accepted Answer · 2016-12-18 10:59:57

вот пример, как искать изображения в документе по атрибуту src:
document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");