Статья, в которой рассмотрим, какие в jQuery имеются методы для работы с атрибутами HTML элементов.

Работа с атрибутами элементов в jQuery осуществляется с помощью метода attr . Данный метод позволяет:

• узнать значение указанного атрибута;
• добавить новый атрибут к элементу или удалить существующий;
• изменить значение определённого атрибута у элемента.

Кроме метода attr в jQuery доступен также метод removeAttr . Данный метод в отличие от attr используется только для удаления указанного атрибута у элемента или набора элементов.

Разберём, как работать с данными методами более подробно.

jQuery - Получить значение атрибута

Получить содержимое необходимого атрибута элемента в jQuery осуществляется следующим образом:

Attr("имя_атрибута")

Например, получим значение атрибута href ссылки, имеющей идентификатор search1:

Яндекс ... // найдём элемент, имеющий id=search1 var element = $("#search1"); // получим значение атрибута href найденного элемента var href = element.attr("href"); // выведем значение переменной href в консоль console.log(href); // Результат: // https://yandex.ru

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

Например, получим значение атрибута id у элементов div:

Секция 1 Секция 2 Секция 3 ... var attr = $("div").attr("id"); console.log(attr); // Результат: // s-1

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

$("div").each(function(){ console.log($(this).attr("id")); }); // Результат: // s-1 // s-2 // s-3

Метод attr возвращает undefined , когда вы попытаетесь получить значение атрибута, который не был установлен элементу.

Название страницы ... var id = $("h1").attr("id"); console.log(id); // Результат: // undefined

Данный приём можно использовать для проверки наличия определённого атрибута у элемента.

Например, проверить существует ли атрибут title у элемента с id="image-logo" :

... if (typeof $("#image-logo").attr("title") === "undefined") { // элемент не имеет атрибут title console.log("Элемент не имеет атрибут title"); } else { // выведем в консоль сообщение о том, что у элемента есть атрибут title console.log("Элемент имеет атрибут title"); } // Результат: // Элемент не имеет атрибут title

jQuery - Изменить атрибут

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

Attr("имя_атрибута", новое_значение);

Например, поменяем атрибут src элемента img на новое значение:

... $("#logo").attr("src", "new_logo.png"); // Результат: // у элемента img c id="logo" атрибут src="new_logo.png"

jQuery - Добавить атрибут

Установить один или несколько атрибутов элементу позволяет представленный ниже код:

// установка 1 атрибута.attr("имя_атрибута", значение); // установка нескольких (2) атрибутов $("имя_атрибута").attr({ "атрибут1": "значение1", "атрибут2": "значение2" });

$("a").attr("target","_blank");

Кроме этого, при установке элементам атрибутов можно использовать в качестве параметра функцию.

Attr("имя_атрибута", function(index,attr){ // index - число, содержащее порядковый номер (индекс) элемента в наборе // attr - строка, содержащая текущее значение атрибута // this - текущий элемент });

В этом случае атрибут будет иметь значение, которое функция вернула в качестве своего результата.

Например, динамически добавим tabindex для всех элементов формы:

$(function() { $(":input").attr("tabindex", function(index, attr) { return index + 1; }); });

Примечание. Если функция ничего не вернула или возвратила undefined , то текущее значение атрибута не будет изменено (останется прежним). Данную особенность полезно использовать, когда значение атрибута необходимо установить только в зависимости от некоторых условий.

jQuery - Удалить атрибут

В jQuery удаление атрибута можно осуществить 2 способами:

Использование метода attr (в качестве значения атрибута задаётся null); .attr("имя_атрибута", null)

Посредством метода removeAttr . .removeAttr("имя_атрибута")

Например, уберём атрибут rel у всех ссылок на странице:

// 1 Способ $("a").attr("rel", null); // 2 Способ $("a").removeAttr("rel");

Работа с checked , selected , disabled и другими подобными атрибутами (свойствами) более корректно осуществлять с помощью методов jQuery prop или removeProp . Эти методы разобраны в статье "jQuery - Атрибуты disabled, checked и selected" .

Выполнение действий над атрибутом class (классом элемента) в jQuery более удобно выполнять с помощью методов addClass , hasClass , removeClass и toggleClass . Детальное описание этих методов представлено в статье "Специальные методы jQuery для работы с атрибутом class" .

В jQuery работа с HTML5 data-атрибутами осуществляется в основном посредством методов attr и removeAttr . Кроме этого чтение и последующее работу с ними, как с элементами data-хранилища jQuery, можно также осуществить с помощью метода data . Более подробно познакомиться с этим методом можно в статье "jQuery – data" .

Работа с атрибутом style в jQuery осуществляется с помощью метода css .

Поиск элементов по атрибуту производится с помощью функции jQuery. Как это сделать расммотрено в статье

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = "page" .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

Document.body.myData = { name: "Петр", familyName: "Петрович" }; alert(document.body.myData.name); // Петр

Можно добавить и новую функцию:

Document.body.sayHi = function() { alert(this.nodeName); } document.body.sayHi(); // BODY, выполнилась с правильным this

Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.

Обратим внимание, пользовательские DOM-свойства:

• Могут иметь любое значение.
• Названия свойств чувствительны к регистру.
• Работают за счет того, что DOM-узлы являются объектами JavaScript.

Атрибуты

Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.

Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.

Доступ к атрибутам осуществляется при помощи стандартных методов:

• elem.hasAttribute(name) – проверяет наличие атрибута
• elem.getAttribute(name) – получает значение атрибута
• elem.setAttribute(name, value) – устанавливает атрибут
• elem.removeAttribute(name) – удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Также все атрибуты элемента можно получить с помощью свойства elem.attributes , которое содержит псевдо-массив объектов типа Attr .

В отличие от свойств, атрибуты:

• Всегда являются строками.
• Их имя нечувствительно к регистру (ведь это HTML)
• Видны в innerHTML (за исключением старых IE)

Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:

Пример ниже устанавливает атрибуты и демонстрирует их особенности.

alert(elem.getAttribute("About")); // (1) "Elephant", атрибут получен elem.setAttribute("Test", 123); // (2) атрибут Test установлен alert(document.body.innerHTML); // (3) в HTML видны все атрибуты! var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов for (var i = 0; i < attrs.length; i++) { alert(attrs[i].name + " = " + attrs[i].value); }

При запуске кода выше обратите внимание:

getAttribute("About") – первая буква имени атрибута About написана в верхнем регистре, а в HTML – в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.

Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут автоматически преобразованы.

После добавления атрибута его можно увидеть в innerHTML элемента.

Коллекция attributes содержит все атрибуты в виде объектов со свойствами name и value .

Когда полезен доступ к атрибутам?

Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.

Например, свойства тега "A" описаны в спецификации DOM: HTMLAnchorElement .

Например, у него есть свойство "href" . Кроме того, он имеет "id" и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement .

Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.

Для примера, посмотрим, что произойдет с атрибутом "href" при изменении свойства:

a.href = "/"; alert("атрибут:" + a.getAttribute("href")); // "/" alert("свойство:" + a.href); // полный URL

Это происходит потому, что атрибут может быть любым, а свойство href , в соответствии со спецификацией W3C , должно быть полной ссылкой.

Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.

Есть и другие подобные атрибуты

Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство input.checked имеет логическое значение true/false , а HTML-атрибут checked – любое строковое, важно лишь его наличие.

Работа с checked через атрибут и свойство:

// работа с checked через атрибут alert(input.getAttribute("checked")); // пустая строка input.removeAttribute("checked"); // снять галочку // работа с checked через свойство alert(input.checked); // false