Атрибуты и свойства

Для успешного освоения JavaScript необходимо понимать, как он взаимодействует с объектной моделью документа (DOM). В этом руководстве рассматриваются атрибуты и свойства DOM, объясняется, как их читать, изменять и синхронизировать для динамического управления веб-страницами.

Введение в DOM в JavaScript

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

Различия между атрибутами и свойствами

Хотя термины «атрибуты» и «свойства» часто используются как синонимы, в контексте DOM они имеют различное значение:

• Атрибуты: Определяются в HTML-коде. Они предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда являются строками и доступны через методы getAttribute() и setAttribute().
• Свойства: Это характеристики объектов DOM, представляющих элементы HTML. Свойства могут иметь любой тип данных, например, логический, строковый или числовой, и доступны напрямую с помощью точечной нотации.

Примечание о синхронизации: Для некоторых атрибутов (например, class, id, value и checked) изменение атрибута автоматически обновляет соответствующее свойство, и наоборот. Однако такая двусторонняя синхронизация не гарантируется для всех атрибутов.

Пример кода: Доступ к атрибутам и свойствам

---

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

Result

Try it Yourself »

Управление элементами DOM

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

Установка атрибутов

Используйте метод setAttribute() для добавления нового атрибута или изменения значения существующего атрибута на элементе HTML.

Пример кода: Установка атрибутов

---

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

Result

Try it Yourself »

Этот фрагмент кода изменяет атрибут class элемента div на «changed».

Удаление атрибутов

Чтобы полностью удалить атрибут из элемента HTML, используйте метод removeAttribute(). Это полезно, когда нужно убрать с элемента конкретное поведение или стиль, заданный атрибутом.

Пример:demoElement.removeAttribute("class");

Изменение свойств

Свойства элементов DOM можно легко изменять напрямую с помощью точечной нотации, что обеспечивает более гибкое управление характеристиками элемента.

Пример кода: Изменение свойств

---

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

Result

Try it Yourself »

В этом примере изменяется свойство className элемента div, демонстрируя, как свойства могут использоваться для динамического управления характеристиками элемента.

Пользовательские атрибуты данных

Разработчики также могут определять пользовательские атрибуты данных с префиксом data-, что особенно полезно для хранения дополнительной информации, не имеющей визуального представления.

Пример кода: Пользовательские атрибуты данных

---

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Result

Try it Yourself »

Заключение

Понимание и эффективное использование атрибутов и свойств DOM может значительно расширить ваши возможности как разработчика JavaScript. Освоив эти концепции, вы сможете динамически управлять элементами веб-страниц и создавать более насыщенные и интерактивные веб-приложения. Эти знания необходимы любому разработчику, стремящемуся продвинуться в области веб-разработки.

Практика

Какие утверждения точно описывают различия между атрибутами и свойствами в DOM, как объясняется в руководстве по JavaScript?

Атрибуты определяются в HTML и могут быть только строками, тогда как свойства представляют эти атрибуты в JavaScript и могут иметь любой тип.Метод `getAttribute()` может получить значение любого HTML-атрибута в виде строки, тогда как прямой доступ к свойству может вернуть атрибут в его исходном типе.Атрибуты в DOM могут быть как строками, так и другими типами, аналогично свойствам.Все свойства объекта DOM автоматически синхронизируются со своими соответствующими атрибутами при изменении любого из них.Использование `setAttribute()` для изменения атрибута элемента DOM автоматически обновляет соответствующее свойство, если оно существует.