JavaScript
Document Object Model
Document Object Model
What is the DOM
The DOM is everywhere online, it is all around us online, even now in
this very browser. You can see it when you look out at your computer
screen. You can feel it when you click a button online, when you go to
cool websites, when you pay online. This is your last chance. After this,
there is no turning back. You take the blue pill - the story ends, you
wake up in your bed and believe whatever you want to believe. You
take the red pill - you learn about the DOM and the way you look at
your browser will never be the same.
Document Object Model
● Part of making content interactive online
● Allows JavaScript to connect to content - manipulate it, update it and style it.
● Allows JavaScript to connect the browser and code
● Lets JavaScript make things happen
● Works the same as as Objects in JavaScript
● The Document Object Model (DOM) represents the web page document so it can be
manipulated. The DOM is an object-oriented representation of the web page
● The DOM is not a programming language
● API (HTML or XML page) = DOM + JS (scripting language)
Access the DOM
console.dir(document);
console.dir(window);
document.body
document.body.bgColor ='red';
What is the DOM?
● DOM is constructed by browser
● Browser makes model of each element as an object
● Stores the attributes
● Load HTML browser turns it into an object
● console.dir(document)
● Every element is in body
● Child Node and show you the children
Interface between javascript and html
● Root node where everything lives inside
● http://brackets.io/
● https://developers.google.com/web/tools/chrome-devtools/
● https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob
ject_Model/Introduction
● https://en.wikipedia.org/wiki/Document_Object_Model
● console.dir(document);
● console.log(document.URL);
DOM Manipulation
● Select element - update it
● Just like CSS many way to select elements content
Once you have it you can do many things
Update the HTML
Update the color
el1.innerHTML = "Hello World";
el1.style.color = 'red';
el1.style.background = 'blue';
el1.innerText = "TEST";
JavaScript DOM Selection
[0] select the first one
var el1 = document.getElementById('one');
el1.style.background ="yellow";
var el2 = document.getElementsByTagName('li');
console.log(el2);
var el3 = document.getElementsByClassName('highlight');
console.log(el3);
var el4 = document.querySelector('.highlight');
console.log(el4);
var el5 = document.querySelectorAll('.highlight');
console.log(el5);
el5[1].style.color = 'yellow';
Element Text Manipulation
var el1 =
document.querySelector('.highlight');
console.log(el1);
el1.textContent = "HELLO";
el1.innerHTML = "Hello <br> World"
el1.textContent;
el1.outerHTML = "HELLO <BR> WORLD";
Changing Element Style
var el1 = document.querySelector('h1');
console.dir(el1);
el1.classList.add('red');
el1.classList.toggle('red');
el1.classList.toggle('red');
el1.classList.remove('test');
Change Style
var el1 = document.getElementsByClassName('test');
console.log(el1[0]);
var 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";
Element Attribute Manipulation
var el1 = document.getElementsByTagName('a');
console.log(el1[0]);
var el2 = document.getElementsByTagName('img');
console.log(el2[1]);
var temp = el1[0].getAttribute('href');
el1[0].setAttribute('href','http://www.google.com');
var tempImg1 = el2[0].getAttribute('src');
var tempImg2 = el2[1].getAttribute('src');
el2[0].setAttribute('src',tempImg2);
el2[1].setAttribute('src',tempImg1);
console.log(tempImg1);
DOM Events Click
Select element and attach event listener. Listen for event on element.
var ele1 = document.querySelector('ul');
ele1.addEventListener('click',function(){
ele1.style.color = "yellow";
})v
ar eleList = document.querySelectorAll('li');
for(var x = 0;x<eleList.length;x++){
eleList[x].addEventListener('click',function(){
this.classList.toggle('red');
})
}
Keyevents
var ele = document.querySelector('input[name="newItem"]');
ele.addEventListener('keypress',addItem);
var eleUL = document.querySelector('ul');
function addItem(event){
//console.log(event);
if(event.keyCode === 13 && ele.value.length > 1){
console.log(ele.value.length);
eleUL.style.backgroundColor = "yellow";
}
}
Mouse Events
var eleList = document.querySelectorAll('li');
for(var x=0;x<eleList.length;x++){
console.log(eleList[x]);
eleList[x].addEventListener('mouseover',function(){
this.classList.add('red');
});
eleList[x].addEventListener('mouseout',function(){
this.classList.remove('red');
})
}
Create new element
clicker.addEventListener('click',function(){
var li = document.createElement('li');
var allListItems = document.querySelectorAll('li');
var textValue = 'test '+(allListItems .length + 1)
var tempNode =
document.createTextNode(textValue);
li.appendChild(tempNode);
mainList.appendChild(li);
})
Thank you
Thank you for taking the course, and reading this PDF. If you have any questions of suggestions
please connect with me on Udemy.
https://www.udemy.com/user/lars51/
Laurence Svekis
