Атрибуты и свойства элементов документа (HTML, XHTML)

Атрибуты элементов HTML

Атрибут элемента HTML — это сущность, которая используется для определения характеристик html-элемента.

Атрибут элемента помещается внутри открытого тега элемента и состоит из двух частей:

имя атрибута — это свойство элемента, которое вы хотите определить или изменить;
значение — это значение, которое вы хотите установить для указанного выше свойства (значение атрибута всегда помещается в кавычки).

Например:

 <p align="right">Lorem ipsum dolor sit amet.</p> // выравнивание абзаца по правому краю (align - имя атрибута, "right" - значение)

1	<p align="right">Lorem ipsum dolor sit amet.</p> // выравнивание абзаца по правому краю (align - имя атрибута, "right" - значение)

Имена и значения атрибутов в HTML не зависят от регистра, однако консорциум World Wide Web (W3C) рекомендует использовать атрибуты и значения атрибутов в нижнем регистре.

Атрибуты могут быть стандартными и нестандартными, причем стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут "type" является стандартным для элемента <input> (HTMLInputElement), но не является стандартным для <body> (HTMLBodyElement).

Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

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

Атрибуты элемента (в отличие от свойств элемента как объекта DOM):

всегда являются строками (значение, присвоенное атрибуту, станет строкой);
их имя нечувствительно к регистру (это HTML);
видны в innerHTML.

Пример

<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2>

<script>

  let myAttr = document.getElementById("myMeta");
  console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2>

  myAttr.hasAttribute("LANG"); // true (нечувствителен к регистру)
  myAttr.hasAttribute("myAttr"); // true
  myAttr.getAttribute("myAttr"); // 'myAttr' (получаем значение нестандартного атрибута)
  myAttr.setAttribute("myAttr", "newMyAttr"); // (изменим значение атрибута myAttr)
  myAttr.getAttribute("myAttr"); // 'newMyAttr'
  myAttr.removeAttribute("myAttr");
  console.log(myAttr); // <h2 id="myMeta" lang="ru">Заголовок H2</h2>

</script>

<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2>

let myAttr = document.getElementById("myMeta");

console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2>

myAttr.hasAttribute("LANG"); // true (нечувствителен к регистру)

myAttr.hasAttribute("myAttr"); // true

myAttr.getAttribute("myAttr"); // 'myAttr' (получаем значение нестандартного атрибута)

myAttr.setAttribute("myAttr", "newMyAttr"); // (изменим значение атрибута myAttr)

myAttr.getAttribute("myAttr"); // 'newMyAttr'

myAttr.removeAttribute("myAttr");

console.log(myAttr); // <h2 id="myMeta" lang="ru">Заголовок H2</h2>

</script>

[свернуть]

Свойства элемента DOM

Основой HTML-документа являются теги, которые в соответствии с объектной моделью документа DOM являются объектами и, соответственно, доступны при помощи JavaScript и могут использоваться для изменения страницы.

У каждого элемента есть некоторый набор стандартных атрибутов (свойств), описанных в стандарте HTML именно для этого элемента (тега), например для <a> это будут href, name, а для <img> это будут src, alt, и т.д. Итак:

атрибут элемента – это код (строки) HTML;
свойство элемента – это поле DOM-объекта.

Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.

Например:

<p align="right" nonStandart="LOST">Lorem ipsum dolor sit amet.</p>

<script>

  let result;
  result = document.querySelector("p").align // right (стандартное свойство)
  result = document.querySelector("p").nonStandart // undefined (нестандартное свойство)

</script>

<p align="right" nonStandart="LOST">Lorem ipsum dolor sit amet.</p>

let result;

result = document.querySelector("p").align // right (стандартное свойство)

result = document.querySelector("p").nonStandart // undefined (нестандартное свойство)

</script>

DOM-узлы – это обычные объекты JavaScript, которые можно изменять:

создавать новые свойства или методы;
изменять встроенные прототипы (например, Element.prototype, добавляя новые свойства и методы ко всем элементам).

Пример:

<p align="right" nonStandart="LOST">Lorem ipsum dolor sit amet.</p>

<script>
  let result;

// добавляем свойство newProp в элемент <p>
  document.querySelector("p").newProp = "New property"
  result = document.querySelector("p").newProp // New property

// изменяем прототип, добавляя свойство sayHello во все элементы
  Element.prototype.sayHello = "Hello!"
  result = document.body.sayHello // Hello!
  result = document.querySelector("p").sayHello // Hello!

</script>

<p align="right" nonStandart="LOST">Lorem ipsum dolor sit amet.</p>

let result;

// добавляем свойство newProp в элемент <p>

document.querySelector("p").newProp = "New property"

result = document.querySelector("p").newProp // New property

// изменяем прототип, добавляя свойство sayHello во все элементы

Element.prototype.sayHello = "Hello!"

result = document.body.sayHello // Hello!

result = document.querySelector("p").sayHello // Hello!

</script>

Методы работы с атрибутами элементов документа

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

при помощи методов, работающих со значением, которое находится в HTML:
- elem.hasAttribute(nameAttr) – проверяет наличие атрибута;
- elem.getAttribute(nameAttr) – получает значение атрибута;
- elem.setAttribute(nameAttr, value) – устанавливает атрибут;
- elem.removeAttribute(nameAttr) – удаляет атрибут;
свойства elem.attributes, которое содержит перебираемую коллекцию NamedNodeMap{} атрибутов элемента (стандартных и нестандартных) в виде объектов со свойствами name и value.

Когда стандартный атрибут элемента изменяется, соответствующее свойство автоматически обновляется, и наоборот.

DOM-свойства не всегда являются строками. Например:

<input id="input" type="checkbox" checked> checkbox
<div id="div" style="color:red;font-size:16px">Hello</div>

<script>

console.log(input.getAttribute('checked')); // значение атрибута: "" (пустая строка)
console.log(input.checked); // значение свойства: true

// атрибут style – строка, но свойство style является объектом:
console.log(div.getAttribute('style')); // строка "color:red;font-size:16px"
console.log(div.style); // объект CSSStyleDeclaration {0: 'color', 1: 'font-size', …}
console.log(div.style.color); // red

</script>

<input id="input" type="checkbox" checked> checkbox

<div id="div" style="color:red;font-size:16px">Hello</div>

console.log(input.getAttribute('checked')); // значение атрибута: "" (пустая строка)

console.log(input.checked); // значение свойства: true

// атрибут style – строка, но свойство style является объектом:

console.log(div.getAttribute('style')); // строка "color:red;font-size:16px"

console.log(div.style); // объект CSSStyleDeclaration {0: 'color', 1: 'font-size', …}

console.log(div.style.color); // red

</script>

Нестандартные атрибуты, dataset

Примеры с https://learn.javascript.ru

Нестандартные атрибуты элементов могут использоваться:

для передачи пользовательских данных из HTML в JavaScript;
для обозначения (маркирования) HTML-элементов для JavaScript.

Использование атрибутов в некоторых случаях может быть предпочтительнее использования классов, т.к. атрибутом удобнее управлять: его состояние может быть изменено методом elem.setAttribute(nameAttr, value).

Пример маркирования элемента для передачи данных

<!-- маркирование  div нестандартным атрибутом  show-info для вывода значения поля "name" -->
  <div show-info="name"></div>
<!-- маркирование  div нестандартным атрибутом  show-info для вывода значения поля "age" -->
  <div show-info="age"></div>

<script>
  let user = {
    name: "Pete",
    age: 25
  };

// цикл находит элемент с нестандартным атрибутом  show-info и показывает запрошенную информацию
  for (let div of document.querySelectorAll('[show-info]')) { // NodeList(2) [div, div]
    // вставить соответствующую информацию в поле
    let field = div.getAttribute('show-info');
    div.textContent = user[field]; // сначала Pete -  в name, потом 25 - в age
  }

// или используя forEach()
  Array.from(document.querySelectorAll('[show-info]')).forEach(element => {
    let field = element.getAttribute('show-info');
    element.textContent = user[field];
  })
</script>

let user = {

name: "Pete",

age: 25

};

// цикл находит элемент с нестандартным атрибутом show-info и показывает запрошенную информацию

for (let div of document.querySelectorAll('[show-info]')) { // NodeList(2) [div, div]

// вставить соответствующую информацию в поле

let field = div.getAttribute('show-info');

div.textContent = user[field]; // сначала Pete - в name, потом 25 - в age

}

// или используя forEach()

Array.from(document.querySelectorAll('[show-info]')).forEach(element => {

let field = element.getAttribute('show-info');

element.textContent = user[field];

})

</script>

[свернуть]

Пример маркирования элемента для изменения его стиля

/* стили зависят от пользовательского (нестандартного) атрибута "order-state" */
<style>

  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }
</style>

<div class="order" order-state="new">
  A new order.
</div>
<div class="order" order-state="pending">
  A pending order.
</div>
<div class="order" order-state="canceled">
  A canceled order.
</div>

/* стили зависят от пользовательского (нестандартного) атрибута "order-state" */

<style>

.order[order-state="new"] {

color: green;

}

.order[order-state="pending"] {

color: blue;

}

.order[order-state="canceled"] {

color: red;

}

</style>

A new order.

</div>

A pending order.

</div>

A canceled order.

</div>

[свернуть]

Чтобы избежать конфликтов нестандартных (пользовательских) атрибутов со стандартом языка, используют атрибуты вида data-*, которые зарезервированы для использования программистами и доступны в свойстве dataset.

Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.

Атрибуты, состоящие из нескольких слов, например data-order-state, становятся свойствами, записанными с помощью "верблюжьей" нотации: dataset.orderState.

Пример

<div data-info="name" data-my-age="age">Pete, 25</div>

<script>
  let result;

  result = document.querySelector("div").getAttribute("data-info");  // name
  result = document.querySelector("div").getAttribute("data-my-age");  // age
  result = document.querySelector("div").dataset;  // DOMStringMap {info: 'name', myAge: 'age'}
  result = document.querySelector("div").dataset.info;  // name

  console.log(result);
</script>

let result;

result = document.querySelector("div").getAttribute("data-info"); // name

result = document.querySelector("div").getAttribute("data-my-age"); // age

result = document.querySelector("div").dataset; // DOMStringMap {info: 'name', myAge: 'age'}

result = document.querySelector("div").dataset.info; // name

console.log(result);

</script>

[свернуть]

ВАЖНО! В большинстве ситуаций предпочтительнее использовать DOM-свойства, а атрибуты только тогда, когда нужны именно атрибуты, например:

нужен нестандартный атрибут (но если он начинается с data-, тогда нужно использовать dataset);
необходимо получить оригинальное значение, которое написано в HTML (например, свойство href – всегда полный URL, а значение атрибута может отличаться).

Пример

<a data-info="name" data-my-age="age" href="/site.com">Pete, 25</a>

<script>
  let result;

  result = document.querySelector("a").getAttribute("href");  // /site.com (оригинальное значение HTML)
  result = document.querySelector("a").href;  // http://localhost:5503/site.com (для примера)

  console.log(result);
</script>

let result;

result = document.querySelector("a").getAttribute("href"); // /site.com (оригинальное значение HTML)

result = document.querySelector("a").href; // http://localhost:5503/site.com (для примера)

console.log(result);

</script>

[свернуть]

Атрибуты элементов HTML

Атрибуты элемента (в отличие от свойств элемента как объекта DOM):

Свойства элемента DOM

Методы работы с атрибутами элементов документа

Нестандартные атрибуты, dataset

Добавить комментарий Отменить ответ