Сводка методов работы узла JavaScript DOM

Существует три основных типа узлов: узлы элементов, узлы атрибутов и текстовые узлы.

Главное в DOM - добавлять, удалять, изменять и проверять узлы элементов и узлы атрибутов. Следующее введет операции на узлах элементов и операциях на узлах атрибутов соответственно.

Узел элемента

проверять

Перед добавлением, удаление и изменение DOM, вы должны сначала найти соответствующий элемент. Конкретные методы поиска следующие:

 getElementById () // Получить один узел getElementsbytagname () // Получить массив узлов getElementsbyname () //

В то же время вы также можете использовать атрибуты узла элемента, чтобы получить его родительские и дочерние узлы и текстовые узлы:

Детские узлы

 Node.childnodes // Получить список узлов дочерних узлов; Обратите внимание, что разрывы строк считаются текстовыми узлами в браузере. Если вы получите список узлов таким образом, требуется фильтрация Node.firstChild // Возврат узел первого ребенка.

Родительский узел

 Node.parentnode // Возвращает родительский узел Node.ownerDocument // Возвращает узел предка (весь документ)

Узлы соотечественника

 Node.previoussibling // Возвращает предыдущий узел, если нет, возвращает nullnode.nextingbling // Возвращает следующий узел

увеличивать

Чтобы добавить новый узел, вы должны сначала создать узел, а затем вставить недавно созданный узел в DOM. Следовательно, ниже приведены методы создания узлов и вставки узлов, и метод реплицирования узлов также введен в создание узлов.

Создать узел

 CreateElement () // Создать новый узел элемента в соответствии с указанным именем тега

Создайте фрагменты кода (чтобы избежать частого обновления DOM, сначала вы можете создать фрагменты кода, а затем добавить их в DOM после завершения всех операций узлов)

 CenelecumentFragment ()

Узел репликации

 CLONENNODE = node.cloneNode (boolean) // Существует только один параметр, пройти в логическое значение, истинное означает копирование всех дочерних узлов под узлом; ложное означает копирование только узла

Вставьте узел

 /*Вставить узел*/parentnode.appendchild (childnode); // Добавить новый узел к концу списка узлов дочерних узлов parentnode.insertbefore (newNode, targetNode); // вставить newNode в TargetNode/*вставить код html*/node.insertAdjacenthtml ('перед begin', html); // вставить код node.insertadjacenthtml ('afterbegin', html); // вставить код node.insertadjacenthtml ('afterbegin', html); // вставить кодовый node.insertadjacenthtml ('перед', html); // вставить код после последнего дочернего элемента элемента node.insertadjacenthtml ('fethend', html); // вставить код после элемента

Заменить узлы

 parentnode.replace (newnode, targetnode); // заменить TargetNode на NewNode

удалить

Удалить узлы

 parentnode.removechild (ChildNode); // Удалить целевой узел Node.parentNode.RemoveChild (Node); // Использование, не зная родительского узла

Узел атрибута

Узлы атрибутов операции должны добавлять, удалять, изменять и проверять стили DOM. Существуют различные методы работы для встроенных стилей, встроенных стилей и внешних стилей; Стили, полученные различными методами, также разделены на читаемые, записываемые и только чтение.

Получите стили CSS напрямую

 node.style.color // читаемый или писательный

Свойства и методы самого стиля

 node.style.csstext // Получить Node встроенном стиле string node.style.length //

Получить и изменить стили элементов

HTML5 предоставляет новый атрибут для элементов: ClassList для реализации добавления, удаления, модификации и поиска листов стиля элементов. Операция заключается в следующем:

 node.classlist.add (значение); // Добавить указанный класс node.classlist.contains (value); // определить, содержит ли элемент указанный класс. Если есть truenode.classlist.remove (value); // Удалить указанный класс node.classlist.toggle (value); // Удалить, если есть определенный класс, и добавьте указанный класс, если нет.

Методы изменения характеристик DOM

 Node.getattribute ('id') // get node.setattribute ('id') // set node.removeattribute () // Удалить node.attributes // Получить все функции DOM

Метод только для чтения

GetComputedStyle - это метод окна. Он может получить все конечные значения атрибута CSS текущего элемента, но только для чтения. Он имеет два параметра, первый-это входящий узел, второй может пройти: «Навет,: размытие и т. Д., Чтобы получить свой псевдо-класс, а если нет, то NULL будет передаваться.

Тем не менее, IE не поддерживает метод GetComputeDStyle, и CurrentStyle может использоваться для поддержания совместимости:

 window.getComputedStyle? window.getComputedStyle (узлы, null): node.currentStyle

Приведенная выше резюме методов работы узла JavaScript DOM - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.