javascript para csharpers - append a - dom
TRANSCRIPT
![Page 1: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/1.jpg)
![Page 2: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/2.jpg)
• Pegando e lendo componentes
• Alterando atributos
• Atribuindo eventos
• Criando/removendo elementos
DOM
![Page 3: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/3.jpg)
WindowFrame
Document
Ancher
Form
Text
Textarea
Checkbox
Radio
Select
Reset
Button
Password
submit
Link
image
Location
history
Linguagem Javascript
![Page 4: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/4.jpg)
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";
![Page 5: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/5.jpg)
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";
![Page 6: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/6.jpg)
DOM
• Element.• .value
• .className
• .id
• .name
• .tagName
• .innerHTML
• .setAttribute(‘attr’,’value’)
• .getAttribute(‘attr’)
Atributos
![Page 7: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/7.jpg)
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);
![Page 8: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/8.jpg)
![Page 9: Javascript para CSharpers - Append A - DOM](https://reader038.vdocuments.us/reader038/viewer/2022100803/5a6dd4437f8b9a665f8b4917/html5/thumbnails/9.jpg)
• Gere uma tabela com as tabuadas• Document.
• .querySelector()
• .createElement()
• .createTextNode()
• Element.• .appendChild()
• Table• <table> - a própria
• <tr> - table row
• <td> - table data