voltarHome

DOM - Document Objetc Model


TAG

O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Ele é utilizado pelo navegador Web para representar a sua página Web, uma interface que representa como os documentos HTML e XML são lidos pelo seu browser e permite o tratamento de componentes visuais.

Exercícios do Professor Guanabara

Aqui vai o resultado!

Aprendendo a usar o DOM em JavaScript.

Clique em mim

Abaixo temos a resentação da árvore DOM do Exercício acima:

representacao da arvore DOM

Onde:

  • window: É a Raiz, tudo está dentro da window. Cada janela do seu navegador é uma window.
  • location: É um objeto dentro da window. É a url do site (págin anterior, próxima, etc.).
  • document: Documento atual.
  • history: Histórico da navegação do seu site, de onde você veio, pra onde você vai, etc.
  • html: Estrutura HTML do site.
  • head: Filho de html e pai de meta, title, etc
  • body: Filho de html e pai de h2, p, div, etc
  • p: dentro do P ainda tem um strong.

Como foram exibidas as informações apresentadas no - EXEMPLOS DE MANIPULAÇÃO DOM: 

        <script>
            window.document.write('- EXEMPLOS DE MANIPULAÇÃO DOM <br>')
            window.document.write('O Charset do documento é: '+ window.document.charset +'<br>');
            window.document.write('O navegador usado é o: ' + window.navigator.appName + '<br>');
            window.document.write('Minha URL é: ' + window.document.URL +'<br>')
        </script>

Existem muitas maneiras de selecionar os elementos para navegar dentro da árvore DOM:

  • Por Marca: usamos para isso uma TagName getElementsByTagName(). Usando esta tag é possível selecionar mais de um elemento (dois parágrafos, por exemplo).

    Como foram exibidas as informações apresentadas no - USANDO TAGNAME: 

        <div>
        <h2>Exercícios do Professor Guanabara</h2>
        <p>Aqui vai o resultado!</p>
        <p>Aprendendo a usar o <strong>DOM</strong> em JavaScript.</p>
        <div>Clique em mim</div>
        <script>
            var p1=window.document.getElementsByTagName('p') [1]
            window.document.write('Está escrito assim: '+ p1.innerText) //se usar innerHTML trás a formatação original
            p1.style.color = 'blue' //altera a cor do parágrafo original
        </script>
    </div>

  • Por ID: 

        <div>
        <h2>Exercícios do Professor Guanabara</h2>
        <div id="msg">Usando ID</div>
        <script>
            var d = window.document.getElementById('msg')
            d.innerText='Estou alterando o texto original...' //Usado para mudar o texto original.
            window.document.getElementById('msg').innerText='Estou alterando o texto original...' //mesmo comando anterior.
        </script>
    </div>

  • Por Name: 

        <div>
        <h2>Exercícios do Professor Guanabara</h2>
        <div name="msg">Usando NAME</div>
        <script>
            var d = window.document.getElementsByName('msg')[0]
        </script>
    </div>

  • Por Classe: 

        <div>
        <h2>Exercícios do Professor Guanabara</h2>
        <div class="msg">Usando CLASSE</div>
        <script>
            var d = window.document.getElementsByClassName('msg')[0]
        </script>
    </div>

  • Por Seletor:

    Essa forma de selecionar elementos é a mais nova e é a mais indicada. Usamos para isso o querySelector() e querySelectorAll() 

        <div>
        <h2>Exercícios do Professor Guanabara</h2>
        <div class="msg">Usando SELETOR</div>
        <script>
            var d = window.document.querySelectorAll('div.msg')
            d.style.color='green'
        </script>
    </div>

voltarHome