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

<5 6 789 10 11 >

Когда браузер загружает страницу, он «читает» («парсит») HTML и генерирует из него DOM – объекты. Для узлов – элементов большинство стандартных HTML – атрибутов автоматически становятся свойствами DOM – объектов. Например, для такого тега <body id = “page”> у DOM – объекта будет такое свойство body.id=”page”.

DOM - свойства

DOM – узлы – это обычные объекты JavaScript. Их можно изменять. Например, создадим новое свойство для document.body:

document.body.myData = {

name: 'Caesar',

title: 'Imperator'

};

alert(document.body.myData.title); // Imperator

Методы для работы с атрибутами:

elem.hasAttribute(name) – проверяет на наличие;

elem.getAttribute(name) – получает значение;

elem.setAttribute(name, value) – установить значение;

elem.removeAttribute(name) – удаляет атрибут;

elem.attributes – это коллекция всех атрибутов.

Изменение документа

Модификации DOM – это ключ к созданию «живых» страниц. Рассмотрим, как создавать новые элементы «на лету» и изменять уже существующие.

Пример: показать сообщение

<style>

.alert {

padding: 15px;

border: 1px solid #d6e9c6;

border-radius: 4px;

color: #3c763d;

background-color: #dff0d8;

}

</style>

<strong>Всем привет!</strong> Вы прочитали важное сообщение.

</div>

Данный пример реализован на HTML + CSS. Теперь создадим такой же div, используя JavaScript. Предположим, что стили находятся в HTML или во внешнем файле CSS.

Создать элемент (DOM – узел) можно двумя методами:

1. document.createElement(tag) – создает новый элемент с заданным тегом:

let div = document.createElement('div');

2. document.createTextNode(text) – создаем новый текстовый узел с заданным текстом:

let textNode = document.createTextNode('А вот и я');

Создание сообщения

В нашем примере сообщение – это div с классом alert и HTML в нем:

let div = document.createElement('div');

div.className = "alert";

div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";

Мы создали элемент, но пока он только в переменной. Мы его еще не можем видеть на странице, т.к. он не является частью документа.

Чтобы наш div появился, нам нужно его где–нибудь вставить в document. Например, в document.body. Для этого есть метод append, в нашем случае: document.body.append(div).

Полный код:

<style>

.alert {

padding: 15px;

border: 1px solid #d6e9c6;

border-radius: 4px;

color: #3c763d;

background-color: #dff0d8;

}

</style>

let div = document.createElement('div');

div.className = "alert";