История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Топ:
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...
Техника безопасности при работе на пароконвектомате: К обслуживанию пароконвектомата допускаются лица, прошедшие технический минимум по эксплуатации оборудования...
Основы обеспечения единства измерений: Обеспечение единства измерений - деятельность метрологических служб, направленная на достижение...
Интересное:
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Отражение на счетах бухгалтерского учета процесса приобретения: Процесс заготовления представляет систему экономических событий, включающих приобретение организацией у поставщиков сырья...
Дисциплины:
2020-05-10 | 219 |
5.00
из
|
Заказать работу |
|
|
Свойство 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-атрибутов.
|
|
Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!