O objeto de documento HTML DOM é o proprietário de todos os outros objetos em sua página web.
O objeto HTML DOM Document
O objeto documento representa a sua página web.
Se você deseja acessar qualquer elemento em uma página HTML, você sempre começar com acessando o objeto documento.
Abaixo estão alguns exemplos de como você pode usar o objeto de documento para acessar e manipular HTML.
Encontrar elementos HTML
| Método | Descrição |
|---|---|
| document.getElementById( id ) | Localizar um elemento por elemento id |
| document.getElementsByTagName( name ) | Encontrar elementos pelo nome tag |
| document.getElementsByClassName( name ) | Encontrar elementos pelo nome da classe |
Mudando elementos HTML
| Método | Descrição |
|---|---|
| element .innerHTML = new html content | Alterar o HTML interno de um elemento |
| element . attribute = new value | Alterar o valor do atributo de um elemento HTML |
| element .setAttribute (attribute, value) | Alterar o valor do atributo de um elemento HTML |
| element .style. property = new style | Mude o estilo de um elemento HTML |
Adicionar e eliminar Elements
| Método | Descrição |
|---|---|
| document.createElement( element ) | Criar um elemento HTML |
| document.removeChild( element ) | Remover um elemento HTML |
| document.appendChild( element ) | Adicionar um elemento HTML |
| document.replaceChild( element ) | Substituir um elemento HTML |
| document.write( text ) | Escrever para o fluxo de saída HTML |
Adicionando Eventos manipuladores
| Método | Descrição |
|---|---|
| document.getElementById( id ).onclick = function(){ code } | Adicionando código do manipulador de eventos para um onclick evento |
Encontrar objetos HTML
O primeiro HTML DOM Nível 1 (1998), definido objetos 11 HTML, coleções de objetos e propriedades. Estes ainda são válidos em HTML5.
Mais tarde, em HTML DOM Nível 3, foram adicionados mais objetos, coleções e propriedades.
| Propriedade | Descrição | DOM |
|---|---|---|
| document.anchors | Retorna todos os <a> elementos que têm um atributo de nome | 1 |
| document.applets | Retorna todos <applet> elementos (Reprovado na HTML5) | 1 |
| document.baseURI | Retorna o URI de base absoluta do documento | 3 |
| document.body | Retorna o <body> elemento | 1 |
| document.cookie | Retorna o cookie do documento | 1 |
| document.doctype | Retorna doctype do documento | 3 |
| document.documentElement | Retorna o <html> elemento | 3 |
| document.documentMode | Retorna o modo utilizado pelo navegador | 3 |
| document.documentURI | Retorna o URI do documento | 3 |
| document.domain | Retorna o nome do domínio do servidor de documentos | 1 |
| document.domConfig | Obsoleta. Retorna a configuração DOM | 3 |
| document.embeds | Retorna todos <embed> elementos | 3 |
| document.forms | Retorna todos <form> elementos | 1 |
| document.head | Retorna o <head> elemento | 3 |
| document.images | Retorna todos <img> elementos | 1 |
| document.implementation | Retorna a implementação DOM | 3 |
| document.inputEncoding | Retorna a codificação do documento (conjunto de caracteres) | 3 |
| document.lastModified | Retorna a data e hora que o documento foi atualizado | 3 |
| document.links | Retorna todos os <area> e <a> elementos que têm um atributo href | 1 |
| document.readyState | Retorna o status (de carga) do documento | 3 |
| document.referrer | Retorna o URI do referencial (o documento de ligação) | 1 |
| document.scripts | Retorna todos <script> elementos | 3 |
| document.strictErrorChecking | Retorna se a verificação de erros é aplicada | 3 |
| document.title | Retorna o <title> elemento | 1 |
| document.URL | Retorna a URL completa do documento | 1 |