Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Introdução HTML DOM

    Загружено:

    fabiogbe@yahoo.com.br
    612 просмотров8 страниц

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    612 просмотров8 страниц

    Introdução HTML DOM

    Загружено:

    fabiogbe@yahoo.com.br

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 8

    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.

    Вам также может понравиться