Javascript para CSharpers - Append A - DOM

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

Window
Frame
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

Javascript para CSharpers - Append A - DOM

More Related Content

More from Wesley Lemos (10)

Javascript para CSharpers - Append A - DOM

Editor's Notes