Загрузка...

Изменение HTML

Бирка парома уже на странице: лодка называется Gull, время 09:10, заметка говорит Boarding. Менять HTML значит писать новое содержимое в элемент, который уже в руках. boat.textContent = "Heron" кладёт слова Heron как текст. note.textContent = "<em>Late</em>" показывает эти символы, и note.querySelector("em") равен null. note.innerHTML = "<em>Late</em>" строит em, чей текст Late. После этого note.textContent равен Late, а note.innerHTML всё ещё содержит теги. Вторая запись, note.innerHTML = "Dock 2", удаляет этот em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") сохраняет Dock 2 и добавляет gate B, заметка читается Dock 2 gate B. Времени ничего не присваивают, поэтому оно остаётся 09:10.

Запись, а не новый поиск

Прошлая страница сравнивала способы найти узел. Эта не считает коллекцию, не читает индекс и не идёт по parentElement. getElementById только отдаёт бирку. Урок в том значении, которое ты присваиваешь.

Что каждая запись оставляет в заметке

Заметка начинается как Boarding. Читай строки по порядку. Каждое присваивание заменяет заметку или удлиняет её.

📊 Что каждая запись оставляет в заметке

Запись Что видно Что остаётся Легко спутать
textContent = "Heron" у лодки Heron один текстовый узел элемент с именем Heron
textContent = "<em>Late</em>" символы <em>Late</em> нет элемента em настоящий em
innerHTML = "<em>Late</em>" Late один em ждать теги внутри textContent
innerHTML = "Dock 2" Dock 2 em исчез em рядом с Dock 2
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 плюс span innerHTML, который убирает Dock 2

textContent хранит строку и не разбирает теги. innerHTML разбирает теги и выбрасывает каждого ребёнка, который уже был у элемента. insertAdjacentHTML тоже разбирает теги, но beforeend ставит новые узлы после текущего содержимого. Имя лодки, набранное у окна, идёт в textContent. Та же строка в innerHTML примет знак «меньше» за разметку.

Прочитай бирку до записи

Файл открывается тремя значениями. Присваивания ещё не было.

Читать бирку

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

В журнале Gull, 09:10 и Boarding. Время — отдельный абзац. Дальнейшие записи не трогают when.

Слова остаются словами

textContent заменяет каждого ребёнка одним текстовым узлом. Символы, похожие на тег, остаются символами.

Обычные слова

javascript 
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));

Первая строка — Heron. Вторая — символы <em>Late</em>. Третья — null. Заметка показывает тег как текст и не построила элемент.

innerHTML строит элемент

Отдай те же символы в innerHTML. Разборщик превращает строку в узлы и заменяет то, что было в заметке.

Разобранная разметка

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

Первая строка — Late. Вторая — <em>Late</em>, потому что innerHTML возвращает разметку вместе с тегами. Третья — false: em есть, значит это не null. Видимые слова и строка разметки — два чтения одного элемента.

Следующий innerHTML стирает em

Новое значение innerHTML заменяет всю заметку. em не остаётся рядом с новым текстом.

Заменить снова

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

Первая строка — Dock 2. Вторая — null. Boarding уже не было. Эта запись уносит и em.

Добавь gate B и сохрани Dock 2

insertAdjacentHTML("beforeend", ...) разбирает фрагмент и ставит его в конец. Эта строка начинается с пробела, чтобы две части остались двумя словами. Другие позиции есть. На этой странице только beforeend.

Добавить в конец

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

Первая строка — Dock 2 gate B. Вторая — gate B. Dock 2 всё ещё в заметке. Та же строка span через innerHTML удалила бы Dock 2.

Строка под биркой

Скрипт стоит в конце body, когда бирка уже есть. Он запоминает слово Late до того, как Dock 2 заменит em, и пишет строку из имени лодки, этого слова и заметки после добавления gate B.

Демо страницы — бирка парома

html 
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>

Строка читается Heron / Late / Dock 2 gate B. Время по-прежнему 09:10. Late в строке — слово, сохранённое до стирания. Сама заметка больше не говорит Late. Следующая страница меняет CSS у таких элементов и не добавляет новый способ их выбирать.

Проверь бирку

  1. Выведи три начальных текста и жди Gull, 09:10 и Boarding
  2. Поставь лодке Heron, а заметке символы em; жди эту строку и em равный null
  3. Поставь innerHTML в строку em; жди textContent Late, innerHTML всё ещё с тегами, и em не null
  4. Поставь innerHTML в Dock 2 и жди null для em
  5. Добавь span через beforeend и жди Dock 2 gate B, затем текст span — gate B
  6. Прочитай строку и жди Heron / Late / Dock 2 gate B; прочитай время и жди 09:10

Промахи на этой бирке

Страница всё равно открывается. Присваивание записало не тот вид значения.

  • Кладёшь имя, набранное у окна, в innerHTML, где < становится разметкой
  • Ждёшь, что textContent = "<em>Late</em>" создаст em
  • Читаешь textContent после записи em и ждёшь теги в этой строке
  • Снова присваиваешь innerHTML и ждёшь, что em останется
  • Добавляешь gate B через innerHTML и теряешь Dock 2
  • Теряешь ведущий пробел, и заметка читается Dock 2gate B
  • Ставишь style здесь; следующая страница меняет CSS
  • Зовёшь createElement здесь; более поздняя страница строит новые узлы

Унеси это

  • textContent пишет простой текст и не разбирает теги
  • innerHTML разбирает теги и заменяет каждого ребёнка
  • После записи em textContent равен Late, а innerHTML всё ещё содержит теги
  • Второй innerHTML удаляет em
  • insertAdjacentHTML("beforeend", ...) добавляет разметку и сохраняет Dock 2
  • Время остаётся 09:10, потому что ему ничего не присваивают
  • Строка читается Heron / Late / Dock 2 gate B

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 46 из 47
Javascript Урок