Scribd
Upload
46 views5 pages

The W3C Document Object Model (DOM) Is A Platform and Language-Neutral Interface That Allows Programs and Scripts To Dynamically Access and Update The Content, Structure, and Style of A Document."

The document discusses the DOM (Document Object Model) which defines a standard for accessing and manipulating HTML and XML documents. It defines that every element in an HTML or XML document is a node, and these nodes can be traversed and manipulated like a tree structure using the DOM. Key DOM concepts covered include nodes, the node tree, and relationships between parent/child/sibling nodes. Methods like getElementById and properties like innerHTML are also discussed for programmatically interacting with DOM nodes using JavaScript.

Uploaded by

sireesha morapakula
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
46 views5 pages

The W3C Document Object Model (DOM) Is A Platform and Language-Neutral Interface That Allows Programs and Scripts To Dynamically Access and Update The Content, Structure, and Style of A Document."

The document discusses the DOM (Document Object Model) which defines a standard for accessing and manipulating HTML and XML documents. It defines that every element in an HTML or XML document is a node, and these nodes can be traversed and manipulated like a tree structure using the DOM. Key DOM concepts covered include nodes, the node tree, and relationships between parent/child/sibling nodes. Methods like getElementById and properties like innerHTML are also discussed for programmatically interacting with DOM nodes using JavaScript.

Uploaded by

sireesha morapakula
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/ 5

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing HTML and XML documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and style
of a document."

The W3C DOM standard is separated into 3 different parts:

 Core DOM - standard model for any structured document


 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents

What is the XML DOM?

The XML DOM defines the objects and properties of all XML elements, and the methods to
access them.

What is the HTML DOM?

The HTML DOM is:

 A standard object model for HTML


 A standard programming interface for HTML
 A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and the methods to
access them.

In other words:

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

DOM Nodes

According to the W3C HTML DOM standard, everything in an HTML document is a node:

 The entire document is a document node


 Every HTML element is an element node
 The text inside HTML elements are text nodes
 Every HTML attribute is an attribute node
 Comments are comment nodes

The HTML DOM Node Tree

The HTML DOM views HTML documents as tree structures. The structure is called a Node
Tree:

HTML DOM Tree Example

With the HTML DOM, all nodes in the tree can be accessed by JavaScript. All HTML elements
(nodes) can be modified, and nodes can be created or deleted.

Node Parents, Children, and Siblings

The nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships. Parent nodes have
children. Children on the same level are called siblings

 In a node tree, the top node is called the root


 Every node has exactly one parent, except the root (which has no parent)
 A node can have any number of children
 Siblings are nodes with the same parent

The following image illustrates a part of the node tree and the relationship between the nodes:
Look at the following HTML fragment:

<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

From the HTML above:

 The <html> node has no parent node; it is the root node


 The parent node of the <head> and <body> nodes is the <html> node
 The parent node of the "Hello world!" text node is the <p> node

and:

 The <html> node has two child nodes: <head> and <body>
 The <head> node has one child node: the <title> node
 The <title> node also has one child node: the text node "DOM Tutorial"
 The <h1> and <p> nodes are siblings and child nodes of <body>

and:

 The <head> element is the first child of the <html> element


 The <body> element is the last child of the <html> element
 The <h1> element is the first child of the <body> element
 The <p> element is the last child of the <body> element
Programming Interface

The HTML DOM can be accessed with JavaScript (and other programming languages).

All HTML elements are defined as objects, and the programming interface is the object
methods and object properties .

A method is an action you can do (like add or modify an element).

A property is a value that you can get or set (like the name or content of a node).

The getElementById() Method

The getElementById() method returns the element with the specified ID:

Example
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
</body>
</html>
HTML DOM Objects - Methods and Properties

Some commonly used HTML DOM methods:

 getElementById(id) - get the node (element) with a specified id


 appendChild(node) - insert a new child node (element)
 removeChild(node) - remove a child node (element)

Some commonly used HTML DOM properties:

 innerHTML - the text value of a node (element)


 parentNode - the parent node of a node (element)
 childNodes - the child nodes of a node (element)
 attributes - the attributes nodes of a node (element)
A Real Life Object Illustration:

A person is an object.

A person's methods could be eat(), sleep(), work(), play(), etc.

All persons have these methods, but they are performed at different times.

A person's properties include name, height, weight, age, eye color, etc.

All persons have these properties, but their values differ from person to person.

Some DOM Object Methods

Here are some of the (most common) methods

Method Description
getElementById() Returns the element that has an ID
attribute with the a value
getElementsByTagName() Returns a node list (collection/array of
nodes) containing all elements with a
specified tag name
getElementsByClassName() Returns a node list containing all
elements with a specified class

appendChild() Adds a new child node to a specified


node
removeChild() Removes a child node
replaceChild() Replaces a child node
insertBefore() Inserts a new child node before a
specified child node

createAttribute() Creates an Attribute node


createElement() Creates an Element node
createTextNode() Creates a Text node

getAttribute() Returns the specified attribute value


setAttribute() Sets or changes the specified attribute,
to the specified value

You might also like