Scribd
Upload
44 views4 pages

A1. Discuss HTML DOM With Suitable Example

The DOM represents an HTML or XML document as a tree structure, with nodes and objects that can be manipulated. It allows JavaScript to access and modify the content, structure, and style of a document. The DOM tree has the window object at the top, with document and element nodes below it that correspond to tags in the HTML code. JavaScript can select element nodes using methods like getElementById() and manipulate their content and styling.

Uploaded by

Shiva
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 views4 pages

A1. Discuss HTML DOM With Suitable Example

The DOM represents an HTML or XML document as a tree structure, with nodes and objects that can be manipulated. It allows JavaScript to access and modify the content, structure, and style of a document. The DOM tree has the window object at the top, with document and element nodes below it that correspond to tags in the HTML code. JavaScript can select element nodes using methods like getElementById() and manipulate their content and styling.

Uploaded by

Shiva
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/ 4

A1.

Discuss HTML DOM with suitable example

Why DOM?

The Document Object Model (DOM) is a programming interface for HTML and
XML(Extensible markup language) documents. It defines the logical structure of
documents and the way a document is accessed and manipulated.

DOM is a way to represent the webpage in a structured hierarchical way so that it will
become easier for programmers and users to glide through the document. With DOM,
we can easily access and manipulate tags, IDs, classes, Attributes, or Elements using
commands or methods provided by the Document object

Requirement of DOM:

HTML is used to structure the web pages and Javascript is used to add behavior to
our web pages. When an HTML file is loaded into the browser, the javascript can not
understand the HTML document directly. So, a corresponding document is
created(DOM). DOM is basically the representation of the same HTML document
but in a different format with the use of objects. Javascript interprets DOM easily i.e
javascript can not understand the tags(<h1>H</h1>) in HTML document but can
understand object h1 in DOM. Now, Javascript can access each of the objects (h1, p,
etc) by using different functions.

Structure of DOM:

DOM can be thought of as a Tree or Forest(more than one tree). The term structure
model is sometimes used to describe the tree-like representation of a document. One
important property of DOM structure models is structural isomorphism: if any two
DOM implementations are used to create a representation of the same document, they
will create the same structure model, with precisely the same objects and relationships.
Why called an Object Model?
Documents are modeled using objects, and the model includes not only the structure of
a document but also the behavior of a document and the objects of which it is
composed of like tag elements with attributes in HTML.

Properties of DOM: Let’s see the properties of the document object that can be
accessed and modified by the document object.

Window Object: Window Object is always at top of the hierarchy.


Document object: When an HTML document is loaded into a window, it becomes a
document object.
Form Object: It is represented by form tags.
Link Object: It is represented by link tags.
Anchor Object: It is represented by a href tags.
Form Control Elements:: Form can have many control elements such as text fields,
buttons, radio buttons, and checkboxes, etc.

Methods of Document Object:

● write(“string”): Writes the given string on the document.


● getElementById(): returns the element having the given id value.
● getElementsByName(): returns all the elements having the given name
value.
● getElementsByTagName(): returns all the elements having the given tag
name.
● getElementsByClassName(): returns all the elements having the given class
name.

Example: This example describes the representation of the HTML elements in the tree
structure.

<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
</ROWS>
</table>
Output:

You might also like