Scribd
Upload
25 views

The Innerhtml Property

Uploaded by

Rohan Jha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

The Innerhtml Property

Uploaded by

Rohan Jha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

DOM

The Document Object Model DOM is an API that allows programs to interact with HTML or
XML documents

The primary function of the Document Object Model is to view, access, and change the structure
of an HTML document separate from the content contained within it.

The DOM will provide you with methods and properties to retrieve, modify, update, and delete
parts of the document you are working on. The properties of the Document Object Model are
used to describe the web page or document and the methods of the Document Object Model are
used for working with parts of the web page.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML element).

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

The innerHTML Property


The easiest way to get the content of an element is by using the innerHTML property.

The innerHTML property is useful for getting or replacing the content of HTML elements.

The innerHTML property can be used to get or change any HTML element, including <html>
and <body>.
The getElementById Method
The most common way to access an HTML element is to use the id of the element.

Finding HTML Elements


Method Description
document.getElementById() Find an element by element id
document.getElementsByTagName() Find elements by tag name
document.getElementsByClassName() Find elements by class name

In DOM, HTML document is represented in tree like structure.

For example,
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>
1) Finding HTML Elements by Id

<html>

<body>

<a name="sahil">Sahil </a><br>

<a name="Rahul">Rahul</a><br>

<a name="Gautam">Gautam</a><br>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

"Number of anchors are: " + document.anchors.length;

</script>

</body>

</html>

OUTPUT

Sahil
Rahul
Gautam

Number of anchors are: 3


2) COUNT Number of images on page

<html>

<body>

<img src="pic_htmltree.gif">

<img src="pic_navigate.gif">

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

"Number of images: " + document.images.length;

</script>

</body>

</html>

OUTPUT

You might also like