Ofereço ajuda em Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD
+55 (062) 98553-6711
Ofereço ajuda em PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO
+55 (062) 98243-1195

Você está aqui: JavaScript ::: DOM (Document Object Model) ::: document Object

JavaScript DOM - Como usar o objeto document em seus códigos JavaScript

Quantidade de visualizações: 7877 vezes
O objeto document representa a página HTML e fornece possibilidades para acessar, criar e manipular todos os elementos HTML no documento. Este objeto está logo abaixo do objeto window na hierarquia do DOM (Document Object Model), ou seja, podemos dizer que este elemento é filho do objeto window. Assim, para acessá-lo a partir de nossos códigos JavaScript podemos usar window.document ou simplesmente document. Veja:

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos obter o título desta página
  var titulo = window.document.title;

  // vamos exibir o resultado em uma mensagem alert
  window.alert("O título da página é: " + titulo);  
</script>

</body>
</html>


Neste exemplo nós usamos o objeto window para obter o objeto document. O passo seguinte foi obter o valor de sua propriedade title, que é usada para definir ou obter o título da página HTML.

Para obter um elemento em um documento HTML nós podemos usar as coleções (all, anchors, applets, etc), os métodos getElementById(), getElementsByName() e getElementsByTagName() e algumas outras propriedades e métodos. Se precisarmos acessar o elemento body ou html, podemos usar as propriedades document.documentElement e document.body.

Veja um trecho de código no qual acessamos o corpo do documento HTML e definimos sua cor de fundo:

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

<script type="text/javascript">
  // vamos definir a cor de fundo da página HTML
  window.document.body.bgColor = "Beige";  
</script>


Uma vez que o objeto document é um objeto contâiner para um documento HTML, ele fornece métodos para a crição de novos elementos (por meio do método createElement()), nós textos (createTextNode()) e nós de comentários (createComment()). Depois que um nó (node) é criado, ele pode ser inserido no documento por meio de chamadas aos métodos appendChild() e insertBefore().

Veja um trecho de código no qual usamos o método createElement() para criar um novo elemento div e logo em seguida usamos o método appendChild() para adicionar o elemento recém-criado no final do documento HTML:

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
   // vamos criar um novo elemento div
   var elem = document.createElement("div");
   elem.innerHTML = "Sou uma div criada dinâmicamente";
   elem.style.backgroundColor = "beige";

   // vamos adicionar este novo elemento no final do documento
   document.body.appendChild(elem);
</script>

</body>
</html>

Os documentos HTML contidos em elementos frames e iframes possuem seus próprios objetos document. Para obter tais objetos, devemos usar a propriedade contentDocument.

Link para compartilhar na Internet ou com seus amigos:

Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 23 usuários muito felizes estudando em nosso site.