Prefacio
La función de DOM es convertir la página web en un objeto JavaScript, para que pueda usar JavaScript para realizar varias operaciones en la página web (como agregar y eliminar contenido). El navegador analizará el documento HTML en una serie de nodos basados en el modelo DOM, y luego formará una estructura de árbol de estos nodos. La unidad de composición más pequeña de DOM se llama nodo, y la estructura del árbol de un documento (árbol DOM) consta de 12 tipos de nodos.
propiedad
En general, los nodos tienen al menos tres propiedades básicas: NodeType , NodeName y NodeValue .
Diferentes tipos de nodos, los valores de estos tres atributos también son diferentes.
tipo nodo
La propiedad NodeType devuelve un valor constante del tipo de nodo. Los diferentes tipos corresponden a diferentes valores constantes, y 12 tipos corresponden a valores constantes de 1 a 12 respectivamente.
Elemento nodo nodo.element_node (1)
Atributo nodo node.attribute_node (2)
Nodo de texto node.text_node (3)
Cdata nodo node.cdata_section_node (4)
Nombre de referencia de la entidad nodo.entry_reference_node (5)
Nombre de la entidad node.entity_node (6)
Nodo de nodo de instrucción de proceso.processing_instruction_node (7)
Comentario node node.comment_node (8)
Documento de nodo Node.document_node (9)
Tipo de documento node nodo.document_type_node (10)
Documento de nodo de fragmento Node.document_fragment_node (11)
DTD Declaración nodo Node.notation_node (12)
DOM define una interfaz de nodo, que se implementa como un tipo de nodo en JavaScript, y todos los objetos DOM en el navegador IE8 se implementan como objetos COM. Por lo tanto, el navegador IE8 no admite la redacción de objetos de nodo
// Devuelve 1 en el navegador estándar, y se informa un error en IE8-Browser, lo que provoca nodo que console.log (node.element_node); // 1
nombre de doden
La propiedad NodeName devuelve el nombre del nodo
nodevalor
La propiedad NodeValue devuelve o establece el valor del nodo actual, en el formato como una cadena
A continuación, se hará una descripción detallada de 1 a 12 de acuerdo con el orden correspondiente del valor constante del tipo de nodo.
【1】 nodo de elemento
El elemento de nodo elemento corresponde al elemento de etiqueta HTML de la página web. El valor del tipo de nodo NodeType del nodo del elemento es 1, el valor de nombre del nombre del nodo es el nombre de la etiqueta de mayúsculas y el valor de noDeValue es nulo
Tome el elemento del cuerpo como ejemplo
// 1 'Body' nullConsole.log (document.body.nodetype, document.body.nodename, document.body.nodevalue) console.log (node.element_node === 1); // true
【2】 Nodo de características
El atributo del atributo del elemento corresponde a los atributos de la etiqueta HTML en la página web. Solo existe en los atributos atributos del elemento y no es parte del árbol de documentos DOM. El valor del tipo de nodo NodeType del nodo característico es 2, el valor de nombre del nombre del nodo es el nombre del atributo, y el valor nodevalue es el valor del atributo
Ahora, el elemento div tiene el atributo de id = "prueba"
<div id = "test"> </div> <script> var attr = test.attributes.id; // 2 'id' 'test'console.log (attr.nodeType, attr.nodename, attr.nodevalue) console.log (node.attribute_node === 2); // true </script>
【3】 nodo de texto
El texto del nodo de texto representa el contenido de la etiqueta HTML en la página web. El valor del tipo de nodo NodeType del nodo de texto es 3, el valor de nombre del nombre del nodo es '#Text', y el valor NodeValue es el valor de contenido de la etiqueta
Ahora, el contenido del elemento div es 'prueba'
<div id = "test"> test </iv> <script> var txt = test.firstchild; // 3 '#text' 'test' console.log (txt.nodeType, txt.nodeName, txt.nodevalue) console.log (node.text_node === 3); // verdadero </scrito>
【4】 nodo cdata
El tipo de cdataSection es solo para documentos basados en XML y solo aparece en documentos XML. Representa el área de cdata y el formato es generalmente
<! [CDATA []]>
El valor del tipo de nodo NodeType de este nodo tipo es 4, el valor del nombre del nodo NodeName es '#Cdata-Section', y el valor de NodeValue es el contenido en el área de CDATA
【5】 Nombre de nombre de referencia de la entidad nodo
Una entidad es una declaración que especifica el nombre utilizado en XML en lugar de contenido o etiquetas. Una entidad contiene dos partes. Primero, el nombre debe estar vinculado al contenido de reemplazo utilizando la declaración de entidad. Las declaraciones de la entidad se crean en una definición de tipo de documento (DTD) o esquema XML utilizando la sintaxis del nombre de la entidad <! En segundo lugar, los nombres definidos en las declaraciones de entidad se usan en XML. Cuando se usa en XML, este nombre se llama referencia de entidad.
El tipo de nodo NodeType del nombre de referencia de la entidad Entry_Reference es 5, el nombre de nodo NodeName es el nombre de la referencia de entidad y el NodeValue es nulo
// Nombre de la entidad <! Publicador de entidad "Microsoft Press"> // Referencia de nombre de la entidad <Bubinfo> Publicado por & Publisher; </Pubinfo>
【6】 Nombre de nombre de la entidad
Se ha explicado en detalle arriba, por lo que no lo repetiré
El tipo de nodo nodo de este nodo es 6, el nombre del nodo nodo es el nombre de la entidad y el nodevalue es nulo
【7】 Nodo de instrucción de procesamiento
El tipo de nodo NodeType que maneja la instrucción de procesamiento del nodo de instrucción tiene un valor de 7, el nombre de nodo NodeName tiene un valor de destino y el NodeValue tiene un contenido completo que excluye el objetivo
【8】 nodo de anotación
El comentario del nodo de comentarios representa los comentarios HTML en la página web. El valor del tipo de nodo Nodetype del nodo anotado es 8, el valor del nombre del nodo NodeName es '#Comment', y el valor de NodeValue es el contenido del comentario
Ahora, hay un <!-soy contenido de comentarios-> en el elemento divs con id id mydiv
<div id = "myDiv"> <!-Soy el contenido de comentarios-> </div> <script> var com = myDiv.firstchild; // 8 '#comment' 'Soy el comentario content'console.log (com.nodeType, com.nodename, com.nodevalue) Console.log (node.comment_node === 8); // verdadero <//scripte
【9】 Nodo de documento
El documento del nodo del documento representa un documento HTML, también conocido como nodo raíz, que apunta al objeto de documento. El tipo de nodo NodeType del nodo del documento es 9, el nombre del nodo nodo es '#Document' y el nodevalue es nulo
<script> // 9 "#Document" nullConsole.log (document.nodeType, document.nodeName, document.nodevalue) console.log (node.document_node === 9); // true </script>
【10】 Nodo de tipo de documento
Documtype Node DocumentType contiene toda la información sobre el Doctype del documento. El valor del tipo de nodo NodeType del tipo de documento es 10, el valor de nombre del nombre del nodo es el nombre de DOCTYPE y el valor NodeValue es nulo
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> </head> <body> <script> var nodoCumentType = document.firstchild; // 10 "html" " nullConsole.log (nodoDocumentType.nodeType, nodoDocumentType.nodeName, nodoDocumentType.nodeValue); console.log (node.document_type_node === 10); </script> </body> </html>
【11】 Nodo de fragmento de documento
Documento de nodo Fragment DocumentFragment no tiene etiquetas correspondientes en el documento. Es un documento liviano que puede contener y controlar nodos, pero no superará recursos adicionales como un documento completo. El tipo de nodo nodo de este nodo es 11, el nombre del nodo nodo es '#fragment de documentos', y el nodevalue es nulo
<script> var nodoDocumentFragment = document.createDocumentFragment (); // 11 "#Document-Fragment" nullConsole.log (nodoDocumentFragment.nodeType, NodeDocumentFraGment.nodeName, NodeDocumentFragment.NodeValue); console.log (node.document_fragment_node === 11); // true </script>
【12】 nodo de declaración DTD
La notación del nodo de declaración de DTD representa el símbolo declarado en DTD. El tipo de nodo nodo de este nodo es 12, el nombre del nodo nodo es el nombre simbólico y el nodevalue es nulo
Resumir
Entre estos 12 tipos de nodos DOM, algunos son adecuados para documentos XML, y otros no se usan comúnmente. En cuanto a los tipos de uso común, los presentaremos en detalle más adelante. Este artículo solo proporciona una descripción general de estos 12 tipos de nodos. Espero que este artículo sea útil para todos.