Latest web development tutorials
×

JavaScript curso

JavaScript curso JavaScript breve introdução JavaScript uso JavaScript exportação JavaScript gramática JavaScript demonstrações JavaScript nota JavaScript variável JavaScript Tipos de dados JavaScript objetos JavaScript função JavaScript escopo JavaScript evento JavaScript corda JavaScript operadores JavaScript comparar JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript tipo de conversão JavaScript Expressões regulares JavaScript erro JavaScript depuração JavaScript lift variável JavaScript Modo estrito JavaScript Uso indevido JavaScript Autenticação de formulários JavaScript Palavras-chave reservadas JavaScript JSON JavaScript void JavaScript Especificação código

JS função

JavaScript definição de função JavaScript Argumentos da função JavaScript chamada de função JavaScript Closures

JS HTML DOM

DOM breve introdução DOM HTML DOM CSS DOM evento DOM EventListener DOM elemento

JS Tutorial avançado

JavaScript objetos JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp objetos

JS navegador BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript estouro JavaScript cronometrado Evento JavaScript Cookies

JS armazém

JavaScript armazém JavaScript teste jQuery JavaScript teste Prototype

JS Exemplos

JavaScript Exemplos JavaScript instância do objeto JavaScript instância do objeto navegador JavaScript HTML DOM Exemplos JavaScript resumo

JS manual de referência

JavaScript objetos HTML DOM objetos

JavaScript HTML DOM

Através do DOM HTML, o acesso a todos os elementos do documento JavaScript HTML.

HTML DOM (Document Object Model)

Quando a página é carregada, o navegador irá criar o modelo de objeto de documento de página (Document Object Model).

modelo HTML DOM é estruturado como uma árvore de objetos:

árvore HTML DOM

árvore DOM HTML

modelo de objeto programável, JavaScript ganhou capacidade suficiente para criar HTML dinâmico.

  • JavaScript pode mudar a página para todos os elementos HTML
  • JavaScript pode mudar página HTML todas as propriedades
  • JavaScript pode mudar página de todos os estilos CSS
  • JavaScript pode reagir a toda página de eventos

Encontrar elementos HTML

Normalmente, JavaScript, você precisa para manipular elementos HTML.

A fim de fazer isso, você deve primeiro encontrar o elemento. Há três maneiras de fazer isso:

  • Encontrar elementos HTML por id
  • Encontrar elementos HTML por nome tag
  • Encontrar elementos HTML pelo nome da classe

Encontrar elementos HTML por id

Encontrar elementos HTML no DOM A maneira mais fácil é usando o id do elemento.

Este exemplo encontra id = elemento "intro":

Exemplos

var x = document.getElementById ( "intro");

tente »

Se encontra o elemento, o método será a forma objeto (x em) o retorno desse elemento.

Se o elemento não é encontrado, então x conterá nulo.

Encontrar elementos HTML por nome tag

Este exemplo encontra id = elementos "principais" e, em seguida, procurar id = elemento "principal" em todos os elementos <p>:

Exemplos

var x = document.getElementById ( "main");
var y = x.getElementsByTagName ( "p");

tente »

Encontrar elementos HTML pelo nome da classe

Neste caso porgetElementsByClassName função para encontrar o class = elemento "intro":

Exemplos

var x = document.getElementsByClassName ( "intro");

tente »

HTML DOM Tutorial

Neste tutorial, os seguintes páginas, você vai aprender:

  • Como alterar o conteúdo do elemento HTML (innerHTML)
  • Como alterar o estilo de elementos HTML (CSS)
  • Como evento HTML DOM de uma reação
  • Como faço para adicionar ou remover elementos HTML