navegação HTML DOM
Através do DOM HTML, você é capaz de usar o nó no relacionamento árvore de navegação nó.
lista de nós HTML DOM
getElementsByTagName () retorna uma lista de nós. lista de nós é uma matriz nó.
O seguinte código de documento selecionado todos <p> nó:
Exemplos
Ele pode ser acessado pela próxima etiqueta. Para acessar a segunda <p>, você pode escrever:
tente »
Nota:
Sob o rótulo começa em 0.
HTML DOM Lista Nó Comprimento
atributo de comprimento define o número de nós na lista de nós.
Você pode usar a propriedade comprimento para lista de nós loop:
Exemplos
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
tente »
exemplos de análise:
- Obter todos <p> elemento nó
- O valor de cada elemento <p> o nó de saída de texto
relacionamento nó de navegação
Você pode usar três atributos de nó: parentNode, firstChild e lastChild, navegue através da estrutura do documento.
Considere o seguinte fragmento de HTML:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- O primeiro elemento <p> é o primeiro filho do elemento <body> (firstChild)
- <Div> elemento é o último elemento filho elemento <body> (lastChild)
- <Body> elemento é o primeiro elemento <p> e <div> nó pai do elemento (parentNode)
propriedade firstChild pode ser usado para acessar os elementos do texto:
Exemplos
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
tente »
nó raiz DOM
Há dois atributos especiais, você pode acessar toda a documentação:
- document.documentElement - todos os documentos
- document.body - corpo do documento
Exemplos
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
tente »
childNodes e nodeValue
Além de innerHTML propriedade, você também pode usar os childNodes e nodeValue propriedade para obter o conteúdo do elemento.
O código a seguir obtém o id = "intro" os <p> valores de elementos:
Exemplos
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
tente »
No exemplo acima, é um método getElementById, enquanto childNodes e nodeValue são propriedades.
Neste tutorial, vamos usar a propriedade innerHTML. No entanto, o método de aprendizagem acima ajuda a navegar a estrutura da árvore DOM e compreensão.