HTML DOM
Файл HTML на диске хранит только символы. Браузер строит из него живое дерево, и это дерево называется DOM. На стекле остановки две строки: заголовок Market и заметка Stand clear. У открытой страницы document уже есть. new document() бросает ошибку, а new Document() — пустой документ, не это табло.
Дерево, а не округление
На странице объекта Math число приходило от одного общего объекта. Здесь ширину не округляют и момент через new Date не собирают. Спуск идёт от document: элемент html, затем head рядом с body, затем заголовок рядом с заметкой. Выбор элементов разными путями, правка разметки и создание узлов — на следующих страницах. Здесь учат форму дерева и читают два узла.
Где какая часть на табло
Каждая строка — место, на которое можно показать. Последний столбец — путаница, которая уводит в другое место.
📊 Места на этом табло
| Место | Что в руке | На этом табло | Легко перепутать |
|---|---|---|---|
document |
само дерево | вход, без имени тега | принять его за body |
document.documentElement |
элемент html | тег HTML |
назвать его заголовком |
document.head |
элемент head | сосед body | искать Market здесь |
document.body |
элемент body | родитель заголовка | текстовый узел |
h1#stop |
элемент заголовка | текст Market |
файл, сохранённый на диске |
| текст внутри заголовка | только символы | слово Market | элемент с id |
Заголовок и заметка — элементные дети body, значит они соседи. Слово Market не сосед заметки. Это текст внутри заголовка. tagName возвращает заглавные буквы, поэтому элемент html сообщает HTML. У узла document нет тега и нет родительского элемента.
Три имени наверху дерева
Эти три свойства называют внешние элементы. Ни одно из них не заголовок на стекле.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
Три строки: HTML, HEAD и BODY. Head и body оба дети элемента html, поэтому они соседи. Market нет в head. Заголовок вкладки в head — другая строка, не та, что на стекле.
Семья заголовка
id stop — ручка элемента заголовка. Его родительский элемент — body. Следующий элемент-сосед — заметка.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
Первая строка — BODY. Вторая — note. nextElementSibling перескакивает перевод строки и останавливается на абзаце. Предыдущий элемент-сосед — null, потому что перед заголовком в body нет элемента.
Слово и ручка
Читать элемент и читать символы — разные вещи.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
Первая строка — Market. Вторая — stop. textContent — это символы. id — ручка. Заметка говорит Stand clear, и этой строки нет на заголовке.
Сначала элементы, потом каждый узел
children считает только элементных детей. childNodes считает и текстовые узлы, включая переводы строк в файле табло. Запусти это на body, где только заголовок и заметка, не на странице урока и не на файле вывода ниже.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
С переводом строки перед заголовком, между двумя элементами и после заметки children.length равен 2, а childNodes.length равен 5. Три лишних узла — текст, и в них только пробел. Если оба тега стоят в одной строке, текстовые узлы исчезают и длины сходятся.
Имя, которого нет на табло
Спроси id, которого файл не писал.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
Первая строка — null. Вторая — false, потому что stop есть. null значит, что элемента нет, а не пустой заголовок. Новая строка в textContent меняет живое дерево в браузере. Файл HTML на диске по-прежнему говорит Market.
Одна строка на странице
Третий абзац показывает тег родителя и текст заголовка. Скрипт стоит в конце body, когда эти элементы уже есть.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
Абзац читается как BODY / Market. В этом файле до скрипта в body три элемента, поэтому длина 2 сюда не относится. Элемент script — ещё один ребёнок. Следующая страница выбирает элементы больше чем одним путём.
Проверь табло сам
- Выведи три внешних имени тегов и жди HTML, затем HEAD, затем BODY
- Выведи тег родителя заголовка и жди BODY
- Выведи id следующего элемента-соседа и жди note
- Выведи текст заголовка и жди Market, затем id и жди stop
- На табло из двух элементов жди длину children 2 и childNodes 5
- Выведи отсутствующий id и жди null, затем сравнение со stop и жди false
- Прочитай абзац и жди BODY / Market
Не то место
Страница открывается. Место, которое ты назвал, — не место заголовка.
- Вызвать
new document()или читатьnew Document()как это табло - Искать Market в
document.head - Считать слово Market элементным соседом заметки
- Читать
children.length, когда нужны все узлы, включая переводы строк - Читать
childNodes.length, когда нужны только заголовок и заметка - Читать
nullот отсутствующего id как пустую строку - Ждать, что запись в
textContentизменит файл на диске
Держи это порознь
document— дерево;documentElement— элемент htmlheadиbody— соседи под этим элементом html- Родитель заголовка — body; следующий элемент-сосед — заметка
textContent— символы;id— ручкаchildren— только элементы;childNodesвключает пробельный текст- Отсутствующий id — это
null; сохранённый файл — не живое дерево - Следующая страница выбирает элементы не только по одному id
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху