Как манипулировать Dom

Содержание

1 Создайте элемент DOM
2 insertBefore (element, targetNode)
3 AppendChild (элемент)
4 Модифицирующий узел
5 Изменить содержимое
6 Изменение стилей
7 Удаление узлов

Основным объектом является объект Document, который, в свою очередь, содержит несколько других дочерних объектов. Каждый элемент в документе будет иметь соответствующее присутствие в дереве DOM. Объект документа - это встроенный объект, который имеет множество свойств и методов, которые мы можем использовать для доступа и изменения веб-сайтов.

Создайте элемент DOM

Чтобы создать новые элементы в DOM, он предоставляет общий метод createElement(), который принимает в качестве аргумента имя тега HTML и возвращает простой узел DOM указанного типа.

Days:

Sunday
Monday
Tuesday
Wednesday

Выше JavaScript-программы сначала создают узел LI, затем он разбивает текстовое поле для отображения текста, а затем добавляет текстовый узел к новому элементу LI, и, наконец, новый узел добавляется к существующим «дням».

insertBefore (element, targetNode)

Метод Node.insertBefore() вставляет узел перед ссылочным узлом в качестве дочернего элемента указанного родительского узла. Если данный ребенок является ссылкой на существующий узел в документе, insertBefore() перемещает его из текущего положения в новое положение.

Days:

Monday
Tuesday
Wednesday

AppendChild (элемент)

Метод Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный ребенок является ссылкой на существующий узел в документе, appendChild() перемещает его из текущей позиции в новую позицию.

Days:

Sunday
Monday
Tuesday
Wednesday

Модифицирующий узел

Вы можете изменять существующие элементы в DOM, изменяя их свойства, контент, стиль или даже полностью перемещая их из одного места в DOM в другое.

Изменить содержимое

Свойство Element innerHTML используется для получения или установки строки, представляющей сериализованный HTML, описывающий потомков элемента. Он не возвращает HTML-разметку. Когда вы устанавливаете контент с помощью этого метода, он удаляет все содержимое узла и вставляет предоставленный текст.

This will Change....

Изменение стилей

Свойство HTMLElement.style используется так же, как и для встроенного стиля элемента. При получении он возвращает объект CSSStyleDeclaration, который содержит список всех свойств стилей для этого элемента со значениями, назначенными для атрибутов, определенных в атрибуте встроенного стиля элемента.