Раньше я делал небольшой обход DOM. Но это было с jQuery. Хотя я не считаю jQuery абсолютным злом, он скрывает большую часть процесса получения и изменения контента.
Как человек, пытающийся изучить этот бизнес веб-разработки, хорошо выполнять работу. Мне нужна была практика после того, как я так долго застрял в обучающем чистилище.
Проект игры на память Udacity, хотя и был сложным, дал мне эту практику. Я надеюсь, что в следующий раз, когда мне нужно будет что-то сделать с веб-страницей, эти инструменты придут мне на ум быстрее, чем раньше.
Во-первых, как добавить вещи в DOM:
document.createElement() — Создайте новый HTML-тег/элемент для добавления на свою страницу. Я использовал это много за последние пару недель и не забуду его в ближайшее время.
createDocumentFragment() — позволяет создать пакет элементов страницы, прикрепить их к виртуальному элементу DOM, а затем прикрепить весь пакет к реальной веб-странице. Это сокращает время перерисовки веб-страницы для размещения нового содержимого (также известное как перекомпоновка). Это все равно, что наполнить ведро песком, прежде чем вернуться в свой замок из песка, а не ходить туда-сюда с одной песчинкой за раз.
Дэвид Уолш хорошо объясняет концепцию здесь
По мере того, как я больше занимался обходом и манипулированием DOM, стало проще думать об элементах страницы как о родителях и дочерних элементах, а не просто о тегах. Хорошее знание методов/свойств узлов и элементов упрощает получение необходимой информации. Их длинный список, но когда вы изучаете всего несколько из них, это кажется волшебством, потому что они делают так много в сочетании с базовой логикой программирования. Вот некоторые из методов и свойств, которые я чаще всего использовал при создании игры на память.
Node.parentNode — я не использовал это напрямую в своем коде, но я наткнулся на него во время своего исследования. В разделе См. также показано несколько действительно полезных свойств семейного древа: .firstChild, .nextSibling и т. д. Все это время я думал: Мне нужен не первый элемент внутри этого элемента, а следующий за ним. что», эти свойства помогли мне достичь этого. Стоит потратить немного времени, чтобы открыть инструменты разработчика и поэкспериментировать с ними на случайной странице.
.appendChild() и .removeChild() — позволяет динамически добавлять и удалять контент на вашей странице. Не забудьте перейти по ссылкам в разделе См. Также, чтобы узнать о других способах маневрирования.
.textContent и .innerHTML позволяют получить или установить текстовое или HTML-содержимое соответственно.
.classList в сочетании с .add(), .remove() и другими методами — это упрощает добавление и удаление нескольких классов, позволяя вам делать такие вещи, как изменение цвета и запуск анимации CSS. Метод .contains() позволяет вам проверить существование класса, что может быть полезно при сравнении в вашем коде.
Это не все, но это поможет вам начать. Получайте удовольствие от этого. Если мне стало легче, уверен, вам тоже.
