Autoria Web

DOM

Prof. Silvano Oliveira / 18

Document Object Model
● Definido pelo W3C
● Permite:
●Acessar,
●Criar,
●Manipular documento
●Estrutura
●Estilo

Prof. Silvano Oliveira Autoria WEB 2 / 18

Mapeando seu código HTML

Prof. Silvano Oliveira Autoria WEB 3 / 18

Nós de elemento

Adaptado de: Só JavaScript / Kevin Yank e Cameron Adams

Prof. Silvano Oliveira Autoria WEB 4 / 18
Nó de documento

Adaptado de: Só JavaScript / Kevin Yank e Cameron Adams

Prof. Silvano Oliveira Autoria WEB 5 / 18
Nós de texto

Adaptado de: Só JavaScript / Kevin Yank e Cameron Adams

Prof. Silvano Oliveira Autoria WEB 6 / 18
Nós de atributo

Adaptado de: Só JavaScript / Kevin Yank e Cameron Adams

Prof. Silvano Oliveira Autoria WEB 7 / 18
Acessando os nós desejados
●Padrão geral:
1. Especificar o elemento ou grupo de elementos que você deseja
afetar;
2. Especificar o efeito que você deseja aplicar neles

Prof. Silvano Oliveira Autoria WEB 8 / 18

Localizando pelo id

●Em termos gerais:

1) Encontre o elemento com ID elementounico;
2) Torne sua cor azul.

Prof. Silvano Oliveira Autoria WEB 9 / 18

Localizando pelo id

Prof. Silvano Oliveira Autoria WEB 10 / 18

Localizando pelo id

Prof. Silvano Oliveira Autoria WEB 11 / 18

Elementos nulos

Prof. Silvano Oliveira Autoria WEB 12 / 18

Localizando pelo nome da tag

Prof. Silvano Oliveira Autoria WEB 13 / 18

Localizando pelo nome da tag

Prof. Silvano Oliveira Autoria WEB 14 / 18

Percorrendo uma lista de nós

Prof. Silvano Oliveira Autoria WEB 15 / 18

Atividade
●A partir do exemplo anterior, tente alterar a propriedade innerHTML
de todos os elementos <li> de um documento HTML.

●Sugestão: Acrescente dois botões em uma página que contenha uma

lista. Um dos botões exibe o innerHTML dos itens da lista e o outro
modifica

Prof. Silvano Oliveira Autoria WEB 16 / 18

Perguntas???

Prof. Silvano Oliveira Autoria WEB 17 / 18

Referências
●https://developer.mozilla.org/En/DOM/Element.innerHTML

Prof. Silvano Oliveira Autoria WEB 18 / 18