Download - Interacting with the DOM (JavaScript)
![Page 1: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/1.jpg)
Interacting with the DOM
- Professor Flo
![Page 2: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/2.jpg)
What does DOM stand for?• The DOM is short for the “Document Object Model”
• in the DOM everything is a node.
• The Document it self is a node.
• HTML Elements are nodes
• attributes are nodes
• text elements are node,
• EVERYTHING IS A NODE !!!
![Page 3: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/3.jpg)
This is a Document
![Page 4: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/4.jpg)
This is a Document
![Page 5: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/5.jpg)
You get the Picture
![Page 6: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/6.jpg)
Every Page You View in Your Browser is a
Document
![Page 7: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/7.jpg)
Now let’s take a look at DOM Structure
![Page 8: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/8.jpg)
The DOM TREEagain, every element is a node, html, attributes, txt, etc.
![Page 9: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/9.jpg)
Selecting Elements from the DOM
![Page 10: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/10.jpg)
Get Element By ID
• document.getElementById(‘myID’); // Javascript Example
• How it looks in html <div id=“myID”>
![Page 11: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/11.jpg)
Get Elements by Tag Names• var elements = document.getElementsByTagName(‘div’);
• HTML this will select all the <divs> on your page
• var paragraphs = document.getElementsByTagName(‘p’); // selects all the p tags on your page, etc.
• How to select the various first element of a series
• var elements = document.getElementsByTagName(‘div’)[0]; // similar to how you access the index of an array
![Page 12: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/12.jpg)
document.querySelector
• var class = document.querySelector(“.myclass”);
• HTML example <p class=“myclass”> selects the p tag with the my class css class.
• var id = document.querySelector(“#myID”);
• HTML example selects the paragraph with the id of myID <p id=“myID”>
![Page 13: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/13.jpg)
querySelectorAll• var ended = document.body.querySelectorAll(‘div’);
• // The above example returns all the divs in the body tag
• var el = document.querySelector(‘#test’);
• var matches = el.querySelectorAll(‘div.highlighted > p’)
• // This example returns a list of p children elements under the highlighted container div
• HTML Example <div class=“highlighted”><p></p></p>
• </div><p></p> // Will select ONLY the p’s inside highlighted div not the paragraph outside of that.
![Page 14: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/14.jpg)
Creating Elements in the DOM via javascript
! // Syntax for Creating an Element ! // var element = document.createElement(tagName); ! var floSpecialDiv = document.createElement(‘div’); ! var text = document.createTextNode(‘JavaScript on Fleek’); ! floSpecialDiv.appendchild(text);
![Page 15: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/15.jpg)
HaHa Awesome. Got all the Nuts and Bolts out the Way now time for Javascript Events
![Page 16: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/16.jpg)
The Onclick Event
• HTML <div id=“ClickMe”></div>
• javascript
• document.getElementById(‘ClickMe’).onclick=function(){ alert(‘You clicked the click me’);}
![Page 17: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/17.jpg)
A Cleaner way addEventListener
• var whatsClickin = document.getElementById(‘ClickMe’);
• whatClickin.addEventListener(‘click’, function(){
• alert(‘You Clicked on me’);}, false);
![Page 18: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/18.jpg)
Properties of AddEventListener
• // Event Listener Syntax
• // element.addEventLister(“click”, function(){},useCapture);
• // target.addEventListener(type, listener[, useCapture
![Page 19: Interacting with the DOM (JavaScript)](https://reader034.vdocuments.net/reader034/viewer/2022042602/55a5bb331a28abe5368b45db/html5/thumbnails/19.jpg)
Alright let’s Start Coding in Paradise :)