Documento JavaScript DOM


Índice

    Mostrar índice


O objeto de documento HTML DOM é o proprietário de todos os outros objetos em sua página web.


O objeto de documento HTML DOM

O objeto document representa sua página da web.

Se você deseja acessar qualquer elemento de uma página HTML, você sempre começa acessando o objeto de documento.

Abaixo estão alguns exemplos de como você pode usar o objeto document para acessar e manipular HTML.


Encontrando Elementos HTML

document.getElementById(id)

Encontre um elemento por ID de elemento

document.getElementsByTagName(name)

Encontre elementos por nome de tag

document.getElementsByClassName(name)

Encontre elementos por nome de classe


Alterando Elementos HTML

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.style.property = new style

Alterar o estilo de um elemento HTML

element.setAttribute(attribute, value)

Alterar o valor do atributo de um elemento HTML


Adicionando e excluindo elementos

document.createElement(element)

Crie um elemento HTML

document.removeChild(element)

Remover um elemento HTML

document.appendChild(element)

Adicione um elemento HTML

document.replaceChild(new, old)

Substitua um elemento HTML

document.write(text)

Escreva no fluxo de saída HTML



Adicionando manipuladores de eventos

document.getElementById(id).onclick = function(){code}

Adicionando código do manipulador de eventos a um evento onclick


Encontrando objetos HTML

O primeiro HTML DOM Nível 1 (1998), definiu 11 objetos HTML, coleções de objetos e propriedades. Eles ainda são válidos em HTML5.

Mais tarde, no HTML DOM Nível 3, mais objetos, coleções e propriedades foram adicionados.

document.anchors

Retorna todos os elementos <a> que possuem um atributo name. Nível 1

document.applets

Obsoleto. Nível 1

document.baseURI

Retorna o URI base absoluto do documento. Nível 3

document.body

Retorna o elemento <body>. Nível 1

document.cookie

Retorna o cookie do documento. Nível 1

document.doctype

Retorna o tipo de documento do documento. Nível 3

document.documentElement

Retorna o elemento <html>. Nível 3

document.documentMode

Retorna o modo usado pelo navegador. Nível 3

document.documentURI

Retorna o URI do documento. Nível 3

document.domain

Retorna o nome de domínio do servidor de documentos. Nível 1

document.domConfig

Obsoleto.. Nível 3

document.embeds

Retorna todos os elementos <embed>. Nível 3

document.forms

Retorna todos os elementos <form>. Nível 1

document.head

Retorna o elemento <head>. Nível 3

document.images

Retorna todos os elementos <img>. Nível 1

document.implementation

Retorna a implementação do DOM. Nível 3

document.inputEncoding

Retorna a codificação do documento (conjunto de caracteres). Nível 3

document.lastModified

Retorna a data e hora em que o documento foi atualizado. Nível 3

document.links

Retorna todos os elementos <area> e <a> que possuem um atributo href. Nível 1

document.readyState

Retorna o status (carregando) do documento. Nível 3

document.referrer

Retorna o URI do referenciador (o documento de vinculação). Nível 1

document.scripts

Retorna todos os elementos <script>. Nível 3

document.strictErrorChecking

Retorna se a verificação de erros for aplicada. Nível 3

document.title

Retorna o elemento <title>. Nível 1

document.URL

Retorna a URL completa do documento. Nível 1