Préface
La fonction de DOM est de convertir la page Web en un objet JavaScript, afin que vous puissiez utiliser JavaScript pour effectuer diverses opérations sur la page Web (comme l'ajout et la suppression de contenu). Le navigateur analysera le document HTML dans une série de nœuds basés sur le modèle DOM, puis formera une structure d'arbre de ces nœuds. La plus petite unité de composition de Dom est appelée nœud, et la structure des arbres d'un document (arbre Dom) se compose de 12 types de nœuds.
propriété
Généralement, les nœuds ont au moins trois propriétés de base: NODETYPE , NODENAME et NODEVALUE .
Différents types de nœuds, les valeurs de ces trois attributs sont également différentes.
nodype
La propriété NODETYPE renvoie une valeur constante du type de nœud. Différents types correspondent à différentes valeurs constantes, et 12 types correspondent à des valeurs constantes de 1 à 12 respectivement.
Nœud élément node.element_node (1)
Attribut nœud node.attribute_node (2)
Node de texte node.text_node (3)
Node cdata node.cdata_section_node (4)
Nom de référence de l'entité Node Node.entry_reference_node (5)
Nom de l'entité Node Node.entity_node (6)
Processez le nœud d'instructions node.processing_instruction_node (7)
Commentaire nœud node.comment_node (8)
Document Node Node.Document_Node (9)
Type de document Node Node.Document_Type_Node (10)
Document Fragment Node Node.Document_Fragment_Node (11)
DTD DÉCLARATION NODE NODE.NOTATION_NODE (12)
DOM définit une interface de nœud, qui est implémentée comme un type de nœud dans JavaScript, et tous les objets DOM dans IE8-Browser sont implémentés en tant qu'objets COM. Par conséquent, IE8-Browser ne prend pas en charge l'écriture d'objets de nœud
// Renvoie 1 dans le navigateur standard et une erreur est signalée dans IE8-Browser, invitant le nœud que Console.log (Node.Element_Node); // 1
nodename
La propriété NodeName renvoie le nom du nœud
novice novice
La propriété Nodevalue renvoie ou définit la valeur du nœud actuel, dans le format en tant que chaîne
Ensuite, une description détaillée sera effectuée de 1 à 12 selon l'ordre correspondant de la valeur constante du type de nœud.
【Nœud d'élément 1】
L'élément de nœud d'élément correspond à l'élément de balise HTML de la page Web. La valeur nodetype de type de nœud du nœud d'élément est 1, le nom de nœud Nodename Valeur est le nom d'étiquette en majuscule, et la valeur novalue est nul
Prenez l'élément corporel comme exemple
// 1 'body' nullconsole.log (document.body.nodetype, document.body.nodename, document.body.nodevalue) console.log (node.element_node === 1); // true
【2】 Node de fonctionnalité
L'attribut de l'attribut d'élément correspond aux attributs de la balise HTML dans la page Web. Il n'existe que dans les attributs d'attributs de l'élément et ne fait pas partie de l'arborescence de document DOM. La valeur nodetype de type de nœud du nœud caractéristique est 2, le nom de nœud nodename la valeur est le nom d'attribut, et la valeur novalue est la valeur d'attribut
Maintenant, l'élément div a l'attribut de id = "test"
<div id = "test"> </ div> <cript> var attR = test.attributes.id; // 2 'id' 'test'console.log (att.nodetype, att.nodename, att.nodevalue) console.log (node.attribute_node === 2); // true </ script>
【3】 Node de texte
Le texte du nœud de texte représente le contenu de balise HTML dans la page Web. La valeur nodetype de type de nœud du nœud de texte est 3, le nom de nœud nodename la valeur est '#text' et la valeur novalue est la valeur de contenu de l'étiquette
Maintenant, le contenu de l'élément div est «test»
<div id = "test"> test </ div> <prict> var txt = test.firstchild; // 3 '#text' 'test' console.log (txt.nodetype, txt.nodename, txt.nodevalue) console.log (node.text_node === 3); // true </ script>
【4】 Node CDATA
Le type CDATASECTION est uniquement pour les documents basés sur XML et n'apparaît que dans les documents XML. Il représente la zone CDATA et le format est généralement
<! [Cdata []]>
La valeur du type de nœud de nodype de ce nœud de type est de 4, la valeur du nom de nœud nodename est '# cdata-section', et la valeur de nodevalue est le contenu de la zone CDATA
【5】 NODE NOM DE RÉFÉRENCE ENTITY
Une entité est une déclaration qui spécifie le nom utilisé dans XML au lieu de contenu ou de balises. Une entité contient deux parties. Tout d'abord, le nom doit être lié au contenu de remplacement à l'aide de la déclaration d'entité. Les déclarations d'entité sont créées dans une définition de type de document (DTD) ou un schéma XML à l'aide de la syntaxe <! Entity Name "Value">. Deuxièmement, les noms définis dans les déclarations d'entité sont ensuite utilisés dans XML. Lorsqu'il est utilisé dans XML, ce nom est appelé référence d'entité.
Le type de nœud NODETYPE de l'entité Nom de référence Le nœud Entrée_Reference est 5, le nom de nœud NodeName est le nom de la référence de l'entité, et le nodevalue est nul
// Nom de l'entité <! Entity Publisher "Microsoft Press"> // Nom de l'entité Référence <Bubinfo> Publié par & Publisher; </ubinfo>
【6】 Node de nom d'entité
Il a été expliqué en détail ci-dessus, donc je ne le répéterai pas
Le type de nœud de node de ce nœud est 6, le nom de nœud nodename est le nom de l'entité, et le novalue est nul
【7】 Node d'instructions de traitement
Le type de nœud Nodetype qui gère l'instruction Node ProcessingInstruction a une valeur de 7, le nom de nœud Nodename a une valeur de cible, et le nodvalue a un contenu entier excluant la cible
【8】 Nœud d'annotation
Le commentaire du nœud de commentaire représente les commentaires HTML dans la page Web. La valeur du type de nœud de nœud du nœud annoté est 8, la valeur du nom de nœud nodename est '#comment', et la valeur de nodevalue est le contenu du commentaire
Maintenant, il y a un <! - Je suis contenu de commentaire -> dans l'élément div avec id id mydiv
<div id = "MyDiv"> <! - Je suis le contenu du commentaire -> </ div> <cript> var com = mydiv.firstchild; // 8 '#comment' 'Je suis le commentaire contenu'console.log (com.nodetype, com.nodename, com.nodevalue) console.log (node.comment_node === 8); // true </ script>
【9】 Node de document
Le document de nœud de document représente un document HTML, également connu sous le nom de nœud racine, pointant vers l'objet de document. Le nodype de type de nœud du nœud de document est 9, le nom de nœud nodename est '#Document' et le nodevalue est nul
<Script> // 9 "#Document" nullconsole.log (document.nodeType, document.nodename, document.nodevalue) console.log (node.document_node === 9); // true </ script>
【10】 Nœud de type de document
DocumentType Node DocumentType contient toutes les informations sur le doctype du document. La valeur nodetype de type de nœud du nœud de type de document est 10, le nom de nœud nodename la valeur est le nom de doctype, et la valeur novalue est nul
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> Document </ title> </ head> <pody> <script> var nodeDocumentType = document.firstchild; // 10 "html" nullconsole.log (nodeDocumentType.NodeType, nodeDocumentType.NodeName, nodeDocumentType.Nodevalue); console.log (node.document_type_node === 10); </ script> </ body> </ html>
【11】 Node de fragment de document
Document Fragment Node DocumentFragment n'a pas de balises correspondantes dans le document. Il s'agit d'un document léger qui peut contenir et de contrôler les nœuds, mais ne surmontera pas de ressources supplémentaires comme un document complet. Le type de nœud de node de ce nœud est 11, le nom de nœud nodename est «# document-fragment», et le novale est nul
<Script> var nœudocumentFragment = document.CreateDocumentFragment (); // 11 "# Document-Fragment" nullconsole.log (nodedocumentfragment.nodetype, nodedocumentfragment.nodename, nodedocumentfragment.nodevalue); console.log (node.document_fragment_node === 11); // true </ script>
【12】 Node de déclaration DTD
La notation de nœud de déclaration DTD représente le symbole déclaré dans DTD. Le type de nœud de nœud de ce nœud est 12, le nom de nœud nodename est le nom symbolique, et le nodevalue est nul
Résumer
Parmi ces 12 types de nœuds DOM, certains conviennent aux documents XML, et certains ne sont pas couramment utilisés. Quant aux types couramment utilisés, nous les présenterons en détail plus tard. Cet article ne fournit qu'un aperçu de ces 12 types de nœuds. J'espère que cet article sera utile à tout le monde.