JavaScript - DOM: атрибуты элементов

На этом уроке мы познакомимся со свойствами и методами элементов (узлов), которые предназначены для работы с их атрибутами. С помощью этих свойств и методов Вы можете не только получать значения атрибутов, но и изменять их, добавлять новые атрибуты или удалять существующие.

У любого элемента (узла) есть свойство attributes, с помощью которого Вы можете получить коллекцию его атрибутов (узлов), в виде объекта NamedNodeMap. Каждый атрибут (узел) в этой коллекции имеет имя, который совпадает с именем атрибута. Доступ к атрибуту (узлу) в этой коллекции осуществляется по его индексу или с помощью метода item(). Отсчёт атрибутов (узлов) в этой коллекции начинается с 0.

Для работы с узлами (получения значения узла, добавление нового узла или удаления существующего) используются следующие методы объекта NamedNodeMap: getNamedItem(), setNamedItem() и removeNamedItem().

В качестве примера, рассмотрим элемент р и его атрибуты:

<p id="description" class="text" style="text-align: center;">I LOVE JAVASCRIPT</p>

JavaScript - свойство attributes

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

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

var elementP = document.getElementById("description");
var attrP = elementP.attributes;
for (var i=0; a<attrP.length; i++) {
  console.log(attrP[i].name + " = " + attrP[i].value);
}
У любого атрибута есть свойства name и value, с помощью которых Вы можете получить имя атрибута и его значение.

Например, найдём у элемента р атрибут class, и изменим его значение на "info".

var elementP = document. getElementById("description");
var attrP = elementP.attributes;
for (var i=0; i<attrP.length; i++) { 
  if (attrP[i].name == "class")
    attrP[i].value = "info";
}

JavaScript - методы объекта NamedNodeMap

Данный метод возвращает значение атрибута (узла), имеющего указанное имя. Если данный атрибут (узел) не найден, то данный метод возвращает значение null.

namednodemap.getNamedItem("имя_aтpибyтa");

Метод getNamedItem() имеет один обязательный параметр - это строка, содержащая имя атрибута.

Данный метод добавляет атрибут (узел) к элементу (к NameNodeMap). Если атрибут (узел) с данным именем уже есть у элемента, то он будет заменён узлом, который мы добавляем к элементу (к NameNodeMap). Метод setNamedItem() возвращает в качестве значения null, если при добавлении атрибута (узла), у него не было атрибута (узла) с данным именем или сам атрибут (узел), если мы его заменили новым атрибутом (узлом).

namednodemap.setNamedItem("aтpибyт_yзeл");

Метод setNamedItem() имеет один обязательный параметр - это атрибут (узел), который необходимо добавить к элементу (к NameNodeMap).

Для создания атрибута (узла) необходимо воспользоваться методом document.createAttribute(), которому в качестве параметра необходимо передать имя атрибута (узла). Далее данному атрибуту (узлу) необходимо присвоить значение с помощью свойства value. После этого данный атрибут уже можно добавить к элементу (к NameNodeMap), посредством передачи его в качестве параметра методу setNamedItem().

Например:

//создаём новый атрибут и сохраняем его в переменную newAttr 
//в качестве параметра указываем, что будем создавать атрибут style 
var newAttr = document.createAttribute("style");
//присваиваем значение атрибуту с помощью свойства value 
newAttr.value = "text-align: center;";
//добавляем атрибут к элементу (к NameNodeMap) 
attrDescription.setNamedltem(newAttr);

Данный метод удаляет атрибут (узел) с указанным именем в объекте NameNodeMap. Метод removeNamedItem() возвращает в качестве значения атрибут (узел) элемента, который мы удалили.

namednodemap.removeNamedItem("имя_атрибута");

Метод removeNamedItem() имеет один обязательный параметр - это атрибут (узел), который необходимо удалить у элемента (из коллекции NameNodeMap).

Например, написать код на языке JavaScript выполняющий следующее:

  1. Получить элемент по id="description".
  2. Получить объект NameNodeMap, содержащий все атрибуты элемента, полученного на предыдущем шаге.
  3. Используя метод getNamedItem(), вывести в консоль значения атрибута id.
  4. Добавить к элементу атрибут style="".
  5. Удалить атрибут класс у элемента.

var elementDescription = document.getElementById("description");

var attrsDescription = elementDescription.attributes;

var idDescription = attrsDescription.getNamedItem("id");
console.log(idDescription);

var attrStyle = document.createAttribute("style");
//присваиваем значение атрибуту с помощью свойства value 
attrStyle.value = "padding:20px;";
//добавляем атрибут к элементу (к NameNodeMap) 
attrsDescription.setNamedItem(attrStyle);

attrsDescription.removeNamedItem("class");

JavaScript - методы объекта NamedNodeMap

Кроме свойства attributes, которое возвращает атрибуты в виде NameNodeMap, у каждого элемента (узла) есть методы (getAttribute(), setAttribute(), removeAttribute(), hasAttribute()), которые позволяют работать с его атрибутами более просто.

JavaScript - методы элементов для работы с его атрибутами

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

Метод getAttribute() возвращает значение атрибута, указанного в качестве параметра. Если данного атрибута у элемента нет, то данный метод возвращает пустую строку ("") или null.

Например, получить значение атрибута rel у элемента a, имеющего id="myAnchor":

//получить элемент с id="myAnchor"
var myAnchor = document.getElementById("myAnchor");
//получить значение атрибута rel у элемента
myAnchor.getAttribute("rel");
//выведем значение атрибута в консоль браузера
console.log(myAnchor);
element.setAttribute("имя_атрибута", "значение_атрибута")

Метод setAttribute() добавляет указанный атрибут к элементу и присваивает ему указанное значение. Если указанный атрибут у элемента уже есть, то данный метод изменяет только его значение.

Например, изменить значение атрибута target на "_self" только тем элементам a в документе, которые имеют данный атрибут:

//получить все элементы a в HTML документе
var elementsAnchor = document.getElementsByTagName("A");
//перебрать полученную коллекцию элементов в цикле
for (var i = 0; i< elements.length; i++) {
  //если указанный элемент имеет атрибут target, то
  if (elementsAnchors[i].hasAttribute("target")) {
    //установить атрибуту targer значение _self
    elementsAnchors[i].setAttribute("target","_self");
  }
}
element.removeAttribute("имя_атрибута")

Метод removeAttribute() удаляет указанный атрибут у элемента. Данный метод имеет один обязательный параметр - это строка, содержащая имя атрибута, который Вы хотите удалить у элемента. Данный метод в качестве результата ничего не возвращает.

Например, удалить атрибут href у всех элементов a в документе:

//получить в HTML документе все элементы a, имеющие атрибут href 
var elementsAnchor = document.querySelector("a[href]");
//перебрать полученную коллекцию в цикле
for (var i = 0; i< elementsAnchor.length; i++) {
  //удалить атрибут href у элемента
  elementsAnchors[i].removeAttribute("href");
}
element.hasAtrribute("имя_атрибута")

Метод hasAtrribute() возвращает true, если указанный атрибут существует у элемента. В противном случае данный метод возвращает false. Данный метод имеет один обязательный параметр - это строка, содержащая имя атрибута, который Вы хотите проверить на существование у элемента.

Например, удалить атрибут style только у тех элементов на странице, которые имеют данный атрибут:

//получить все элементы, находящиеся в текущем HTML документе 
var allElements = document.getElementByTagName("*");
//перебрать полученную коллекцию в цикле
for (var i = 0; i < allElements.length; i++) {
  //если указанный элемент имеет атрибут style, то
  if (allElements[i].hasAttribute("style")) {
    //удалить атрибут style у элемента
    allElements[i].removeAttribute("style");
  }
}
node.hasAttributes()

Метод hasAttributes() возвращает true если указанный узел имеет атрибуты. В противном случае данный метод возвращает false. Если указанный узел не является элементом, то данный метод всегда возвращает значение false. Метод hasAttributes не имеет параметров.

Например, определить имеет ли элемент с id="main" атрибуты:

//получить элемент c id="main"
var elementMain = document.getElementById("main");
//вывести в консоль значение, которое возвратит метод hasAttributes()
console.log(elementMain.hasAttributes());
  1. Вывести в консоль все элементы HTML документа, которые имеют атрибут id.
  2. Добавить атрибут rel="nofollow" все ссылкам документа, которые имеют атрибут href, значение которого начинается на http.


   JavaScript и jQuery 0    2971 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.