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


Когда браузер загружает страницу, он «читает» («парсит») 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>

 

<div class="alert">

<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>

 

<script>

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

div.className = "alert";

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

 

document.body.append(div);

</script>

 

Методы для различных вариантов вставки:

node.append(…nodes or srtings) – добавляет узлы или строки в конце node;

node.prepend(…nodes or srtings) – добавляет узлы или строки в начало node;

node.before(…nodes or srtings) – добавляет узлы или строки до node;

node.after(…nodes or srtings) – добавляет узлы или строки после node;

node.replaceWith(…nodes or srtings) – заменяет node заданными узлами или строками.

Древний метод добавления содержимого на веб – страницу: document.write

<p>Где-то на странице...</p>

<script>

document.write('<b>Привет из JS</b>');

</script>

<p>Конец</p>


Дата добавления: 2021-01-26; просмотров: 369;

Поиск по сайту:

Воспользовавшись поиском можно найти нужную информацию на сайте.

Поделитесь с друзьями:

Считаете данную информацию полезной, тогда расскажите друзьям в соц. сетях.
Poznayka.org - Познайка.Орг - 2016-2024 год. Материал предоставляется для ознакомительных и учебных целей.
Генерация страницы за: 0.012 сек.