Нет красивых поверхностей без ужасной глубины. -Friedrich Ницше
Вступление
Модель объекта документа HTML (DOM) является владельцем всех других объектов на веб -странице. Существует так много способов, которыми методы JavaScript можно использовать для манипулирования DOM.
В этом уроке мы рассмотрим только 7 из этих методов JavaScript для выполнения манипуляций с DOM. Давайте начнем!
CreateElement () Метод создает новый Html Элемент, указанный Tagname Анкет
Методы, которые будут использоваться в примере кода
createTexTnode () — Помогает нам создать новый текстовый узел
getElementbyId () — Помогает нам получить доступ к элементу с определенным идентификатором
appendchild () — Добавляет элемент в качестве последнего ребенка органа документа
Замена () — Заменяет узел дочернего узела в родительском узле
Пример кода
Результат
Привет, мир Это новый текстовый абзац.
Резюме
У нас есть div Элемент, который содержит P тег и H2 ярлык. После чего мы получили их ID с Document.getElementById () метод
Затем мы объявили две переменные. Первый создает P тег с использованием CreateElement () Метод, в то время как второй создает новый текст, используя createTexTnode () метод
Наконец, мы позвонили appendchild () Метод и Replacechild () Метод создания нового текстового абзаца.
appendchild () Метод, как мы говорили ранее, создает новый элемент и добавляет его к родительскому узлу. Важно отметить, что appendchild () Метод добавляет новый элемент в конце любых других детей указанного родительского узла.
Методы, которые будут использоваться в примере кода
QuerySelector () — Помогает нам нацелиться на элемент в DOM
CreateElement () — Помогает нам создать новый HTML -элемент в DOM
TextContent — Помогает нам установить заданный текст в узле
Пример кода
Результат
Я номер один Я номер два Я номер три я-четвертый
Резюме
У нас есть список в нашем Html которые всего три в числе. В нашем теге сценария мы смогли добавить четвертого участника в список. Сначала мы выбрали уль тег, а затем создал новый Ли тег с CreateElement () метод
Затем мы добавили немного контента в недавно созданный список, прежде чем добавить его в список. Обратите внимание, что недавно созданный список добавлен в нижней части страницы.
Этот метод вставляет узел перед эталонным узлом в качестве ребенка указанного родительского узла. То есть он добавляет конкретный дочерний элемент перед другим дочерним элементом.
Методы, которые будут использоваться в примере кода
QuerySelector () — Помогает нам нацелиться на элемент в DOM
CreateElement () — Помогает нам создать новый HTML -элемент в DOM
TextContent — Помогает нам установить заданный текст в узле
Пример кода
Результат
Я новый номер один номер один Я номер один Я номер два Я номер три
Резюме
INSERTBEFOR () Элемент добавляет недавно созданный li тег вверх. В нашем теге сценария мы должны были ссылаться на родительский элемент или новый li Тег не был бы создан.
Вот формат, который мы использовали: parentnode.insertbefore (newnode, serirecendode);
ParentNode : Родитель недавно вставленного узла. новый : Узел для вставки. Ссылка : Узел, перед которым вставлен новый NewNode.
RemoveChild () Метод удаляет дочерний узел из DOM и возвращает удаленный узел. Обратите внимание, что снятый дочерний узел все еще существует в памяти, но больше не является частью DOM.
Методы, которые будут использоваться в примере кода
QuerySelector () — Помогает нам нацелиться на элемент в DOM
Пример кода
Результат
Второй в списке третье в списке
Резюме
После использования QuerySelector () Метод выбора как родительских, так и дочерних элементов в нашем теге сценария, затем мы позвонили RemoveChild () метод По умолчанию это удаляет первый элемент в списке.
Replacechild () Метод заменяет дочерний узел в данном родительском узле. Этот метод принимает два параметра: узел, который должен быть вставлен, и узел, который будет заменен. Это следует за этим форматом: parentnode.replacechild (Newchild, Oldchild);
Методы, которые будут использоваться в примере кода
QuerySelector () — Помогает нам нацелиться на элемент в DOM
CreateElement () — Помогает нам создать новый HTML -элемент в DOM
TextContent — Помогает нам установить заданный текст в узле
Пример кода
Результат
Это новый первый абзац Это второй абзац Это третий абзац
Резюме
В теге сценария мы выбрали оба родительского элемента уль и детский элемент Ли . Затем мы создали новый li ярлык.
После чего мы назначили недавно созданный li Отметьте новый контент с помощью TextContent Анкет
Затем мы позвонили Replacechild () Метод, который заменил первый элемент в списке новым li Предмет, который мы создали.
setAttribute () Метод принимает два параметра: Element.SetAttribute (имя, значение);
Этот метод либо добавляет новый атрибут к элементу DOM, либо обновляет значения атрибута, который уже существует.
Методы, которые будут использоваться в примере кода
QuerySelector () — Помогает нам нацелиться на элемент в DOM
Пример кода
Результат
Список редактируемых Старое имя
Резюме
В нашем теге сценария мы выбрали li тег с использованием QuerySelector () метод
Затем мы позвонили setAttribute () метод Первый параметр, который мы назвали, делает первый элемент в списке, который будет редактируемым при нажатии, что позволяет нам изменить текст первого элемента на лету, непосредственно с веб -страницы.
getAttribute () Метод интерфейса элемента возвращает значение указанного атрибута на элементе DOM. Если конкретного значения не существует, возвращаемое значение будет либо NULL или пустая строка "" Анкет
Требуется следующий формат: element.getAttribute (attributeName);
Методы, которые будут использоваться в примере кода
QuerySelector () — Помогает нам нацелиться на элемент в DOM
document.write () — Помогает нам написать строку текста в DOM
Пример кода
Результат
https://dev.to/
Резюме
В нашем теге сценария мы выбрали A ярлык. Далее мы использовали getAttribute () Метод для выбора href атрибут внутри A ярлык.
Наконец мы показали полный URL из href атрибут в DOM с помощью document.write () метод
Вывод
Одной из наиболее полезных возможностей JavaScript является его способность манипулировать DOM. Это один из навыков, которые вам нужны для освоения, если вы хотите улучшить свои способности JavaScript в качестве веб -разработчика.
В этом уроке мы смогли охватить несколько из них. Таким образом, вы можете продолжить дальнейшие исследования, чтобы укрепить базу знаний о манипуляциях с DOM с помощью JavaScript.
Чтобы получить больше бесплатного контента на веб -разработку, подпишитесь на мою бюллетени: здесь
Оригинал: “https://dev.to/desoga/7-javascript-methods-that-aids-dom-manipulation-kkj”