Scribd
Upload
291 views24 pages

Intro to DOM for Web Developers

The document object model (DOM) represents an HTML document as objects that can be manipulated via JavaScript. It allows JavaScript to interact with webpage content like HTML elements. The document object is the entry point into the DOM and contains representations of all content on a page. Common methods for selecting elements include getElementById, getElementsByTagName, getElementsByClassName, querySelector, and querySelectorAll. Key properties and methods for manipulating elements include classList, get/setAttribute, appendChild, append, prepend, removeChild, and remove. Events like clicks, drags, and scrolls can trigger JavaScript callbacks.

Uploaded by

Raluca Şuhan
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
291 views24 pages

Intro to DOM for Web Developers

The document object model (DOM) represents an HTML document as objects that can be manipulated via JavaScript. It allows JavaScript to interact with webpage content like HTML elements. The document object is the entry point into the DOM and contains representations of all content on a page. Common methods for selecting elements include getElementById, getElementsByTagName, getElementsByClassName, querySelector, and querySelectorAll. Key properties and methods for manipulating elements include classList, get/setAttribute, appendChild, append, prepend, removeChild, and remove. Events like clicks, drags, and scrolls can trigger JavaScript callbacks.

Uploaded by

Raluca Şuhan
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

THE

DOM
MAKE SURE YOU ARE
COMFORTABLE WITH
BASIC HTML & CSS!
DOCUMENT
OBJECT
M ODEL
WHAT IS IT?
The DOM is a JavaScript
representation of a
webpage.
It's your JS "window" into
the contents of a webpage
It's just a bunch of
objects that you can
interact with via JS.
HTML+CSS Go In... JS Objects Come Out
I'm an
object!
DOCU
MENT

BODY
Me too!

H1 UL

LI LI

HTML+CSS Go In... JS Objects Come Out


Let's start with the...

D
O
OCUMENT
BJECT I have nothing to do
with the DOM but I

M ODEL
look cool!
DOCU
MENT

DOCUMENT
The document object is our entry
BODY

point into the world of the DOM. H1 UL


It contains representations of all
the content on a page, plus tons
of useful methods and properties LI LI
SELECTING
SELECT MANIPULATE
SELECTING
getElementById
getElementsByTagName
getElementsByClassName
querySelector
A newer, all-in-one method to select a single element.
Pass in a CSS selector
querySelectorAll
Same idea , but returns a collection of matching elements
SELECT MANIPULATE
PROPERTIES & METHODS
(the important ones)

classList innerText
getAttribute() textContent
setAttribute() innerHTML
appendChild() value
append() parentElement
prepend() children
removeChild() nextSibling
remove() previousSibling
createElement style
EVENTS
Responding to user
inputs and actions!
A SMALL TASTE
clicks mouse wheel
drags double click
drops
copying
hovers
pasting
scrolls
form submission audio start
key presses screen resize
focus/blur printing
addEventListener
Specify the event type and a callback to run

You might also like