Scribd
Upload
44 views32 pages

Document Object Model

Uploaded by

Jecholiah Wise
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
44 views32 pages

Document Object Model

Uploaded by

Jecholiah Wise
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
You are on page 1/ 32

Document Object Model

Document Object Model


• As we’ve seen, JavaScript objects are incredibly flexible,
and can contain various fields, even when those fields are
other objects.

• The document object is one way of employing this


paradigm, whereby that object organizes the entire
contents of a web page.

• By organizing an entire page into a JavaScript object, we


can manipulate the page’s elements programmatically.
Document Object Model
<html>
<head>
<title>Hello, world</title>
</head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
<a href=“test.html”>Link</a>
</body>
</html>
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
<html>
<head>
<title>Hello, world</title>
Document Object Model </head>
<body>
<h2>Here’s my page</h2>
<p>World, hello</p>
document <a href=“test.html”>Link</a>
</body>
</html>
html

head body

title h2 p a

“hello, “Here’s my “World,


href
world” page” hello”

“test.html”

“Link”
Document Object Model
• The document object itself, as well as all of the objects
contained within it, have a number of properties and a
number of methods that can be used to drill down to a
very specific piece of your website.

• By resetting those properties or calling certain methods,


the contents of our web pages can change without us
needing to refresh the page.
Document Object Model
• DOM Properties

DOM Property Description


Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
nodeName The name of an HTML element or element’s attribute.
Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
nodeName The name of an HTML element or element’s attribute.
id The “id” attribute of an HTML element.
Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
nodeName The name of an HTML element or element’s attribute.
id The “id” attribute of an HTML element.
parentNode A reference to the node one level up in the DOM.
Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
nodeName The name of an HTML element or element’s attribute.
id The “id” attribute of an HTML element.
parentNode A reference to the node one level up in the DOM.
childNodes An array of references to the nodes one level down in the DOM.
Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
nodeName The name of an HTML element or element’s attribute.
id The “id” attribute of an HTML element.
parentNode A reference to the node one level up in the DOM.
childNodes An array of references to the nodes one level down in the DOM.
attributes An array of attributes of an HTML element.
Document Object Model
• DOM Properties

DOM Property Description


innerHTML Holds the HTML inside a set of HTML tags.
nodeName The name of an HTML element or element’s attribute.
id The “id” attribute of an HTML element.
parentNode A reference to the node one level up in the DOM.
childNodes An array of references to the nodes one level down in the DOM.
attributes An array of attributes of an HTML element.
style An object encapsulating the CSS/HTML styling of an element.
Document Object Model
• DOM Methods

DOM Method Description


Document Object Model
• DOM Methods

DOM Method Description


Gets the element with a given ID below this
getElementById(id)
point in the DOM.
Document Object Model
• DOM Methods

DOM Method Description


Gets the element with a given ID below this
getElementById(id)
point in the DOM.
Gets all elements with the given tag below
getElementsByTagName(tag)
this point in the DOM.
Document Object Model
• DOM Methods

DOM Method Description


Gets the element with a given ID below this
getElementById(id)
point in the DOM.
Gets all elements with the given tag below
getElementsByTagName(tag)
this point in the DOM.
Add the given node to the DOM below this
appendChild(node)
point.
Document Object Model
• DOM Methods

DOM Method Description


Gets the element with a given ID below this
getElementById(id)
point in the DOM.
Gets all elements with the given tag below
getElementsByTagName(tag)
this point in the DOM.
Add the given node to the DOM below this
appendChild(node)
point.
Remove the specified child node from the
removeChild(node)
DOM.
Document Object Model
• DOM Methods

DOM Method Description


Gets the element with a given ID below this
getElementById(id)
point in the DOM.
Gets all elements with the given tag below
getElementsByTagName(tag)
this point in the DOM.
Add the given node to the DOM below this
appendChild(node)
point.
Remove the specified child node from the
removeChild(node)
DOM.
Document Object Model
• If we start from document, we can get to any piece of our web
page that we choose, through careful use of DOM properties
and methods.
Document Object Model
• jQuery

• Because DOM manipulation is so common with JavaScript, and


because the JavaScript to do so can get quite lengthy, people
wanted alternatives.

• jQuery is a popular open-source library, released in 2006, that


is designed to simplify client-side scripting (such as DOM
manipulations).
Document Object Model
• jQuery

document.getElementById(‘colorDiv’).style.backgroundColor = ‘green’
Document Object Model
• jQuery

document.getElementById(‘colorDiv’).style.backgroundColor = ‘green’
Document Object Model
• jQuery

$(‘#colorDiv’).css(‘background-color’, ‘green’);
Document Object Model
• jQuery

https://api.jquery.com

You might also like