Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...

Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...

Интересное:

Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...

Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...

Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Сверху documentElement и body

2019-12-21

323

0.00 из 5.00 0 оценок

Заказать работу

Послание по JS № 9

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

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

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

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

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

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

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

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

Например:

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

Навигация по DOM-элементам

После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект Document можно представить, как дерево объектов Node, как изображено на рисунке ниже. Тип Node определяет свойства, позволяющие перемещаться по такому дереву.

Доступ к DOM начинается с объекта document. Из него можно добраться до любых узлов.

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

Сверху documentElement и body

Самые верхние элементы дерева доступны напрямую из document.

<HTML> = document.documentElement

Первая точка входа – document.documentElement. Это свойство ссылается на DOM-объект для тега <html>.

<BODY> = document.body

Вторая точка входа – document.body, который соответствует тегу <body>.

В DOM активно используется null

В мире DOM в качестве значения, обозначающего «нет такого элемента» или «узел не найден», используется не undefined, а null.

Дети: childNodes, firstChild, lastChild

Здесь и далее мы будем использовать два принципиально разных термина.

Дочерние элементы (или дети) – элементы, которые лежат непосредственно внутри данного. Например, внутри <HTML> обычно лежат <HEAD> и <BODY>.

Потомки – все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево DOM.

Псевдо-массив childNodes хранит все дочерние элементы, включая текстовые.

Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему элементу.

При наличии дочерних узлов всегда верно:

elem.childNodes[0] === elem.firstChild

elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

Коллекции – не массивы

В них нет методов массивов, таких как forEach, map, push, pop и других. Именно поэтому childNodes и называют «коллекция» или «псевдомассив».

Можно для перебора коллекции использовать обычный цикл

for(var i=0; i<elems.length; i++)

Соседи и родитель

Доступ к элементам слева и справа можно получить по ссылкам previousSibling или nextSibling.

Родитель доступен через parentNode. Если долго идти от одного элемента к другому, то рано или поздно дойдёшь до корня DOM, то есть до document.documentElement, а затем и document.

Итог по навигации

В DOM доступна навигация по соседним узлам через ссылки:

· По любым узлам.

· Только по элементам.

Содержимое элемента и работа с ним

InnerHTML: содержимое элемента

Свойство innerHTML описано в спецификации HTML 5 – embedded content.

Оно позволяет получить HTML-содержимое элемента в виде строки.

В innerHTML можно и читать и писать, то есть можно как прочитать содержимое тега, так и изменить его.

Значение, возвращаемое innerHTML – всегда валидный HTML-код. При записи можно попробовать записать что угодно, но браузер исправит ошибки:

<body>

document.body.innerHTML = '<b>тест'; // незакрытый тег

alert(document.body.innerHTML); // <b>тест</b> (исправлено)

</script>

</body>

Текст: textContent

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

Оно поддерживается везде, кроме IE8-.

Например:

<div>

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

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

</div>

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

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

</script>

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

Иными словами, elem.textContent возвращает конкатенацию всех текстовых узлов внутри elem.

Не сказать, чтобы эта информация была часто востребована.

Гораздо полезнее возможность записать текст в элемент, причём именно как текст!

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

Итого

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

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

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

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

Послание по JS № 9

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

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

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

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

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

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

Например:

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

Навигация по DOM-элементам

Доступ к DOM начинается с объекта document. Из него можно добраться до любых узлов.

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

Сверху documentElement и body

Самые верхние элементы дерева доступны напрямую из document.

<HTML> = document.documentElement

Первая точка входа – document.documentElement. Это свойство ссылается на DOM-объект для тега <html>.

<BODY> = document.body

Вторая точка входа – document.body, который соответствует тегу <body>.

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

Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...

Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...

Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...