Scribd
Upload
16 views

JS-jQuery Session 09 Handout

Uploaded by

burhan yıldız
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

JS-jQuery Session 09 Handout

Uploaded by

burhan yıldız
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like