Prefácio
A função do DOM é converter a página da web em um objeto JavaScript, para que você possa usar o JavaScript para executar várias operações na página da web (como adicionar e excluir conteúdo). O navegador analisará o documento HTML em uma série de nós baseados no modelo DOM e, em seguida, formará uma estrutura de árvore desses nós. A menor unidade de composição do DOM é chamada de nó e a estrutura da árvore de um documento (árvore dom) consiste em 12 tipos de nós.
propriedade
Geralmente, os nós têm pelo menos três propriedades básicas: NodeType , Nodename e NodEvalue .
Diferentes tipos de nós, os valores desses três atributos também são diferentes.
NodeType
A propriedade NodeType retorna um valor constante do tipo de nó. Diferentes tipos correspondem a diferentes valores constantes e 12 tipos correspondem a valores constantes de 1 a 12, respectivamente.
Node elemento Node.Element_Node (1)
Atributo node node.attribute_node (2)
Node de texto Node.text_node (3)
Cdata node node.cdata_section_node (4)
Node de referência da entidade Node node.entry_reference_node (5)
Nome da entidade Node node.entity_node (6)
Node de instrução de processo Node.processing_instruction_node (7)
Comentário node node.comment_node (8)
Documento Node Node.document_node (9)
Tipo de documento Node node.document_type_node (10)
Nó do fragmento de documento Node.document_fragment_node (11)
Nó da declaração dtd.Notation_Node (12)
Dom define uma interface de nós, que é implementada como um tipo de nó em JavaScript, e todos os objetos DOM no navegador IE8 são implementados como objetos COM. Portanto, o navegador IE8 não suporta a escrita de objetos de nó
// retorna 1 no navegador padrão e um erro é relatado no IE8-Browser, solicitando um nó que console.log (node.element_node); // 1
Nodename
A propriedade Nodename retorna o nome do nó
NodEvalue
A propriedade NodEvalue retorna ou define o valor do nó atual, no formato como uma string
Em seguida, a descrição detalhada será feita de 1 a 12 de acordo com a ordem correspondente do valor constante do tipo de nó.
【1】 Nó do elemento
O elemento elemento do nó corresponde ao elemento de tag html da página da web. O valor do Node Node Node do nó do elemento é 1, o nome Nome NodeName Valor é o nome da etiqueta superior, e o valor NodEvalue é NULL
Pegue o elemento corporal como um exemplo
// 1 'corpo' nullconsole.log (document.body.nodetype, document.body.nodename, document.body.nodEvalue) console.log (node.element_node === 1); // true
【2】 Nó de recursos
O atributo do atributo elemento corresponde aos atributos da tag HTML na página da web. Ele existe apenas nos atributos atributos do elemento e não faz parte da árvore de documentos DOM. O valor do Node Type NodeType do nó característico é 2, o nome Nome NodeName Valor é o nome do atributo, e o valor NodEvalue é o valor do atributo
Agora, o elemento div tem o atributo de id = "teste"
<div id = "test"> </div> <cript> var att = test.attributes.id; // 2 'id' 'test'console.log (att.nodetype, att.nodename, attr.nodEvalue) console (node.attribute_node ==== 2); // verdadeiro </script>
【3】 Nó de texto
O texto do nó de texto representa o conteúdo da tag html na página da web. O valor do Node Node Node do nó de texto é 3, o nome Nome NodeName Valor é '#Text' e o valor NodEvalue é o valor do conteúdo da etiqueta
Agora, o conteúdo do elemento div é 'teste'
<div id = "test"> teste </div> <sCript> var txt = test.firstchild; // 3 '#text' 'test' console.log (txt.nodetype, txt.nodename, txt.nodEvalue) console.log (node.text_node ==== 3);
【4】 Nó CDATA
O tipo de CDataSection é apenas para documentos baseados em XML e aparece apenas nos documentos XML. Representa a área de CDATA e o formato é geralmente
<! [CDATA []]>
O valor do Node Type NodeType deste nó de tipo é 4, o valor do nome do nó nodename é '#CDATA-SECTION' e o valor do nodEvalue é o conteúdo na área de CDATA
【5】 Nó de referência da entidade de 5 entidades
Uma entidade é uma declaração que especifica o nome usado no XML em vez de conteúdo ou tags. Uma entidade contém duas partes. Primeiro, o nome deve estar vinculado ao conteúdo de substituição usando a declaração da entidade. As declarações de entidade são criadas em uma definição de tipo de documento (DTD) ou esquema XML usando o nome <! Nome da entidade "Valor"> Sintaxe. Segundo, os nomes definidos nas declarações de entidade são então usados no XML. Quando usado no XML, esse nome é chamado de referência de entidade.
O Node Node NodeType of Entity Nome de referência Node Entry_Reference é 5, o nome do nó nodename é o nome da referência da entidade, e o NodEvalue é nulo
// Nome da entidade <! Publicador de entidade "Microsoft Press"> // Nome da entidade Referência <Pubinfo> Publicado por & Publisher; </pubinfo>
【6】 Nó do nome da entidade
Foi explicado em detalhes acima, então não vou repetir
O Node Node NodeType deste nó é 6, o nome do nó nodename é o nome da entidade, e o nodEvalue é nulo
【7】 Nó de instrução de processamento
O Node Node NodeType que lida com o nó de instrução ProcessingInstruction tem um valor de 7, o nome do nó nodename tem um valor de destino, e o NodEvalue tem um conteúdo inteiro, excluindo o alvo
【8】 Nó de anotação
Comentário Comentário Comentário representa comentários HTML na página da web. O valor do Node Node NodeType do nó anotado é 8, o valor do nome do nó nodename é '#Comment', e o valor do nodEvalue é o conteúdo do comentário
Agora, há um <!-estou comentar o conteúdo-> no elemento div com id id mydiv
<div id = "mydiv"> <!-eu sou o conteúdo do comentário-> </div> <cript> var com = mydiv.firstchild; // 8 '#Comment' 'eu sou o comentário content'console.log (com.nodetype, com.nodename, com.nodEvalue) console.log (node..commemy, node, com.nodename, com.nodEvalue))
【9】 Nó do documento
O documento do Nó do Documento representa um documento HTML, também conhecido como nó raiz, apontando para o objeto Document. O Node Node NodeType do nó do documento é 9, o nome do nó nodename é '#document' e o nodEvalue é nulo
<Cript> // 9 "#Document" nullconsole.log (document.nodetype, document.nodename, document.nodevalue) console.log (node.document_node === 9); // true </sCript>
【10】 Nó do tipo de documento
DocumentType Node DocumentType contém todas as informações sobre o doctype do documento. O valor Node Node NodeType do nó do tipo de documento é 10, o nome Nome NodeName Valor é o nome do doctype, e o valor NodEvalue é nulo
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </ititle> </ad head> <body> <cript> 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】 Nó de fragmento de documentos
DocumentFragment Node Fragment Node não possui tags correspondentes no documento. É um documento leve que pode conter e controlar nós, mas não superará recursos adicionais como um documento completo. O Node Node NodeType deste nó é 11, o nome do nó nodename é '#document-fragment' e o nodEvalue é nulo
<Cript> var NodEdocumentFragment = document.createCumentFragment (); // 11 "#document-fragment" nullconsole.log (NodedocumentFragment.nodetype, NodedocumentFragment.nodename, NodedocumentFragment.nodEvalue); console.log (node.document_fragment_node === 11); // true </script>
【12】 Nó de declaração DTD
A notação do nó da declaração do DTD representa o símbolo declarado em DTD. O Node Node NodeType deste nó é 12, o nome do nó nodename é o nome simbólico, e o nodEvalue é nulo
Resumir
Entre esses 12 tipos de nós DOM, alguns são adequados para documentos XML e outros não são comumente usados. Quanto aos tipos comumente usados, nós os apresentaremos em detalhes posteriormente. Este artigo fornece apenas uma visão geral desses 12 tipos de nós. Espero que este artigo seja útil para todos.