Scribd
Upload
101 views33 pages

Intro To The DOM

The document provides an overview of the Document Object Model (DOM) and how it allows JavaScript to interact with HTML and CSS. It explains that the DOM represents the document as nodes and objects, which can be manipulated by selecting elements and using methods like getElementById() and querySelector(). It then demonstrates how to select elements, add event listeners, and manipulate elements by changing styles, classes, content, and attributes.

Uploaded by

Ali Askar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
101 views33 pages

Intro To The DOM

The document provides an overview of the Document Object Model (DOM) and how it allows JavaScript to interact with HTML and CSS. It explains that the DOM represents the document as nodes and objects, which can be manipulated by selecting elements and using methods like getElementById() and querySelector(). It then demonstrates how to select elements, add event listeners, and manipulate elements by changing styles, classes, content, and attributes.

Uploaded by

Ali Askar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

Intro to the DOM

Document Object Model


 The Document Object Model is the interface
between your JavaScript and HTML+CSS

2
3
The Process
 SELECT an element and then MANIPULATE

4
The Process
 Select an element :

5
The Process
 MANIPULATE selected item:

6
One more example
 SELECT the <body> and change its color every
second
var body = document.querySelector("body"); //SELECT
var isBlue = false;
setInterval(function(){ //MANIPULATE
if (isBlue) { body.style.background = "white"; }
else { body.style.background = "#3498db"; }
isBlue = !isBlue; }, 1000);

7
DOM Selectors
 It all starts with the document, the root node

8
Methods
 The document comes with a bunch of methods
for selecting elements.  We're going to learn
about the following 5:
 document.getElementById()
 document.getElementsByClassName()
 document.getElementsByTagName()
 document.querySelector()
 document.querySelectorAll()

9
getElementById
 Takes a string argument and returns the one
element with a matching ID

10
getElementsByClassName
 Takes a string argument and returns a list of
elements that have a matching class

11
getElementsByTagName
 Returns a list of all elements of a given tag name,
like <li> or <h1>

12
querySelector
 Returns the first element that matches a given
CSS-style selector

13
querySelector
 Returns the first element that matches a given
CSS-style selector

14
querySelector
 Returns the first element that matches a given
CSS-style selector

15
querySelectorAll
 Returns a list of elements that matches a given
CSS-style selector

16
querySelectorAll
 Returns a list of elements that matches a given
CSS-style selector

17
Exercise
 Come up with 4 different ways to select the
first <p> tag

18
DOM Manipulation
 We're going to cover different ways of:
 changing an element's style
 adding/removing classes
 changing the content of a tag
 changing attributes(src, href, etc.)

19
Style

20
Is This a Bad Idea?
 It is recommended for styles to be defined in a
separate file or files. The style property allows for
quick styling, for example for testing purposes. -
MDN

21
An Alterative
 Rather than directly manipulating style with JS,
we can define a CSS class and then toggle it on or
off with JS

22
classList
 A read-only list that contains the classes for a
given element.  It is not an array.

23
textContent
 Returns a string of all the text contained in
a given element

24
innerHTML
 Similar to textContent, except it returns a string
of all the HTML contained in a given element

25
Attributes
 Use getAttribute() and setAttribute() to read and
write attributes like src or href

26
DOM Events
 Events are everywhere :
 Clicking on a button
 Hovering over a link
 Dragging and Dropping
 Pressing the Enter key

27
The Process
 We select an element and then add an event
listener
 "Listen for a click on this <button>"
 "Listen for a hover event on the <h1>"
 "Listen for a keypress event on text input"

28
The Syntax
 To add a listener, we use a method
called addEventListener
 element.addEventListener(type,
functionToCall);
 var button = document.querySelector("button");
button.addEventListener("click", function()
{ console.log("SOMEONE CLICKED THE
BUTTON!"); });

29
Example
 var button = document.querySelector("button");
var paragraph = document.querySelector("p");
button.addEventListener("click", changeText);
function changeText() { paragraph.textContent =
"Someone Clicked the Button!"; }

30
So Many Events!
 MDN lists over 300 different events!  Here are
some of the more common ones:
 click
 mouseover
 dblclick
 keypress
 drag

31
Example

32
Example
 Adding mouseout :

33

You might also like