1 of 18

DOM

2 of 18

  • JavaScript has a special object called the document object, which is effectively a single object that represents an entire web page.

​

  • Because objects can have numerous fields, can because those fields can be of any type, including being themselves objects, this lends itself to a nice hierarchical organization.

​

  • By organizing an entire page into a JavaScript object, we can manipulate its elements programmatically.

3 of 18

<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>

4 of 18

<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>

5 of 18

<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>

6 of 18

<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>

7 of 18

<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>

8 of 18

<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>

9 of 18

  • The document object itself and all of the objects within it have a number of properties and methods that can be used to drill down to a very specific part of your site.

​

  • By modifying those properties and calling those methods, the contents of our pages can change without us needing to refresh.

​

10 of 18

  • Some examples of DOM properties include:

​

11 of 18

  • Some examples of DOM properties include:

​

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.

12 of 18

  • Some examples of DOM methods include:

​

13 of 18

  • Some examples of DOM methods include:

​

METHOD

DESCRIPTION

getElementById(id)

Gets the element with a given ID below this point in the DOM.

getElementsByTagName(tag)

Gets all elements with the given tag below this point in the DOM.

appendChild(node)

Add the given node to the DOM below this point.

removeChild(node)

Remove the specified child node from the DOM.

14 of 18

  • Some examples of DOM methods include:

​

METHOD

DESCRIPTION

getElementById(id)

Gets the element with a given ID below this point in the DOM.

getElementsByTagName(tag)

Gets all elements with the given tag below this point in the DOM.

appendChild(node)

Add the given node to the DOM below this point.

removeChild(node)

Remove the specified child node from the DOM.

15 of 18

  • Starting at document, we can get anywhere on our page we want using DOM properties and methods.

​

  • Because DOM manipulation is so common with JavaScript, and because the code can get quite lengthy, people wanted alternatives. The jQuery open-source library for JavaScript is designed to simplify client-side scripting operations, such as DOM manipulation.

​

16 of 18

  • JavaScript to set the background color of the HTML element with ID colorDiv to be green:

​

document.getElementById("colorDiv").style.backgroundColor = "green";

​

17 of 18

  • jQuery to set the background color of the HTML element with ID colorDiv to be green:

​

$("colorDiv").css("background-color", "green");

​

18 of 18

  • jQuery to set the background color of the HTML element with ID colorDiv to be green:

​

$("colorDiv").css("background-color", "green");

​

  • More information about the various potential use cases for jQuery at

https://api.jquery.com

​