Получение элементов 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");

Ответы

Ответ 1

Да, rthe функция 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, справятся с этим за вас; вероятно, это хорошая идея, чтобы позволить им делать тяжелую работу.

Обратите внимание, что querySelectorAll был введен в IE8 и полностью поддерживается в IE9. Все современные браузеры поддерживают это.

Ответ 2

В jQuery это так:

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

Ответ 3

Еще один ответ

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'
)

Ответ 4

Я думаю, что вы хотите взглянуть на 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;
}

Ответ 5

Вы можете получить атрибут с помощью javascript,

element.getAttribute(attributeName);

Пример:

var wrap = document.getElementById("wrap");
var myattr = wrap.getAttribute("title");

См:

https://developer.mozilla.org/en/DOM/element.getAttribute

Ответ 6

С prototypejs:

 $$('span[property=v.name]');

или

document.body.select('span[property=v.name]');

Оба возвращают массив