Scribd
Upload
39 views17 pages

14 - DHTML C12

This document introduces Document Object Model (DOM) and describes how it represents an HTML document as nodes that can be accessed and manipulated with JavaScript. It discusses DOM nodes and trees, and how elements can be accessed and traversed using methods like getElementById. It provides examples of getting element collections by tag name and modifying element styles. It warns that HTMLCollections are not arrays and cannot use array methods. It also describes different ways of finding HTML elements, like by id, tag name, class name, and HTML object collections.

Uploaded by

sireen hammoud
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
39 views17 pages

14 - DHTML C12

This document introduces Document Object Model (DOM) and describes how it represents an HTML document as nodes that can be accessed and manipulated with JavaScript. It discusses DOM nodes and trees, and how elements can be accessed and traversed using methods like getElementById. It provides examples of getting element collections by tag name and modifying element styles. It warns that HTMLCollections are not arrays and cannot use array methods. It also describes different ways of finding HTML elements, like by id, tag name, class name, and HTML object collections.

Uploaded by

sireen hammoud
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/ 17

Chapter 11

DHTML
What is DHTML?
• In this chapter we introduce the Document Object Model (DOM). The
DOM gives you scripting access to all the elements on a web page.
• Inside the browser, the whole web page—paragraphs, forms, tables,
etc.—is represented in an object hierarchy.
• Using JavaScript, you can dynamically create, modify and remove
elements in the page.
DOM
• We introduce the concepts of DOM nodes and DOM trees. We discuss
properties and methods of DOM nodes and cover additional methods
of the document object.
• We show how to dynamically change style properties, which enables
you to create effects, such as user-defined background colors and
animations.
Modeling a Document: DOM Nodes and
Trees
• The document’s getElementById method is the simplest way to access
a specific element in a page. The method returns objects called DOM
nodes.
• Every piece of an HTML5 page (elements, attributes, text, etc.) is
modeled in the web browser by a DOM node. All the nodes in a
document make up the page’s DOM tree, which describes the
relationships among elements. Nodes are related to each other
through child-parent relationships.
• An HTML5 element inside another element is said to be its child—the
containing element is known as the parent.
• A node can have multiple children but only one parent. Nodes with the
same parent node are referred to as siblings.
Viewing a Document’s DOM
• Inspect
• In addition to viewing a document’s DOM structure, the developer
tools in each browser typically enable you to view and modify styles,
view and debug JavaScripts used in the document, view the resources
(such as images) used by the document, and more.
Traversing and Modifying a DOM Tree
• The DOM enables you to programmatically access a document’s
elements, allowing you to modify its contents dynamically using
JavaScript.
• This section introduces some of the DOM-node properties and
methods for traversing the DOM tree, modifying nodes and creating
or deleting content dynamically.
Sample DOM
JS_MAZE101
HTML_MAZE101

Example
DHTML
DOM Collections
The getElementsByTagName() method returns an HTMLCollection
object.

An HTMLCollection object is an array-like list (collection) of HTML


elements.

The following code selects all <p> elements in a document:


Example:
myCollection = document.getElementsByTagName("p");
DOM Collections
The elements in the collection can be accessed by an index number.

To access the second <p> element you can write:

myCollection[1]
DOM Collections
Example
HTML HTMLCollection Length

Change the text color of all <p> elements:

const myCollection =
document.getElementsByTagName("p");

for (let i = 0; i < myCollection.length; i++) {

myCollection[i].style.color = "red";
}
WARNING
An HTMLCollection is NOT an array!

• An HTMLCollection may look like an array, but it is not.


• You can loop through the list and refer to the elements
with a number (just like an array).
• However, you cannot use array methods like valueOf(),
pop(), push(), or join() on an HTMLCollection.
DOM Objects
DOM collections are accessed as properties of DOM objects such as the
document object or a DOM node. The document object has properties
containing the
• images collection
• links collection
• forms collection
• anchors collection
Finding HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do this:
Finding HTML elements by id: document.getElementById("intro");
Finding HTML elements by tag name: document.getElementsByTagName("p");
Finding HTML elements by class name: document.getElementsByClassName("intro");
Finding HTML elements by CSS selectors: document.querySelectorAll("p.intro");
Finding HTML elements by HTML object
collections
• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
Finding HTML elements by HTML object
collections
Example: Find all Links and display them in a div tag

Check the JS

You might also like