Você está aqui: JavaScript ::: DOM (Document Object Model) ::: document Object |
JavaScript DOM - Como usar o objeto document em seus códigos JavaScriptQuantidade 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. |
![]() |
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 |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |