3/31/2018
DOM
DOM – hierarchical tree representation
of document
- collection of nodes that represent the web page
- JavaScript can modify the DOM
descendants
parents
JavaScript and jQuery Course children
siblings
Session 09 DOM
nodes
2
Methods of document interface - not in text
DOM access methods - return object reference querySelector(), querySelectorAll()
How we can access an element(s) on the page // Access the first match of the selector
document.querySelector('.myClass');
document.getElementById(id)
// Return a NodeList of all instances of .myClass
document.querySelectorAll('.myClass');
document.getElementsByClassName(className)
document.getElementsByTagName(tagName) // Access the myID id - unique
document.querySelector('#myID');
document.getElementsByName(form_Name) – radio buttons
// Return a NodeList of all 'div' instances
document.querySelectorAll('div');
document.querySelector(cssSelector)
//Access the first match of the selector
document.querySelectorAll(cssSelector) document.querySelector('ul.someList li:last-child');
3 4
1
3/31/2018
Traversing the DOM Method of document interface
How we can access an element(s) on the page
firstElementChild / firstChild var btn = document.getElementById(“btn“);
lastElementChild / lastChild
nextElementChild / nextElementSibling
document.btn.addEventListener("click", calc);
previousElementChild / previousElementSibling
vs
childNodes (has a length property)
document.btn.onclick = calc;
childNodes[i]
Children / children[i] – only child elements
parentElement / parentNode
5 6
Modifying styles – Traditional JavaScript Manipulating the DOM
Uses JS syntax, not CSS syntax – style property How we can add and remove HTML elements and text
document refers to <body> / you can identify a parent node also
var headEl – document.getElementsByTagName("h1“)[0];
headEl.style.color = "hotpink"; document.createElement()
headEl.style.backgroundColor = "salmon"; document.createTextNode()
document.appendChild()
JS Syntax
doccument.insertBefore(newNode/what, referenceNode/where)
document.replaceChild(newChild, oldChild)
document.removeChild(child)
7 8
2
3/31/2018
Methods Commonly Used with Forms Events Commonly Used with Forms
submit() – calls the action and sends the name/value pairs onsubmit() – when the form is submitted
onreset() – when the form values are reset
reset() – sets the values to the initial state (clears the form)
onfocus() – when the control receives focus
focus() – places focus, i-beam cursor, on the control
onblur() – when the control looses focus
blur() – removes focus, i-beam cursor, on the control onselect() – when the user selects the contents of a text box
onchange() – when the value of a control changes
select() – selects the contents of a text box
onclick() – when the user clicks on a control
oninput() – when a control receives user input
9 10
Using JavaScript with HTML Forms Using JavaScript with HTML Forms
<form action=“script to process data“ method=“post or get” id=“” name=“”>
<input type=“submit”>
<input type=“reset”>
<input type=“button”>
11 12
3
3/31/2018
Using JavaScript with HTML Forms Using JavaScript with HTML Forms
Data Validation – checking the form elements to make sure that they are
filled in as required <input type=“button”>
Response
Page
13 14
Using JavaScript with HTML Forms JavaScript Form Properties
“value” property – textboxes, textarea -> return empty if blank
“value” property – select (drop down) first option is selected by default
15 16
4
3/31/2018
JavaScript Form Properties Textbox Validation
“value” property – radio, checkbox – need to be “checked” to return a value
- if not checked they are “null”
“checked” property – radio, checkbox
- returns true if checked
- returns false if not checked
Radio group must have the same “name” but unique ids
<input type=“radio” name=“xyz” id=“1”>
17 18
Select (drop down) Validation Checkbox Validation
19 20
5
3/31/2018
Radio Validation
21
