Scribd
Upload
8 views34 pages

Unit 3 HTML Dom and Bom

The document provides an overview of the Document Object Model (DOM) and Browser Object Model (BOM) in web development. It explains how the DOM represents the HTML document structure, methods to manipulate elements, and the BOM's role in interacting with the browser. Key concepts include accessing elements, modifying content, and using the navigator and window objects for browser-related information.

Uploaded by

srishtiarora0110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
8 views34 pages

Unit 3 HTML Dom and Bom

The document provides an overview of the Document Object Model (DOM) and Browser Object Model (BOM) in web development. It explains how the DOM represents the HTML document structure, methods to manipulate elements, and the BOM's role in interacting with the browser. Key concepts include accessing elements, modifying content, and using the navigator and window objects for browser-related information.

Uploaded by

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

HTML Document Object Model

(DOM)
and
Browser Object Model (BOM)

Unit 3

Dr Anupama Jha
Document Object Model
•The document object represents the whole html document.
•DOM is the logical structure of the entire document.
•When html document is loaded in the browser, it becomes a
document object.
•It is the root element that represents the html document.
•It has properties and methods.
•By the help of document object, we can add dynamic content
to our web page.

As it is the object of window. So


window.document
Is same as
document
Dr Anupama Jha
Dr Anupama Jha
Dr Anupama Jha
Methods of document object
We can access and change the contents of document by its methods.
The important methods of document object are as follows:

Dr Anupama Jha
If the element is found, the method will return the element as an object (in element).
If the element is not found, element will contain null.

Dr Anupama Jha
Accessing/finding field value by document object

In this example, we are going to get the value of input text by user. Here, we are
using document.form1.name.value to get the value of name field.
Here, document is the root element that represents the html document.
form1 is the name of the form.
name is the attribute name of the input text. value is the property, that returns the value of the
input text.
Let's see the simple example of document object that prints name with welcome message.

1.<script type="text/javascript">
2.function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5.}
6.</script>
7.
8.<form name="form1">
9.Enter Name:<input type="text" name="name"/
>
10.<input type="button" onclick="printvalue()" v
alue="print name"/> Dr Anupama Jha
Finding HTML Element by Id
The document.getElementById() method returns the
element of specified id. If the element is found, the
In the previous example, we have method will return the element as
used document.form1.name.value to get the value of an object (in element).
the input value. If the element is not found,
element will contain null.
Instead of this, we can use
document.getElementById() method to get value of
the input text. But we need to define id for the input
field. 1.<script type="text/javascript">
2.function getcube(){
Let's see using this method to prints cube of the 3.given
number. var number=document.getElementById("number")
.value;
4. alert(number*number*number);
5.}
6.</script>
7.<form>
8.
Enter No:<input type="text" id="number" name=
"number"/><br/>
9.<input type="button" value="cube" onclick="g
Dr Anupama Jha
etcube()"/>
Finding tagname - document.getElementsByTagName() method

The document.getElementsByTagName() method returns all the element


of specified tag name.

The syntax of the getElementsByTagName() method is given below:

document.getElementsByTagName("name") ;

Here, name is required.


1.<script type="text/javascript">
2.function countpara(){
3.var totalpara=document.getElementsByTagNam
e("p");
4.alert("total p tags are: "+totalpara.length);
5.
6.}
7.</script>
8.<p>This is a pragraph</p>
9.<p>Here we are going to count total number of
paragraphs by getElementByTagName() method.<
/p>
10.<p>Let's see the simple example</p>
Dr Anupama Jha
11.<button onclick="countpara()">count paragra
Changing HTML Content – innerHTML
The innerHTML property can be used to write the dynamic html on the html document. It
is used mostly in the web pages to generate the dynamic html such as registration form,
comment form, links etc.

Dr Anupama Jha
In the example above, getElementById is a method, while innerHTML is a property.
<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html>

Dr Anupama Jha
Dr Anupama Jha
Dr Anupama Jha
Dr Anupama Jha
Dr Anupama Jha
Child Nodes and Node Values

Dr Anupama Jha
All the (3) following examples retrieves the text of an <h1> element and copies it into a <p> element:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h1 id="id01">My First Page</h1> <h1 id="id01">My First Page</h1>
<p id="id02"></p> <p id="id02"></p>
<script> <script>
document.getElementById("id02").innerHTML document.getElementById("id02").innerHTML =
= document.getElementById("id01").firstChild.nodeValue
document.getElementById("id01").innerHTML; ;
</script> </script>
</body> </body>
</html> </html>
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").childNodes[0].nodeValue;
</script></body></html>
Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p id="demo"></p> <!DOCTYPE html>
<script> <html>
document.getElementById("demo").innerHTML = <body>
document.body.innerHTML; <h1 id="id01">My First Page</h1>
</script></body></html> <p id="id02"></p>
<!DOCTYPE html> <script>
<html> document.getElementById("id02").innerHTML =
<body> document.getElementById("id01").nodeName;
<h2>JavaScript HTMLDOM</h2> </script></body></html>
<p>Displaying document.documentElement</p>
<p id="demo"></p> nodeName always contains the
<script>
document.getElementById("demo").innerHTML =
uppercase tag name of an HTML
document.documentElement.innerHTML; element.
</script></body></html> Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is
new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html> Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>


<p>Add a new HTML Element.</p>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script></body></html>
Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<button onclick="myFunction()">Remove
Element</button>
<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>
</body>
</html>
Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is a paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script></body></html>

Dr Anupama Jha
The Browser Object Model – BOM

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Window</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Browser inner window width: " + window.innerWidth + "px<br>" +
"Browser inner window height: " + window.innerHeight + "px";
</script>
</body>
</html>

Dr Anupama Jha
Dr Anupama Jha
Dr Anupama Jha
JavaScript Window Location

The window.location object can be used to get the current page address (URL) and to redirect
the browser to a new page.

Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>


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

<script>
document.getElementById("demo").innerHTML =
"The full URL of this page is:<br>" + window.location.href;
</script></body></html>

Dr Anupama Jha
Dr Anupama Jha
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document"


onclick="newDoc()">

<script>
function newDoc() {
window.location.assign("https://www.google.com/")
}
</script>

</body>
</html>

Dr Anupama Jha
Window History Back

Dr Anupama Jha
Window History Forward JavaScript Window Navigator
The window.navigator object contains
information about the visitor's browser.

Browser Cookies
The cookieEnabled property returns true if cookies are
enabled, otherwise false:
<!DOCTYPE html>
<html>
<body>
<h2>The Navigator Object</h2>
<p>The cookieEnabled property returns true if cookies are
enabled:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;
Dr Anupama Jha </script></body></html>
Browser Application Name Browser Application Code Name
The appName property returns the application name of The appCodeName property returns the application code
the browser: name of the browser:

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<body> <body>
<h2>The Navigator Object</h2> <h2>JavaScript Navigator</h2>
<p>The appName property returns the application <p>The appCodeName property returns the code name of the
name of the browser:</p> browser.</p>
<p id="demo"></p> <p id="demo"></p>
<script> <script>
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML =
"navigator.appName is " + navigator.appName; "navigator.appCodeName is " + navigator.appCodeName;
</script></body></html> </script></body></html>

Dr Anupama Jha
The Browser Platform
The platform property returns the browser
platform (operating system):
<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>


<p>The platform property returns the browser platform
(operating system):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.platform is " + navigator.platform;
</script></body></html>

Dr Anupama Jha

You might also like