JavaScript DOM - Dynamic interactive Code

JavaScript
DOM
Document Object Model
Power your websites

Learn More -
Videos and source
code included
Get this Course
https://www.udemy.com/javascript-course-
dom/?couponCode=SLIDESHARE
Course instructor : Laurence Svekis - providing online
training to over 500,000 students across hundreds of
courses and many platforms.

JavaScript DOM
● What is the DOM
● Examine the page DOM
● console.dir(document)

JavaScript DOM
The Document Object Model (DOM) is a programming
interface for HTML and XML documents. It represents the
page so that programs can change the document
structure, style, and content. The DOM represents the
document as nodes and objects.
● JavaScript can add, change, remove all of the HTML elements and attributes in the page.
● JavaScript can change all of the CSS styles in the page.
● JavaScript can react to all the existing events in the page.
● JavaScript can create new events within the page.
1. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
2. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
3. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples

JavaScript and the DOM
First Select the element you want to use.

Lesson Challenge
Select an element on the page find it in the
document object using console.dir(document)

Element Selection
● How to select an element as an object
● getElementById
● querySelector
● Update Background
● Select using CSS

JavaScript DOM
1. Many options for element selection.
2. Use its ID or querySelector with either id,
tag, or class.
3. Use CSS type selectors
The querySelector() method of the Element
interface returns the first element that is a
descendant of the element on which it is
invoked that matches the specified group of
selectors.
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
console.log(document.getElementById('myID'));
console.log(document.querySelector('#myID'));
console.log(document.querySelector('.first'));
console.log(document.querySelector('div'));
document.querySelector('span').style.backgroundColor =
"yellow";
document.querySelector('.first span').style.backgroundColor =
"blue";
document.querySelector('li:first-child').style.backgroundColor =
"red";
document.querySelector('li:last-child').style.backgroundColor =
"green";
document.querySelector('li:nth-child(2)').style.backgroundColor
= "purple";

Lesson Challenge
Select elements from the HTML and update the
background color.
<div id="myID">This is the first DIV</div>
<div class="first"> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span>
<span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span
7!</span> </div>
<p class="first">Hello World</p>
<ul class="second">
<li class="first"><a href="#">Link One</a></li>
<li class="first"><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li class="first"><a href="#">Link Five</a></li>
<li class="first"><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
</ul>

Code Snippet
console.log(document.getElementById('myID'));
console.log(document.querySelector('#myID'));
console.log(document.querySelector('.first'));
console.log(document.querySelector('div'));
document.querySelector('span').style.backgroundColor = "yellow";
document.querySelector('.first span').style.backgroundColor = "blue";
document.querySelector('li:first-child').style.backgroundColor = "red";
document.querySelector('li:last-child').style.backgroundColor = "green";
document.querySelector('li:nth-child(2)').style.backgroundColor = "purple";

Multiple Element Selection
● Get multiple elements
● getElementsByClassName
● getElementsByTagName
● querySelectorAll
● Iterate element list with for loop
● Iterate element list with forEach

JavaScript Multiple element selection
The Element method querySelectorAll()
returns a static (not live) NodeList representing
a list of elements matching the specified group
of selectors which are descendants of the
element on which the method was called.
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
let elist = document.getElementsByClassName('myClass')
elist = document.getElementsByTagName('span');
elist = document.querySelectorAll('span')

Lesson Challenge
Select a element group with more than one element
from the HTML and update the text content
<div id="myID">This is the first DIV</div>
<div class="first"> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span>
<span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span
7!</span> </div>
<ul class="second">
</ul>

Code Snippet
let elementList = document.getElementsByClassName('myClass')
elementList = document.getElementsByTagName('span');
elementList = document.querySelectorAll('span')
for (let i = 0; i < elementList.length; i++) {
let el = elementList[i];
elementList[i].textContent = i + 1 + ' Updated';
console.log(el);
console.log(i);
}
elementList.forEach(function (el, index) {
console.log(el);
console.log(index);
el.textContent = `${index}: Updated`;
});

Element Manipulation
● Update inner Content
● Update element attributes getAttribute
setAttribute
● Update element style attribute

JavaScript Manipulation
Select an element, set its innerHTML
Set current contents as javascript variable
value
Update current contents with variable value
innerContent
innerText
innerHTML
const el1 = document.querySelector('#one');
console.dir(el1.innerHTML);
el1.innerHTML = "Hello World";
el1.style.color = 'red';
el1.style.background = 'blue';
el1.innerText = "TEST";

JavaScript Manipulation
Get element id Set element id
https://developer.mozilla.org/en-
US/docs/Web/API/Element/getAttribute
US/docs/Web/API/Element/setAttribute
Set multiple element id
const liItems = document.querySelectorAll('li');
console.log(liItems);
liItems.forEach(function(i,cnt){
i.textContent = "Hello";
i.innerHTML = "Great <br> HTML";
i.innerText = "More text <br>";
i.id = "li"+cnt;
console.log(i.id);
console.log(i);
i.innerText = "updated";
i.setAttribute("class","test4");
console.log(i.getAttribute("class"));
i.innerText = i.className ? i.className : "no Class";
})
<button>Hello World</button>
const b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");

Update Element Image and URL Path
Using getAttribute and setAttribute
you can update the element
attributes. hasAttribute
<a href="https://placeholder.com"><img
src="https://via.placeholder.com/250/00ffff/000000"></a>
<br> <img src="https://via.placeholder.com/350x150/00ff00/ffffff">
<script>
const el1 = document.getElementsByTagName('a');
console.log(el1[0]);
const el2 = document.getElementsByTagName('img');
let temp = el1[0].getAttribute('href');
el1[0].setAttribute('href', 'http://www.google.com');
let tempImg1 = el2[0].getAttribute('src');
let tempImg2 = el2[1].getAttribute('src');
el2[0].setAttribute('src', tempImg2);
el2[1].setAttribute('src', tempImg1);
console.log(el2[1].hasAttribute('src'));
console.log(tempImg1);

Remove Element
The ChildNode.remove() method
removes the object from the tree it
belongs to.
US/docs/Web/API/ChildNode/remove
<div id="div-01">Here is div-01</div>
var el = document.getElementById('div-02');
el.remove(); // Removes the div with the 'div-02' id

Lesson Challenge
Update all list items with ids in sequence and content with count. Get class
attribute output to console. Remove the first div with class of pickme
<div id="myID">
<h1>Hello World</h1>
<div class="first pickme"> <span>Span 1!</span> <span>Span 2</span> <span>Span
3!</span> <span>Span 4</span> <span>Span 5!</span> <span>Span 6</span>
<span>Span 7!</span> </div>
<ul class="second">
</ul>
</div>

Code Snippet
const el = document.querySelector('.pickme');
el.remove();
liItems.forEach(function (i, cnt) {
i.textContent = "list item #" + cnt;
i.id = "li" + cnt;
console.log(i.getAttribute("class"));
})

Challenge #1 - Image popup
Add a popup image when any image on the
page is clicked. Popup should show the full
size image from the web link. Update the
code below to output the window.
<img src="http://brackets.io/img/hero.png" width="100px">
<img src="http://www.discoveryvip.com/img/pic.JPG" width="100px">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/DOM-model.svg"
width="100px">
<script>
window.open(this.src, 'My Image',
'resizable=yes,scrollbars=yes,width=500,height=500');
</script>

Challenge #1 Code
const mainList = document.querySelector('ul');
const inputEle = document.querySelector('input');
const clicker = document.getElementById('clicker');
clicker.addEventListener('click', function () {
if (inputEle.value.length > 3) {
let li = document.createElement('li');
let tempNode = document.createTextNode(inputEle.value);
li.appendChild(tempNode);
mainList.appendChild(li);
}
})

Element Classes
● Update classes remove, toggle, replace,add
● Check if class is in classList of element

JavaScript ClassList
Check if class exists
console.log(i.classList.contains('first'));
Update classes of an element
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
console.log(i.classList.hasClass('first'));
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
document.body.classList.add('thisClass');
document.body.classList.remove('thatClass');
document.body.classList.toggle('anotherClass');
i.classList.add("test");
i.classList.toggle("test1");
i.classList.remove("test2");
i.classList.replace("test","test3");

Lesson Challenge
Loop all list items and toggle class of test1 remove class of test2 and replace
class text with test3 add class of test4, set innerText of className if class
initially exists.
<div id="myID">
<ul class="second">
</ul>
</div>

Code Snippet
liItems.forEach(function (i, cnt) {
i.innerText = i.className ? i.className : "no Class";
i.classList.add("test");
i.classList.toggle("test1");
i.classList.remove("test2");
i.classList.replace("test", "test3");
console.log(i.classList.contains('first'));
i.classList.add("test4");
})

Element Children and Traversing
● Get element Childnodes
● Element children
● ParentElement
● parentNode
● Siblings
● Next and previous siblings

JavaScript Children
The ParentNode property children is a
read-only property that returns a live
HTMLCollection which contains all of the
child elements of the node upon which it
was called. HTMLcollection vs NodeList
(length)
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children
console.log(el);
console.log(el.childNodes); // Note nodelist
console.log(el.children); //note HTMLcollection
el.childNodes.forEach(function (ele, index) {
console.log(ele.textContent);
console.log(index);
}); /// won't work with children note HTMLcollection
for (let i = 0; i < el.children.length; i++) {
console.log(el.children[i].textContent);
console.log(el.children[i]);
}
console.log(el.childNodes);
console.log(el.parentElement);
console.log(el.parentNode);
console.log(el);
console.log(el.nextElementSibling);
console.log(el.nextSibling);
console.log(el.previousElementSibling);
console.log(el.previousSibling);

Lesson Challenge
Select some elements navigate to siblings and output the element into the
console.
<div id="myID">
<h1>Hello World</h1>
<div class="first pickme"> <span>Span 1!</span> <span>Span 2</span>
<span>Span 3!</span> <span>Span 4</span> <span>Span 5!</span>
<span>Span 6</span> <span>Span 7!</span> </div>
<ul class="second">
</ul>
</div>

Code Snippet
const el = document.querySelector('.pickme');
console.log(el);
console.log(el.childNodes); // Note nodelist
console.log(el.children); //note HTMLcollection
for (let i = 0; i < el.children.length; i++) {
console.log(el.children[i].textContent);
console.log(el.children[i]);
}
console.log(el.childNodes);
console.log(el.parentElement);
console.log(el.parentNode);
console.log(el);
console.log(el.nextElementSibling);
console.log(el.nextSibling);
console.log(el.previousElementSibling);
console.log(el.previousSibling);

Element Style Change
● Update styles lots of options

JavaScript Style Attribute
Update the element style attribute
https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-
ElementCSSInlineStyle
const el1 = document.getElementsByClassName('test');
let tempEle = el1[0];
tempEle.style.backgroundColor = "Green";
tempEle.style.color = "white";
tempEle.style.border = "5px dotted purple";
tempEle.style.fontSize = "40px";
tempEle.style.display = "none";
tempEle.style.display = "block";

Lesson Challenge
Select some elements update and add style properties
<h1 class="test">Lorem ipsum dolor sit amet consectetuer
adipiscinelit</h1>

Code Snippet
<h1 class="test">Lorem ipsum dolor sit amet consectetuer adipiscinelit</h1>
<script>
Const el1 = document.getElementsByClassName('test');
let tempEle = el1[0];
tempEle.style.backgroundColor = "Green";
tempEle.style.color = "white";
tempEle.style.border = "5px dotted purple";
tempEle.style.fontSize = "40px";
tempEle.style.display = "none";
tempEle.style.display = "block";
</script>

Create Elements add to page
● Create Elements createElement
● Create Text nodes createTextNode
● Append to other elements appendChild

JavaScript Create element
In an HTML document, the
document.createElement() method
creates the HTML element specified by
tagName, or an HTMLUnknownElement
if tagName isn't recognized
US/docs/Web/API/Document/createElement
document.body.onload = addElement;
function addElement () {
// create a new div element
var newDiv = document.createElement("div");
// and give it some content
var newContent = document.createTextNode("Hi there and
greetings!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the
DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}

Lesson Challenge
Create a new element, give it an id of test. Add content of hello world. Add
it to myID element
<div id="myID">
</div>

Code Snippet
const temp = document.createElement("div");
temp.classList.add("test");
temp.id = "test";
temp.textContent = "hello world";
console.log(temp);
const tempText = document.createTextNode("Hello World 2");
temp.appendChild(tempText);
console.log(temp);
const myID = document.querySelector("#myID");
myID.appendChild(temp);

Add Click Event Listeners
● addEventListener to element

JavaScript Click Event
The EventTarget method
addEventListener() sets up a function
that will be called whenever the
specified event is delivered to the target.
Common on Element, Document, and
Window
US/docs/Web/API/EventTarget/addEventListener
TIP : useCapture = true the Events execute top to down in the capture
phase when false it does a bubble bottom to top. useCapture has not
always been optional. Ideally, you should include it for the widest possible
browser compatibility.
<ul>
<li class="listItem">My Item</li>
<li>Another Item</li>
<li class="listItem">Wow Cool</li>
<li class="listItem">New Color</li>
</ul>
<script>
const ele1 = document.querySelector('ul');
ele1.addEventListener('click', function () {
console.log('click');
ele1.style.color = "yellow";
})
const eleList = document.querySelectorAll('.listItem');
for (var x = 0; x < eleList.length; x++) {
eleList[x].addEventListener('click', makeItRed);
}
function makeItRed() {
console.log(this);
let temp = this.classList.toggle('red');
console.log(temp);
}
</script>

Lesson Challenge
Add the ability to click on elements with class = listItem and toggle the class
red to the element.
<style>
.red {
background-color: red;
color: white;
}
</style>
<ul>
<li class="listItem">My Item</li>
<li class="listItem">Wow Cool</li>
<li class="listItem">New Color</li>
</ul>

Code Snippet
const eleList = document.querySelectorAll('.listItem');
eleList[x].addEventListener('click', makeItRed);
}
function makeItRed() {
console.log(this);
let temp = this.classList.toggle('red');
console.log(temp);
}

Challenge #2 - List items
Show a list of items and give the
ability to add new items to the list by
submitting content from an input
form.
Bonus points if you check that the
input field has content with length of
more than 3 characters.
You can use this HTML starter code.
<ul>
<li>My Item</li>
<li>Wow Cool</li>
<li>New Color</li>
</ul>
<input type="text" name="newItem">
<button id="clicker">+Add</button>

Challenge #2 Code
const inputEle = document.querySelector('input');
const clicker = document.getElementById('clicker');
clicker.addEventListener('click', function () {
if (inputEle.value.length > 3) {
let tempNode = document.createTextNode(inputEle.value);
}
})

Challenge #3 - Background color changer
Add a button that will change the
body background color.
Click button change body
background.
You can use the source code
provided to generate a random hex
color value.
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
let bgColor = 'rgb(' + random(255) + ',' + random(255) + ',' +
random(255) + ')';

Challenge #3 Code
<body>
<button>Change Background</button>
<script>
var btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.onclick = function () {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
</script>
</body>

Add Event Key Press Listeners
● Keydown listener
● Keyup listener
● Key press tracking

JavaScript Key Event
The keydown event is fired when a key
is pressed down.
https://developer.mozilla.org/en-US/docs/Web/Events/keydown
The keyup event is fired when a key is
released.
https://developer.mozilla.org/en-US/docs/Web/Events/keyup
let keys = {
ArrowUp: false
, ArrowDown: false
, ArrowLeft: false
, ArrowRight: false
}
document.addEventListener("keydown", pressKeyOn);
document.addEventListener("keyup", pressKeyOff);
function pressKeyOn(event) {
console.log(event.key);
event.preventDefault();
keys[event.key] = true;
console.log(keys);
}
function pressKeyOff(event) {
console.log(event.key);
event.preventDefault();
keys[event.key] = false;
console.log(keys);
}

Added to an element
Can be added to specific element like
inputs.
<div></div>
<script>
const div = document.querySelector('div');
const ele =
document.querySelector('input[name="newItem"]');
ele.addEventListener('keypress', addItem);
function addItem(event) {
div.textContent = ele.value;
if (ele.value.length > 5) {
ele.style.backgroundColor = "red";
}
else {
ele.style.backgroundColor = "white";
}
if (event.keyCode === 13 && ele.value.length > 1) {
console.log(ele.value.length);
eleUL.style.backgroundColor = "yellow";
}
}
</script>

Lesson Challenge
Add a key event listener listening for arrow key presses and
outputting it into an element along with the keycode in ()
<div></div>
<script>
const output = document.querySelector("div");
///ADD CODE HERE
</script>

Code Snippet
<div></div>
<script>
const output = document.querySelector("div");
document.addEventListener("keydown", function (e) {
console.log(e.key);
e.preventDefault();
output.innerHTML += e.key + "(" + e.keyCode + ")<br>";
})
</script>

More mouse Events
● MouseOver and MouseOut
● Check event values
● This vs event object

JavaScript Mouse Events
The mouseover event is fired when a
pointing device is moved onto the element
that has the listener attached or onto one of
its children.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
The mouseout event is fired when a pointing
device (usually a mouse) is moved off the
element that has the listener attached or off
one of its children
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event
<style> .red { color: red; } </style>
<ul>
<li>My Item</li>
<li>Wow Cool</li>
<li>New Color</li>
</ul>
<script>
const eleList = document.querySelectorAll('li');
console.log(eleList[x]);
eleList[x].addEventListener('mouseover', function
() {
this.classList.add('red');
});
eleList[x].addEventListener('mouseout', function
() {
this.classList.remove('red');
})
}
</script>

Lesson Challenge
Highlight list item to red text color when
mouse is over the list item. Remove
highlight once off.
<style>
.red {
color: red;
}
</style>
<ul>
<li>My Item</li>
<li>Wow Cool</li>
<li>New Color</li>
</ul>

Code Snippet
const eleList = document.querySelectorAll('li');
console.log(eleList[x]);
eleList[x].addEventListener('mouseover', function () {
this.classList.add('red');
});
eleList[x].addEventListener('mouseout', function () {
this.classList.remove('red');
})
}

Challenge #4 - List items advanced
● Add to list items
● Make existing items click and
toggle line strike
● Add x to item to allow for
removal from list.
Starter code is on the side, create
functions to add functionality to the
list items.
.red {
background-color: #eee;
color: red;
text-decoration: line-through;
}
<ul>
<li>Bananas</li>
<li>Milk</li>
<li>Bread</li>
</ul>
const inputSelect = document.querySelector('input[name="newItem"]');
inputSelect.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
console.log(event.keyCode);
makeNew();
}
})

Challenge #4 Code
const inputSelect = document.querySelector('input[name="newItem"]');
inputSelect.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
console.log(event.keyCode);
makeNew();
}
})
const allListItems = document.querySelectorAll('li');
for (var x = 0; x < allListItems.length; x++) {
allListItems[x].addEventListener('click', myList);
}
function makeNew() {
li.addEventListener('click', myList);
let textValue = inputSelect.value;
inputSelect.value = '';
let tempNode = document.createTextNode(textValue);
}
function myList() {
var temp = this.classList.toggle('red');
if (temp) {
let span = document.createElement('span');
span.textContent = ' x ';
span.addEventListener('click', function () {
this.parentElement.remove();
})
this.appendChild(span);
}
else {
this.getElementsByTagName('span')[0].remove();
}
}

Event bubbling and capturing
● Event handling true or false options

JavaScript Event bubbling and capturing
2 events on the same element !!!!
Needed when an event occurs in an element
inside another element, and both elements
have registered a handle for that event.
With bubbling, the event is first captured and handled by the
innermost element and then propagated to outer elements.
With capturing, the event is first captured by the outermost element
and propagated to the inner elements.
We can use the addEventListener(type, listener, useCapture) to
register event handlers for in either bubbling (default) or capturing
mode. To use the capturing model pass the third argument as true.
eles[i].addEventListener('click', capture, true);
eles[i].addEventListener('click', bubble, false);

Code Snippet Try it
<div>1 <div>2 <div>3 <div>4 <div>5</div></div></div></div></div><section id="output"></section>
<script>
const outputElement = document.getElementById('output');
const eles = document.getElementsByTagName('div');
function output(msg) {outputElement.innerHTML += (`${msg} <br>`);}
function capture() {output('capture: ' + this.v);}
function bubble() {output('bubble: ' + this.v);}
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = "1px solid red";
eles[i].style.width = "100px";
eles[i].style.padding = "10px";
eles[i].v = (i+1);
eles[i].addEventListener('click', capture, true);
eles[i].addEventListener('click', bubble, false);
}
</script>

Congratulations on completing the course!
Thank you
This ebook uses https://developer.mozilla.org/en-US/docs/Web/JavaScript as a source for examples. Check out
more about JavaScript at MDN.
Find out more about my courses at http://discoveryvip.com/
Course instructor : Laurence Svekis -
providing online training to over
500,000 students across hundreds of
courses and many platforms.

JavaScript DOM - Dynamic interactive Code

More Related Content

What's hot

Similar to JavaScript DOM - Dynamic interactive Code

More from Laurence Svekis ✔

Recently uploaded

JavaScript DOM - Dynamic interactive Code