O melhor tutorial navegação HTML DOM em 2024. Neste tutorial você pode aprender
lista de nós HTML DOM,Exemplos,HTML DOM Lista Nó Comprimento,Exemplos,relacionamento nó de navegação,Exemplos,nó raiz DOM,Exemplos,childNodes e nodeValue,Exemplos,
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
var
x=document.getElementsByTagName("p");
Ele pode ser acessado pela próxima etiqueta. Para acessar a segunda <p>, você pode escrever:
y=x[1];
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
x=document.getElementsByTagName("p");
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:
<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
<html>
<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
<html>
<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
<html>
<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.