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

Основным объектом является объект 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, который содержит список всех свойств стилей для этого элемента со значениями, назначенными для атрибутов, определенных в атрибуте встроенного стиля элемента.

 


  
    

This will change to red...

Удаление узлов

Подобно модификации DOM, он также позволяет удалять целевые узлы. Метод removeChild() удаляет целевой объект из родительского узла.

 


  
    

Days:

  • Sunday
  • Monday
  • Tuesday
  • Wednesday

Источник: http://net-informations.com/js/dom/manipulations.htm

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Adblock
detector