• Pegando e lendo componentes

• Alterando atributos

• Atribuindo eventos

• Criando/removendo elementos

DOM

WindowFrame

Document

Ancher

Form

Text

Textarea

Checkbox

Radio

Select

Reset

Button

Password

submit

Link

image

Location

history

Linguagem Javascript

DOM

• Document.• .getElementById()

• .getElementsByClassName()

• .getElementsByName()

• .getElementsByTagName()

Seleções

<div><label for="nome">Nome:</label><input type="text" id="txtNome" value="teste"><button>Enviar</button>

</div>

var input = document.querySelector('#txtNome');

input.value //"teste“= "outro valor";

DOM

• Document.• .getElementById()

• .getElementsByClassName()

• .getElementsByName()

• .getElementsByTagName()

Seleções

• Document.• .querySelector()

• .querySelectorAll()

• Principais seletores CSS

<div><label for="nome">Nome:</label><input type="text" id="txtNome" value="teste"><button>Enviar</button>

</div>

var input = document.querySelector('#txtNome');

input.value //"teste“= "outro valor";

DOM

• Element.• .value

• .className

• .id

• .name

• .tagName

• .innerHTML

• .setAttribute(‘attr’,’value’)

• .getAttribute(‘attr’)

Atributos

DOM

• Criando, pendurando e removendo elementos

• Document.• .createElement

• .createtextNode

• Element.• .appendChild

• .removeChild

Eventos

var button = document.createElement('button');

var body = document.querySelector('body');

body.appendChild(input);

var text = document.createTextNode('Enviar');

button.appendChild(text);

body.removeChild(button);

• Gere uma tabela com as tabuadas• Document.

• .querySelector()

• .createElement()

• .createTextNode()

• Element.• .appendChild()

• Table• <table> - a própria

• <tr> - table row

• <td> - table data