Básico de manipulação de DOM com javascript

2. • Pegando e lendo componentes
• Alterando atributos
• Atribuindo eventos
• Criando/removendo elementos
DOM

3. Window
Frame
Document
Ancher
Form
Text
Textarea
Checkbox
Radio
Select
Reset
Button
Password
submit
Link
image
Location
history
Linguagem Javascript

4. 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";

5. 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";

6. DOM
• Element.
• .value
• .className
• .id
• .name
• .tagName
• .innerHTML
• .setAttribute(‘attr’,’value’)
• .getAttribute(‘attr’)
Atributos

7. 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);

9. • Gere uma tabela com as tabuadas
• Document.
• .querySelector()
• .createElement()
• .createTextNode()
• Element.
• .appendChild()
• Table
• <table> - a própria
• <tr> - table row
• <td> - table data