Методы JavaScript DOM .getAttribute() и jquery .attr() позволяют получить только один атрибут элемента по его имени. А что делать если нам нужно обойти все заданные атрибуты элемента, чтобы, например, определить какие-то параметры, и нам не важно точное имя атрибута?
Здесь показан обход аттрибутов методом JavaScript DOM и заполнение массивов nodes и values их именами и значениями соответственно (с http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery, ответ Roland Bouman, который получил всех больше плюсов):
var nodes=[], values=[], el = document.getElementById('someId'); for (var attr, i = 0, attrs = el.attributes, n = attrs.length; i < n; i++){ attr = attrs[i]; nodes.push(attr.nodeName); values.push(attr.nodeValue); }
А если мы используем jquery, можно получить атрибуты так (c http://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery, красивый ответ pimvdb) :
$(this).each(function() { $.each(this.attributes, function() { if(this.specified) { // Теперь this.name - имя атрибута // this.value - его значение (JavaScript DOM) } }); });
Примечание: в стрых IE мы получаем все возможные атрибуты, не только те, которые представлены в элементе. Поэтому мы используем свойство specified.
Автор ответа тут же указал дополнение к jquery, добавляющее вызов метода .attr() без параметров к любому элементу, который возвращает объект со всеми атрибутами этого элемента:
(function(old) { $.fn.attr = function() { if(arguments.length === 0) { if(this.length === 0) { return null; } var obj = {}; $.each(this[0].attributes, function() { if(this.specified) { obj[this.name] = this.value; } }); return obj; } return old.apply(this, arguments); }; })($.fn.attr); // Использование: var $div = $("<div data-a='1' id='b'>"); $div.attr(); // { "data-a": "1", "id": "b" }
Красиво, да? Автору ответа – большой плюс.
Правда сам на практике я ещё не проверял эти методы (кроме первого, он прекрасно работает).
До встречи, друзья, отличного настроения, крепкого сна и чистого неба над головой!