logo

Modelo de objeto de documento

  1. Objeto de documento
  2. Propriedades do objeto de documento
  3. Métodos de objeto de documento
  4. Exemplo de objeto de documento

O objeto de documento representa todo o documento HTML.

Quando o documento HTML é carregado no navegador, ele se torna um objeto de documento. É o elemento raiz que representa o documento HTML. Possui propriedades e métodos. Com a ajuda do objeto de documento, podemos adicionar conteúdo dinâmico à nossa página web.

Como mencionado anteriormente, é o objeto da janela. Então

 window.document 

É o mesmo que

 document 

De acordo com W3C - 'O Document Object Model (DOM) do W3C é uma plataforma e interface de linguagem neutra que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de um documento.'


Propriedades do objeto de documento

Vamos ver as propriedades do objeto documento que podem ser acessadas e modificadas pelo objeto documento.


Métodos de objeto de documento

Podemos acessar e alterar o conteúdo do documento por meio de seus métodos.

Os métodos importantes do objeto de documento são os seguintes:

MétodoDescrição
escrever('string')escreve a string fornecida no documento.
writeln('string')escreve a string fornecida no documento com caractere de nova linha no final.
getElementById()retorna o elemento com o valor de id fornecido.
getElementsByName()retorna todos os elementos com o valor do nome fornecido.
getElementsByTagName()retorna todos os elementos com o nome de tag fornecido.
getElementsByClassName()retorna todos os elementos com o nome de classe fornecido.

Acessando o valor do campo por objeto de documento

Neste exemplo, obteremos o valor do texto de entrada por usuário. Aqui, estamos usando documento.form1.nome.valor para obter o valor do campo de nome.

Aqui, documento é o elemento raiz que representa o documento HTML.

formulário 1 é o nome do formulário.

nome é o nome do atributo do texto de entrada.

valor é a propriedade que retorna o valor do texto de entrada.

Vejamos o exemplo simples de objeto de documento que imprime o nome com a mensagem de boas-vindas.

 function printvalue(){ var name=document.form1.name.value; alert('Welcome: '+name); } Enter Name: 

Saída do exemplo acima

Insira o nome: