OuterHTML: HTML код элемента целиком

Свойство outerHTML содержит HTML код элемента целиком.

Пример чтения outerHTML:

<div>Привет <b>Мир</b></div>

<script>

var div = document.body.children[0];

alert(div.outerHTML); // <div>Привет <b>Мир</b></div>

</script>

Изменить outerHTML элемента невозможно.

Здесь мы остановимся чуть подробнее. Дело в том, что технически свойство outerHTML доступно на запись. Но при этом элемент не меняется, а заменяется на новый, который тут же создаётся из нового outerHTML.

При этом переменная, в которой изначально был старый элемент, и в которой мы «перезаписали» outerHTML, остаётся со старым элементом.

Это легко может привести к ошибкам, что видно на примере:

<div>Привет, Мир!</div>

<script>

var div = document.body.children[0];

div.outerHTML = '<p>Новый элемент!</p>'; // заменяем div.outerHTML на <p>...</p>

alert(div.outerHTML); // <div>Привет, Мир!</div> //но содержимое осталось

</script>

То, что произошло в примере выше – это замена div в документе на новый узел <p>...</p>. При этом переменная div не получила этот новый узел! Она сохранила старое значение, чтение из неё это отлично показывает.

Записать новый HTML в outerHTML можно, но нужно понимать, что это никакое не изменение свойств узла, а создание нового.

Новосозданный узел не доступен сразу в переменной, хотя его, конечно, можно получить из DOM.

Текст: textContent

Свойство textContent содержит только текст внутри элемента, за вычетом всех <тегов>.

Например:

<div>

<h1>Срочно в номер!</h1>

<p>Марсиане атакуют людей!</p>

</div>

<script>

var news = document.body.children[0];

alert(news.textContent); // Срочно в номер! Марсиане атакуют людей!

</script>

Как мы увидим из примера выше, возвращается в точности весь текст, включая переводы строк и пробелы, но без тегов. Иными словами, elem.textContent возвращает конкатенацию всех текстовых узлов внутри elem.

Не сказать, чтобы эта информация была часто востребована. Гораздо полезнее — это возможность записать текст в элемент, причём именно как текст!

Вряд ли мы хотим, чтобы посетители могли вставить в наш сайт произвольный HTML-код. Присваивание через textContent – это один из способов от этого защититься.

Нестандартное свойство innerText

У него, в некотором роде, преимущество перед textContent в том, что оно по названию напоминает innerHTML, его проще запомнить. Однако, свойство innerText не следует использовать, так как оно не стандартное и не будет стандартным.

Это свойство возвращает текст не в том виде, в котором он в DOM, а в том, в котором он виден – как если бы мы выбрали содержимое элемента мышкой и скопировали его. В частности, если элемент невидим, то его текст возвращён не будет. Это довольно странная особенность существует по историческим причинам и скорее мешает, чем помогает.

Впрочем, при записи значения innerText работает так же, как и textContent.

Итого

Некоторые основные свойства DOM-узлов:

· innerHTML — Внутреннее содержимое узла-элемента в виде HTML. Можно изменять.

· outerHTML — Полный HTML узла-элемента. При записи в elem.outerHTML переменная elem сохраняет старый узел.

· textContent — Содержит только текст внутри элемента, за вычетом всех тегов. Можно использовать для защиты от вставки произвольного HTML кода

Исследование элементов

У DOM-узлов есть очень много свойств, с которыми мы можем с легкостью работать:

· value – значение для INPUT, SELECT или TEXTAREA

· id – идентификатор

· href – адрес ссылки

· …многие другие…

Узнать, какие свойства есть у данного типа элементов просто. Нужно либо посмотреть список элементов HTML5 и найти в нём интересующий вас элемент и прочитать секцию с interface.

Если же интересуют особенности конкретного браузера – элемент всегда можно вывести в консоль вызовом console.dir(элемент).

Метод console.dir выводит элемент как объект, который можно развернуть и исследовать, например:

console.dir(document); // в консоли можно будет увидеть все свойства DOM-объекта document

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

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

Например, если тег выглядит как <body id="page">, то у объекта будет свойство body.id = "page".

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Атрибуты HTML

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

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