it-swarm.com.ru

Получение элементов HTML по именам их атрибутов

В JavaScript есть методы, позволяющие получить HTML-элементы с использованием их идентификатора, класса и тега.

document.getElementByID(*id*);
document.getElementsByClassName(*class*);
document.getElementsByTagName(*tag*);

Есть ли способ получить элементы в соответствии с именем атрибута.

EX: 

<span property="v:name">Basil Grilled Tomatoes and Onions</span>

Подобно:

document.getElementsByAttributeName("property");
39
Saurabh Saxena

Да, но это присутствует не во всех браузерах. Старые версии Internet Explorer (т.е. до версии 8) не поддерживают его. Функция querySelectorAll (или querySelector для одного элемента), которая позволяет использовать селекторы CSS для поиска элементов.

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property=value]'); // All with "property" set to "value" exactly.

(Полный список селекторов атрибутов в MDN.)

Это находит все элементы со свойством атрибута. Было бы лучше указать имя тега, если это возможно:

document.querySelectorAll('span[property]');

Вы можете обойти это, если необходимо, просматривая все элементы на странице, чтобы увидеть, установлен ли у них атрибут:

var withProperty = [],
    els = document.getElementsByTagName('span'), // or '*' for all types of element
    i = 0;

for (i = 0; i < els.length; i++) {
    if (els[i].hasAttribute('property')) {
        withProperty.Push(els[i]);
    }
}

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

63
lonesomeday

В jQuery это так:

$("span['property'=v:name]"); // for selecting your span element
2
IceMan

Просто еще один ответ

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    function(el) {return el.getAttribute('property') == 'v.name';}
);

В будущем

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    (el) => el.getAttribute('property') == 'v.name'
)
1
Fabio Montefuscolo

Я думаю, что вы хотите взглянуть на jQuery , поскольку эта библиотека Javascript предоставляет множество функциональных возможностей, которые вы, возможно, захотите использовать в подобных случаях. В вашем случае вы можете написать (или найти один в Интернете) метод hasAttribute, например, так (не проверено):

$.fn.hasAttribute = function(tagName, attrName){
  var result = [];
  $.each($(tagName), function(index, value) { 
     var attr = $(this).attr(attrName); 
     if (typeof attr !== 'undefined' && attr !== false)
        result.Push($(this));
  });
  return result;
}
0
Bas Slagter