introdução html dom
TRANSCRIPT
Introdução HTML DOM
O HTML DOM define um padrão para acessar e manipular documentos HTML.
O que você deve já saber
Antes de continuar você deve ter um conhecimento básico dos seguintes procedimentos:
HTML / XHTML
Java script
O que é o DOM?
O DOM é um padrão W3C (World Wide Web Consortium).
O DOM define um padrão para o acesso a documentos como HTML e XML.
"O W3C Document Object Model (DOM) é uma linguagem neutra e interface da plataforma que permite que programas e scripts para acessar e atualizar dinamicamente o conteúdo, estrutura e estilo de um documento."
O DOM é separado em 3 partes distintas / níveis:
DOM Core - modelo padrão para qualquer documento estruturado
XML DOM - modelo padrão para documentos XML HTML DOM - modelo padrão para documentos HTML
O DOM define os objetos e as propriedades de todos os elementos do documento, e os métodos (interface) para acessá-los.
O que é DOM XML?
O XML DOM define os objetos e as propriedades de todos os elementos XML e os métodos (interface) para acessá-los.
O que é HTML DOM?
O HTML DOM É:
Um modelo de objeto padrão para HTML
Uma interface de programação padrão para HTML Plataforma e linguagem independente Um padrão W3C
O HTML DOM define os objetos e as propriedades de todos os elementos HTML, e os métodos (interface) para acessá-los.
Em outras palavras: O HTML DOM é uma norma para saber como obter, alterar, adicionar ou excluir elementos HTML.
HTML nó de árvore DOM
O HTML DOM vistas um documento HTML como um nó de árvore. Todos os nós da árvore têm relações entre si.
A Árvore nó HTML DOM
O HTML DOM vistas um documento HTML como uma estrutura de árvore. A estrutura da árvore é chamado de nó de árvore.
Todos os nós podem ser acessados através da árvore. Seu conteúdo pode ser modificado ou excluído, e novos elementos podem ser criados.
A árvore do nó abaixo mostra o conjunto de nós e as conexões entre eles. A árvore começa no nó raiz e se ramifica para os nós de texto no nível mais baixo da árvore:
Pais nó, os filhos e irmãos
Os nós na árvore de nós têm uma relação hierárquica entre si. Os termos criança, pais e irmãos são usados para descrever as relações. Nós pais têm filhos. Crianças no mesmo nível são chamadas de irmãos (irmãos ou irmãs).
Em uma árvore de nós, o nó superior é chamado de raiz
Cada nó, exceto a raiz, tem exatamente um nó pai
Um nó pode ter qualquer número de filhos
Uma folha é um nó sem filhos
Os irmãos são os nós com o mesmo pai
A imagem a seguir ilustra uma parte da árvore de nós e da relação entre os nós:
Olhe para o fragmento de HTML a seguir:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
O nó <html> não tem um nó pai ; Ele é o nó raiz.
O nó pai dos nos <head> e <body> é o no <html>.
O nó pai do nó texto "Hello world!" é o no <p>
O nó <html> tem dois nós filhos: <head> e <body>
O nó <head> tem um filho nó: o nó <title>
O nó <title> só tem um nó filho: O nó texto "DOM Tutorial".
Os nós <h1> e <p> são irmãos e nós filhos de <body>
First Child - Last Child
Primeiro filho e ultimo filho
O elemento <head> é o primeiro filho do elemento <html>, e o elemento <body> é o ultimo filho do elemento <html>.
O elemento <h1> é o primeiro filho do elemento<body> e o elemento<p> é o ultimo filho do elemento <body>
Nós HTML DOM
No DOM, tudo em um documento HTML é um nó.
DOM Nós
De acordo com o DOM, tudo em um documento HTML é um nó.
O DOM diz:
• Todo o documento é um nó de documento
• Cada elemento HTML é um nó de elemento
• O texto nos elementos HTML são nós de texto
• Cada atributo HTML é um nó de atributo
• Os comentários são nós de comentário
Exemplo DOM
Olhe para o documento HTML a seguir:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
O nó raiz no HTML é <html>.Todos os nós no documento estão contidos em <html>.
O nó <html> tem dois nós filhos: <head> e <body>
Propriedades DOM HTML e Métodos
Propriedades e métodos definem a interface de programação do DOM HTML.
Interface de Programação
No DOM, os documentos de HTML consistem de um conjunto de objetos de nó. Os nós podem ser acessados com Java script ou outras linguagens de programação. Neste tutorial vamos usar Java script.
A interface de programação do DOM é definida pelas propriedades e métodos padrão.
As propriedades são muitas vezes referidas como algo que é (ou seja, o nome de um nó).
Os métodos são muitas vezes referidos como algo que é feito (ou seja, remover um nó).
Propriedades DOM HTML
Algumas propriedades DOM:
x.innerHTML - o valor de x texto
x.nodeName - o nome x
x.nodeValue - o valor de x
x.parentNode - o nó pai de x
x.childNodes - os nós filho de x
x.attributes - os atributos dos nodos x
Nota: Na lista acima, x é um objeto de nó (elemento HTML).
Métodos DOM HTML
Alguns métodos DOM:
x.getElementById(id) - obtém o elemento com um id específico
x.getElementsByTagName(nome) - obter todos os elementos com um nome de marca especificada
x.appendChild (nó) - inserir um nó filho para x
x.removeChild (nó) - remove um nó filho de x
Nota: Na lista acima, x é um objeto de nó (elemento HTML).
A propriedade innerHTML
A maneira mais fácil de obter ou modificar o conteúdo de um elemento é usando a propriedade innerHTML.
A innerHTML não é uma parte da especificação do DOM do W3C. No entanto, é suportado por todos os principais navegadores.
A propriedade innerHTML é útil para a devolução ou substituição do conteúdo de elementos HTML(incluindo <html> e <body>), ele também pode ser usado para exibir a fonte de uma página que tenha sido modificado de forma dinâmica.
Exemplo:
O código a seguir obtém o innerHTML (texto) a partir do elemento <p> com id = "intro":
Exemplo
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>
Nesse exemplo, getElementById é um methodo,While innerHTML é uma propriedade.