Propriedades de estrutura e conteúdo
NodeType
Todos os nós têm tipos e há um total de 12 tipos de nós.
A cópia do código é a seguinte:
Nó da interface {
// NodeType
const não assinado elemento curto_node = 1;
const não assinado curto attributo_node = 2;
const não assinado text_node = 3;
const não assinado CDATA_SECTION_NODE = 4;
const UNSigned Short entity_reference_node = 5;
const não assinado entity_node = 6;
const não assinado processamento curto_instruction_node = 7;
const não assinado comentário curto_node = 8;
const não assinado document_node = 9;
const não assinado document_type_node = 10;
const não assinado document_fragment_node = 11;
const não assinado Notation_node = 12;
...
}
Os dois nós mais importantes são nós de elemento (1) e nós de texto (3). O resto raramente é usado.
Por exemplo, ao listar todos os nós de elementos filhos, podemos iterar sobre ele e usar o ChildNodes [i] .NodeType! = 1 para detectar.
Aqui está o código de implementação:
A cópia do código é a seguinte:
<Body>
<div> Leitores permitidos: </div>
<ul>
<li> John </li>
<li> Bob </li>
</ul>
<!-um nó de comentário->
<Cript>
var ChildNodes = document.body.childnodes
for (var i = 0; i <childnodes.length; i ++) {
if (ChildNodes [i] .NodeType! = 1) Continue
Alerta (ChildNodes [i])
}
</script>
</body>
*pensar
O que o seguinte código solicitará:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<Body>
<Cript>
alerta (document.body.lastchild.nodetype)
</script>
</body>
</html>
NodeName, Tagname
O nome do Nodename e o Tagname contêm o nome do nó.
Para document.body
alerta (document.body.nodename) // corpo
Todos os nomes de nodenos no HTML serão capitalizados.
Quando o Nodename não está capitalizado
Essa situação é rara, se você estiver curioso, pode ler o seguinte.
Você provavelmente já sabe que existem duas maneiras de analisar os navegadores: padrão HTML e padrão __xml. Geralmente, o esquema HTML é usado, mas quando a tecnologia XMLHTTPREQUEST__ é usada para obter documentos XML, o esquema XML é usado.
O padrão XML também é usado no Firefox quando o tipo de conteúdo do documento XHTML é definido como xmlish.
No modo __xml, o nome do nó será retido, para que o corpo ou o corpo possam aparecer.
Portanto, se o documento XML para HTML for carregado do servidor através da tecnologia XMLHTTPREQUEST__, o nome do nó será retido.
Nodename e __TagName__ são os mesmos para elementos.
No entanto, os nós não eleitores também têm atributos Nodename, nos quais eles têm valores especiais:
alerta (document.nodename) // #document
A maioria dos tipos de nós não possui um atributo de nome de tag, e o nome da tagname do nó é anotado no IE é!.
Portanto, de um modo geral, o Nodename é mais significativo que o nome da tag. Mas o Tagname é como uma versão simplificada; portanto, quando você processa os nós do elemento apenas, pode usá -lo.
Innerhtml
O InnerHTML faz parte do padrão HTML5. Por favor, veja o link para obter detalhes
Ele permite o acesso ao conteúdo do nó no texto. O exemplo a seguir produzirá todo o conteúdo do documento.body e substitui -os pelo novo conteúdo.
A cópia do código é a seguinte:
<Body>
<p> O parágrafo </p>
<div> e um div </div>
<Cript>
alert (document.body.innerhtml) // Leia o conteúdo atual
document.body.innerhtml = 'yaaahoo!' // Substitua o conteúdo
</script>
</body>
O InnerHTML conterá um HTML eficiente. Mas os navegadores também podem analisar o HTML deformado.
InnerHTML pode ser usado em qualquer nó de elemento. É muito, muito útil.
armadilhas innerhtml
O Innerhtml não é tão simples quanto parece. Tem algumas armadilhas esperando pelos novatos e, às vezes, programadores experientes não podem evitá -lo.
O iNnerhtml do nó __table__ no ie é somente leitura
No IE, o Innerhtml é somente leitura em Col, Colgroup, FrameSet, Head, HTML, Style, Table, Tbody, Tfoot, Thead, Title, TR e outros elementos.
Nas tags da tabela no IE, o InnerHTML é somente leitura, exceto no TD.
Innerhtml não pode ser adicionado
A partir da estrutura da declaração, o InnerHTML pode executar operações de anexos, como:
chatdiv.innerhtml += "<div> oi <img src = 'smile.gif'/>! </div>"
ChatDiv.innerhtml += "Como você está?"
Mas o que foi feito de fato:
1. O conteúdo antigo é limpo
2. O novo conteúdo é analisado e inserido. O conteúdo não foi anexado, foi regenerado.
Portanto, todas as imagens e outros recursos serão recarregados após a operação +=, incluindo smile.gif.
Felizmente, existem outras maneiras de atualizar o conteúdo, que não usa o InnerHTML, portanto, não há nenhum problema mencionado acima.
NodEvalue
O InnerHTML é válido apenas para nós de elemento.
Para outros tipos de nós, eles usam a propriedade NodEvalue para obter o conteúdo. O exemplo a seguir ilustrará como funciona nos nós de texto e nos nós de comentários.
A cópia do código é a seguinte:
<Body>
O texto
<!-um comentário->
<Cript>
for (var i = 0; i <document.body.childnodes.length; i ++) {
alert (document.body.childnodes [i] .NodEvalue)
}
</script>
</body>
No exemplo acima, alguns avisos estão vazios por causa de nós em branco. Observe que nodEvalue === NULL para nós de script. Isso porque o script é um nó de elemento. Nó do elemento, use INnerHTML.
Resumir
NodeType
Tipo de nó. O mais importante é que o nó do elemento é 1, o nó de texto é 3 e é somente leitura.
NodeName/Tagname
Nome da tag de caps. Para nós não eleitores, o Nodename também terá valores especiais, somente leitura.
Innerhtml
O conteúdo do nó do elemento pode ser escrito.
NodEvalue
O conteúdo do nó de texto pode ser escrito.
O nó DOM possui outros atributos de acordo com seu tipo. Por exemplo, a tag de entrada possui os atributos de valor e __checked__. O atributo A tem href e assim por diante.
O exposto acima é tudo sobre este artigo, espero que gostem.