Предисловие
Функция DOM заключается в преобразовании веб -страницы в объект JavaScript, чтобы вы могли использовать JavaScript для выполнения различных операций на веб -странице (например, добавление и удаление контента). Браузер проанализирует документ HTML в серию узлов, основанные на модели DOM, а затем сформирует структуру дерева этих узлов. Наименьшая композиционная единица DOM называется узлом, а структура дерева документа (дерево DOM) состоит из 12 типов узлов.
свойство
Как правило, узлы имеют как минимум три основных свойства: Nodetype , NodeName и Nodevalue .
Различные типы узлов, значения этих трех атрибутов также различны.
Nodetype
Свойство Nodetype возвращает постоянное значение типа узла. Различные типы соответствуют различным постоянным значениям, а 12 типов соответствуют постоянным значениям от 1 до 12 соответственно.
Элемент узлы узла.ELEMENT_NODE (1)
ATTRIBTION NODE NODE.ATTRIBUTE_NODE (2)
Text Node node.text_node (3)
CDATA NODE NODE.CDATA_SECTION_NODE (4)
Имя ссылки на объект Node.Entry_Reference_Node (5)
Узел имени объекта Node.entity_node (6)
Узел узела инструкции процесса.processing_instruction_node (7)
Комментарий Node node.comment_node (8)
Node Document Node.document_node (9)
Тип документа Node.document_type_node (10)
Узел фрагмента документа Node.document_fragment_node (11)
DTD Объявление Узел Узел. NODE.NOTATION_NODE (12)
DOM определяет интерфейс узла, который реализован как тип узла в JavaScript, и все объекты DOM в IE8-браузера реализованы как объекты COM. Поэтому IE8-Browser не поддерживает написание объектов узла
// Возврат 1 в стандартном браузере, и в IE8-Браузере сообщается об ошибке, что подсказывает узел Console.log (node.element_node); // 1
nodeneme
Свойство NodeName возвращает имя узла
Nodevalue
Свойство Nodevalue возвращает или устанавливает значение текущего узла в формате как строка
Далее подробное описание будет сделано с 1 до 12 в соответствии с соответствующим порядком постоянного значения типа узла.
【1】 Узел элемента
Элемент узла элемента соответствует элементу тега HTML веб -страницы. Значение узла узла узла узла элемента составляет 1, значение Node Node Nodememe - это имя верхней метки, а значение Nodevalue - NULL
Возьмите элемент тела в качестве примера
// 1 'body' nullconsole.log (document.body.nodetype, document.body.nodename, document.body.nodevalue) console.log (node.element_node === 1); // true
【2】 Узел функции
Атрибут атрибута элемента соответствует атрибутам тега HTML на веб -странице. Он существует только в атрибутах атрибутов элемента и не является частью дерева документов DOM. Значение Nodetype типа узла характерного узла составляет 2, значение Node Node nodeName - это имя атрибута, а значение nodevalue - это значение атрибута
Теперь элемент div имеет атрибут id = "test"
<div id = "test"> </div> <script> var attr = test.attributes.id; // 2 'id' 'test'console.log (attr.nodetype, attr.nodename, attr.nodevalue) console.log (node.attrubt_node === 2); // true </script>
【3】 Текстовый узел
Текст текстового узла представляет содержимое тега HTML на веб -странице. Значение Nodetype Type Type Type Text Node 3, значение Node Node nodememe - «#Text», а значение NodeValue - это значение содержимого метки
Теперь содержание элемента div - «тест»
<div id = "test"> test </div> <script> var txt = test.firstchild; // 3 '#text' '' test 'console.log (txt.nodetype, txt.nodename, txt.nodevalue) console.log (node.text_node == 3); // true </script>
【4】 Узел CDATA
Тип CDAtAsection предназначен только для документов на основе XML и появляется только в документах XML. Он представляет область CDATA, а формат обычно
<! [CDATA []]>
Значение типа узла Nodetype этого узла типа 4, значение Node Node NodeName-«#cdata-section», а значение Nodevalue-это содержимое в области CDATA
【5】 Узел ссылки на объект
Сущность - это объявление, которое указывает имя, используемое в XML вместо контента или тегов. Сущность содержит две части. Во -первых, имя должно быть связано с запасным содержанием, используя объявление объекта. Объявления объектов создаются в определении типа документа (DTD) или схеме XML с использованием синтаксиса <! Имя объекта «Значение»>. Во -вторых, имена, определенные в объявлениях сущности, затем используются в XML. При использовании в XML это имя называется ссылкой на объект.
Тип узла Nodetype of Entity Справочный имен node intyper_reference - 5, имя узла Node NodeName - это имя объекта, а Nodevalue - NULL
// Имя объекта <! Издатель сущности "Microsoft Press"> // Имя объекта Ссылка <pubinfo> Опубликовано и издатель; </pubinfo>
【6】 Узел имени объекта
Это было объяснено подробно выше, поэтому я не буду повторять это
Nodetype типа узла этого узла - 6, название Node NodeName является именем объекта, а Nodevalue - NULL
【7】 Узел инструкции по обработке
Nodetype типа узла, который обрабатывает обработку узла инструкции, имеет значение 7, имен Node NodeNam
【8】 Аннотация Узел
Комментарий Комментарий Комментарий представляет HTML -комментарии на веб -странице. Значение типа узла Nodetype аннотированного узла составляет 8.
Теперь есть <!-я-контент комментариев-> в элементе div с идентификатором MyDiv
<div id = "mydiv"> <!-I-контент комментариев-> </div> <script> var com = mydiv.firstchild; // 8 '#comment' 'Я-содержимое комментария' console.log (com.nodeType, com.nodeMame, com.nodevalue) console.log (node_node_node = com.nodevalue) console.log (node_node_node);
【9】 Узел документа
Документ документа Document представляет HTML -документ, также известный как корневой узел, указывающий на объект документа. Nodetype Nodetype Nodetype узла документа составляет 9, имя Node NodeName - «#Document», а Nodevalue - NULL
<script> // 9 "#document" nullconsole.log (document.nodetype, document.nodeName, document.nodevalue) console.log (node.document_node === 9); // true </script>
【10】 Узел типа документа
DocumentType Node DocumentType содержит всю информацию о документальном документе. Значение узла узла узла узла типа документа составляет 10, значение Node Node Nodeme - это имя Doctype, а значение Nodevalue - NULL
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <tite> документ </title> </head> <body> <script> var nodedocumentype = document.firstchild; // 10 "html" nullconsole.log (NodedocumentType.nodeType, nodedocumentType.nodeName, nodedocumenttype.nodevalue); console.log (node.document_type_node === 10); </script> </body> </html>
【11】 Узел фрагмента документа
Document Fragment Node DocumentFragment не имеет соответствующих тегов в документе. Это легкий документ, который может содержать и управлять узлами, но не будет преодолевать дополнительные ресурсы, такие как полный документ. Nodetype типа узла этого узла составляет 11, Node Node NodeName-«#документ-фрагмент», а Nodevalue-NULL
<script> var nodedocumentfragment = document.createdocumentfragment (); // 11 "#документ-фрагмент" nullconsole.log (nodedocumentfragment.nodeType, nodedocumentfragment.nodeName, nodedocumentfragment.nodevalue); console.log (node.document_fragment_node === 11); // true </script>
【12】 Узел объявления DTD
Нотация декларации DTD представляет символ, объявленный в DTD. Nodetype типа узла этого узла - 12, название Node NodeName является символическим именем, а Nodevalue - NULL
Суммировать
Среди этих 12 типов узлов DOM некоторые подходят для документов XML, а некоторые не используются. Что касается обще используемых типов, мы представим их подробно позже. В этой статье представлен только обзор этих 12 типов узлов. Я надеюсь, что эта статья будет полезна всем.