Блог

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

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

Существует ли какой-либо доступный метод для получения элементов в соответствии с именем атрибута.

ПРИМЕР:

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

Нравится:

 document.getElementsByAttributeName("property");
  

Да, функция есть 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 он был представлен в Internet Explorer в версии 8 (2009) и полностью поддерживается в IE9. Все современные браузеры поддерживают его.

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

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

В jQuery это так:

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

Давайте предположим, что у вас есть ввод:

          <input type='text' name='from'/>
  
  

затем вы можете получить к нему доступ следующим образом:

         document.querySelector('input[name="from"]')
  

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

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

стороннее редактирование

Вступление

• Метод call() вызывает функцию с заданным значением this и аргументами, предоставляемыми индивидуально.

• Метод filter() создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

Учитывая эту разметку html

 <span property="a">apple - no match</span>
<span property="v:name">onion - match</span>
<span property="b">root - match</span>
<span property="v:name">tomato - match</span>
<br />
<button onclick="findSpan()">find span</button>
  

вы можете использовать этот javascript

 function findSpan(){

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

Смотрите демонстрацию

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

 $.fn.hasAttribute = function(tagName, attrName){
  var result = [];
  $.each($(tagName), function(index, value) { 
     var attr = $(this).attr(attrName); 
     if (typeof attr !== 'undefined' amp;amp; attr !== false)
        result.push($(this));
  });
  return resu<
}
  

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

 element.getAttribute(attributeName);
  

Пример:

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

Обратитесь:

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

С помощью prototypejs :

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

или

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

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