Автор оригинала: FreeCodeCamp Community Member.
Хорошо, так что я предполагаю, что вы слышали о Всемогущем доме – вот почему вы здесь, верно? Если вы обнаружите его сложно, я могу заверить вас, что после прочтения этой статьи вы будете чувствовать себя достаточно комфортно со всей манипуляцией DOM.
Но, пожалуйста, прежде чем я начну, позвольте мне поделиться с вами моей маленькой историей о том, как я узнал о DOM (это забавная история).
Как я узнал о доме
Несколько месяцев в мою карьеру веб-разработки я все еще изучал старый добрый HTML и CSS. Я ошибочно наткнулся на домо-курс на W3Schools. Первый пример у них был один с лампочкой и двумя кнопками.
OnClick одной из кнопок «включал» лампочку и onClick второй кнопки «выключить» лампочку. Я буквально выдул.
Как можно кнопку на сайте выключателя на лампочку? Как!?
Я даже сформулировал об этом. Затем я узнал, что они просто меняли исходный атрибут (SRC) изображений. Я был разбитым сердцем, но независимо от того, что маленький опыт заставил меня влюбиться в Дом. Это заставило меня хотеть узнать больше.
И в этой статье я собираюсь пройти вас через него. Я обещаю, что если вы держитесь со мной до конца и практикуйте все, о чем я пишу, вся вещь дома не будет проблемой для вас когда-либо снова. Так вы готовы? ОК ALLONS-Y (пойдем!).
Чтобы упростить понять, что я сгруппировал все в следующие разложения ниже.
- Определение домо и основных концепций
- Как выбрать элементы в доме
- Как пройти и двигаться вокруг дома
- Как манипулировать элементами в доме
- Общий стиль
- Обработка событий в доме
Так что возьмите кофе или все, что вам нравится, и расслабиться, когда я прохожу через каждую секцию.
Определение домо и основных концепций
Что такое дом?
Дом обозначает модель объекта документа. Это может просто понимать как дерево узлов, созданных браузером. Каждый из этих узлов имеет свои свойства и методы, которые можно манипулировать с помощью JavaScript.
Способность манипулировать домом является одним из самых уникальных и полезных способностей JavaScript.
Изображение ниже дает визуальное представление о том, как выглядит дерево DOM.
Здесь у нас есть объект документа. Это ядро/основание DOM. Чтобы выполнить любую форму манипуляции DOM, вы должны сначала получить доступ к объекту документа.
Далее у нас есть HTML Корневой элемент, который является ребенком объекта документа.
Далее на линии – это Тело и голова элементы, которые являются братьями и сестрами друг к другу и детям HTML элемент.
Под главным элементом у нас есть титульный элемент, который вы можете согласиться, является ребенком элемента головы и родителя к текстовому узлу – «Мой текст».
Прямо под элементом тела у нас есть два элемента ( A Tag и H1 Tag), которые являются братьями и сестрами друг с другом и детьми элемента тела.
Наконец href Атрибут и текстовый узел – «Моя ссылка» – это дети А тег. Точно так же, как текстовый узел, «мой заголовок», это ребенок H1 элемент.
Это может показаться немного запутанным, если вы абсолютный новичок, но доверяйте мне – это всегда становится лучше (с практикой, конечно).
Как выбрать элементы в доме
Чтобы иметь возможность манипулировать элементом в DOM, вы должны выбрать этот конкретный элемент. К счастью для нас у нас есть 4 основных способа выбора элементов.
Как выбрать элементы DOM с методом GetElementByID
Наиболее распространенным способом доступа к HTML-элементу является использование идентификатора элемента.
В примере ниже getelementbyId () Метод используется для поиска элемента
i love javascript
Идентификатор чувствителен к регистру. Например, «Master» и «Master» являются совершенно другими идентификаторами.
После того, как вы выбрали элемент, вы можете добавить стили к элементу, манипулируйте его атрибутами и перемещаться к родительским и дочерним элементам.
Как выбрать элементы DOM с методом GetElementSyClassname ()
Этот метод возвращает коллекцию всех элементов в документе с указанным именем класса.
Например, наша HTML-страница ниже содержит три элемента, и я выбрал кнопку с идентификатором «BTN».
Если вы нажмете кнопку, она выберет все элементы с именем класса «Master2» и измените InnerHTML 3-го элемента.
i love javascript
i love react
i want a job
Перед нажатием кнопки это то, что вы видите:
После нажатия кнопки вы видите:
Я знаю, что я использовал addeventListener () Что я еще не объяснил, но придерживаюсь меня. Это определенно часть того, что я объясню вам ниже:)
Как выбрать элементы DOM с методом GetelementsByTagname ()
Этот метод принимает имя тега и возвращает все элементы указанного имени тега в порядке, который они появляются в документе.
Следующий код иллюстрирует синтаксис getelementsbytagname () Получая все P Элементы на странице и изменение содержания второго элемента.
VsCode
Atom
Sublime text
Как выбрать элементы DOM с селекторами CSS
.Queryselector ()
Это возвращает первое значение, которое соответствует селектору. Этот метод может принимать все селекторы стилей CSS, позволяя его выбрать по тегу, классу или идентификатору.
i am a frontend developer
Этот метод выше приведен один аргумент, который является селектором CSS и возвращает первый элемент, который соответствует селектору.
.QuerySeSeCallAll ()
Это работает аналогично выше, которое возвращает коллекцию списка узлов всех соответствующих элементов.
React
Vue
Angular
Сводка того, как выбрать элементы DOM
Когда вам необходимо выбрать элемент DOM, у вас есть четыре различных варианта выбора из четырех различных способов выполнения определенной вещи (выбирая элемент (ы)).
Поэтому, если вы не помните первое, вы используете второй. И если случайно вы не помните, как у вас все еще есть варианты 3 и 4. Это только я или JavaScript делает нашу жизнь проще?:)
Моя персональная рекомендация – придерживаться варианта 1 или варианта 4a (Queryselector с идентификатором). Из ваших первых дней обучения HTML вы, вероятно, поняли, что элементы не должны иметь тот же идентификатор, то есть идентификатор является уникальным идентификатором элемента в документе.
Имея в виду, выбирая элемент с его идентификатором – это «безопасная ставка», потому что вы не можете применить то же «манипулирование» к разным элементам (если, возможно, это то, что вы хотите достичь – тогда будь мой гость, не стесняйтесь Используйте другие варианты).
Как пройти документ
На этом этапе вы надеетесь согласиться со мной, что все в HTML-документе является узлом. Также текст внутри элементов HTML являются текстовыми узлами.
С помощью HTML DOM вы можете перемещаться по дереву узела и узлам доступа в дереве, используя отношения узла, мы говорили о ранее (родителях, ребенка (REN), родственника (ы) и т. Д.).
Новые узлы могут быть созданы, и все узлы могут быть изменены или удалены.
Немного обзора
- Каждый узел имеет ровно один родитель, кроме верхнего узла (у которого нет родителей).
- Узел может иметь более одного ребенка.
- Братья и сестры (братья или сестры) являются узлами с одним и тем же родителем.
В этом разделе мы посмотрим, как получить родительский элемент, братья и сестры элемента и дети элемента. Я буду использовать следующие свойства узла для достижения этих вещей:
- Parentnode.
- детноды
- FineLEncyChild.
- LastelementChild.
- NextElement.
- Превосходные температуры
Также я буду использовать только эту HTML-страницу ниже, чтобы показать вам, как мы используем каждый из этих свойств узла. И из раздела 4 выше я покажу вам, как манипулировать домом.
Это цель этой статьи – знать, как манипулировать домом. Это не имеет значения, если вы знаете, как выбрать элементы и пройти дому, если вы не знаете, как его манипулировать. Важно знать, как добавить стиль CSS, создавать и добавлять элементы, установите INNERHTML и обрабатывать события.
Это сок этой статьи, поэтому, пожалуйста, оставайся со мной. Давай продолжим.
const parent = document.getElementById('parent').lastElementChild console.log(parent) //i am a first childi am the second child
i am alive
hello world
i am the last child
i am the last child
const parent2 = document.getElementById('parent').children[3] console.log(parent2) //hello world
const secondchild = document.getElementById('secondchild') console.log(secondchild) //i am the second child
console.log(secondchild.parentNode) //...console.log(secondchild.nextElementSibling) //i am alive
console.log(secondchild.previousElementSibling) //i am a first child
Как манипулировать элементами в доме
В этом разделе мы собираемся посмотреть на:
- Как создавать элементы
- Как установить innerHTML/текстовое содержимое элемента
- Как добавить элемент
- Как вставить один элемент перед другим
- Как заменить дочерний элемент
- Как удалить элемент ребенка
i am a first child
i am the second child
i am alive
hello world
i am the last child
Как создавать элементы
Код выше показывает родительский элемент с 5 детьми элементами. Давайте предположим, что мы хотим добавить еще один Div Тег с JavaScript. Мы определенно должны были создать новый элемент с творчество () Метод, как это:
const createEl = document.createElement('div')
console.log(createEl) //Как установить InnerHTML
Мы успешно создали Div Тег, но в настоящее время у него нет текстового узла. Мы собираемся использовать .innerhtml () Свойство, чтобы добавить свой текстовый узел.
const innerhtml = createEl.innerHTML = 'i am a frontend developer' console.log(createEl) //i am a frontend developer
Как добавить элемент
То, что мы достигли до сих пор, создают элемент и вставляем свой текстовый узел. Но этот созданный элемент еще не является частью дерева DOM.
Так что теперь я собираюсь показать вам, как добавить его к этой HTML-странице в этом разделе. Здание на коде выше:
const createEl = document.createElement('div')
const innerhtml = createEl.innerHTML = 'i am a frontend developer'
const parentEl = document.getElementById('parent')
parentEl.appendChild(createEl)
console.log(parentEl)
Как вставить один элемент перед другим
Если вы заметили с изображение журнала консоли выше, прилагаемый ребенок Div Тег был добавлен в нижней части автоматически.
Что если по какой-то причине вы хотите добавить его нигде на ваш выбор? Может быть, перед первым элементом или до четвертого элемента. Я здесь, чтобы сказать вам, что это очень возможно. В следующем коде мы собираемся добавить его до текущего первого элемента.
Мы собираемся использовать insertyfore () Метод JavaScript, который принимает два параметра, Newnode и Существуют В этом порядке => Document.insertbefore (newnode, usenode) Отказ
const parentEl = document.getElementById('parent')
const firstchildEl = document.getElementById('firstchild')
const createEl = document.createElement('div')
const innerhtml = createEl.innerHTML = 'i am a frontend developer'
parentEl.insertBefore(createEl, firstchildEl)
console.log(parentEl)
Как заменить дочерний элемент
Мы собираемся использовать reflacechild () Метод JavaScript, который принимает два параметра для замены нашего первого элемента с вновь созданным. Это работает в этом порядке => Document.replacechild (newnode, usenode) Отказ
const firstchildEl = document.getElementById('firstchild')
const parentEl = document.getElementById('parent')
const createEl = document.createElement('div')
const innerhtml = createEl.innerHTML = 'i am a frontend developer'
parentEl.replaceChild(createEl, firstchildEl)
console.log(parentEl)
Как удалить элемент ребенка
Мы собираемся использовать Removechild () Метод JavaScript, который принимает только один параметр (), который является элементом, который вы хотите удалить, который в этом случае является нашим оригинальным первым элементом. Это работает в этом порядке => Document.removechild (Элемент)
const firstchildEl = document.getElementById('firstchild')
const parentEl = document.getElementById('parent')
parentEl.removeChild(firstchildEl)
console.log(parentEl)Как добавить стайлинг с CSS
Из предыдущих примеров мы увидели, как создать элемент и добавить его в указанный родительский элемент.
Поэтому для элемента, чтобы иметь стиль, мы должны добавить к нему класс CSS. В этом случае мы сделаем это с JavaScript.
Я не только покажу вам, как добавить класс. Я также покажу вам, как убрать класс и как переключаться между классами.
Не волнуйтесь, это не сложно. Я здесь, чтобы пройти вас через все это.
Как добавить класс CSS
В настоящее время у нас есть нормальная HTML-кнопка с идентификатором «Master», но без какого-либо стиля к нему применяется. Смотрите изображение ниже:
Первое, что мы собираемся сделать, это создать стиль CSS для кнопки.
Далее в нашем JavaScript я добавлю слушатель события на кнопку, чтобы, когда вы нажмете его, JavaScript автоматически добавляет стиль CSS с классом «кнопки».
const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
function addFunction(){
buttonEl.classList.add('button')
}После нажатия кнопки вы увидите ниже. Красивая верна?
Как удалить класс
Все еще используя тот же пример выше, мы собираемся удалить стиль CSS, на этот раз вокруг ClassList.Remove () в JavaScript. Вы, наверное, уже догадались, что произойдет, верно?
Собственно, кнопка вернется в состояние по умолчанию.
const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
function addFunction(){
buttonEl.classList.remove('button')
}
Как переключить класс
Допустим, вы не хотите полностью удалять стиль CSS. Вы хотите способ переключаться между стилью и нестандартной кнопкой.
ClassList.toggle () Метод JavaScript дает вам эту способность.
ClassList.toggle () Метод обычно используется в большинстве социальных медиа-платформ, таких как Twitter. Это позволяет вам понравиться сообщение с кнопкой и в отличие от этого с той же кнопкой, когда вы хотите.
Таким образом, JavaScript проверяет, есть ли наша кнопка CSS-класса.
Если у него есть класс, и вы нажимаете кнопку, это удаляет его. Если у него нет класса, и вы нажимаете кнопку, он добавляет его.
const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
function addFunction(){
buttonEl.classList.toggle('button')
}
Каковы HTML-события?
События HTML – это «вещи», которые случаются с элементами HTML, такие как щелчок кнопки, ввод в текстовую область и так далее. Когда событие возникает, как выше, вы можете написать код JavaScript, который мы называем обработчик событий, который будет выполнен.
Эти обработчики событий являются функциями JavaScript. Таким образом, когда событие возникает на элементе, выполняется функция обработчика.
Прослушиватели событий
До сих пор мы использовали слушателей событий в основном каждый пример выше. Это должно показать, насколько важные слушатели событий находятся в манипулировании DOM.
Чтобы добавить слушатель события в элемент или любой объект DOM, нам нужен метод, который является addeventListener () Отказ Этот метод предпочтительнее старого, где мы включаем мероприятие, которое будет обрабатываться в разметке HTML.
С помощью этого JavaScript разделен от разметки HTML, который делает его очистителем и более читаемым.
Мне нравится идея отдельных JS, отдельных CSS и так далее, поэтому, если вы похожи на меня, вы хотели бы этот слушатель событий.
Слушатель событий принимает 3 параметра.
- Первый – это тип события, как «Нажмите» и так далее.
- Второй параметр – это функция для выполнения.
- Третий параметр – это логическое значение, определяющее, следует ли использовать пузырька событий или захват событий. Этот параметр является необязательным.
Вы можете добавить много обработчиков событий в один элемент.
Вы также можете добавить множество обработчиков событий одного типа в один элемент, например, два события «клики».
Заключение
Знание того, как манипулировать домом с JavaScript очень важно. Это не то, что вы можете решить, чтобы не знать.
Если вы понимаете примеры/иллюстрации, которые я приведен выше, вы сможете построить Маленький JS проекты. Я не могу преодолеть важность строительных проектов, если вы хотите быть хорошим разработчиком.