Document object in javascript.

 

Document Object Model(DOM) in Javascript

        DOM stands for Document Object Model.

        When we are loaded html document into a web browser that time it becomes document object. The logical structure of document is defined by using document object in JavaScript. By using Document Object Model,we access the document content and modified it.Document Object model is programming interface for both HTML and XML documents.

        For standardization of web technologies W3C (World Wide Web Consortium) is used.In javascript,the standardization of DOM was founded by W3C.

Properties of DOM object-

1.head - 

            This head property is associated with HTML <head> element. By using this property we get <head>element information. 

2.title-

            In javascript when we want to set or returns the title of HTML document, title property is used.

3.URL-(Uniform Resource Locator)

           It is used for sets or returns the full url i.e.address or location of the html  document.

4.body,img-

        In javascript <body> and <img> property returns <body> and <img> elements respectively.

Methods of DOM object-

1.write() -

        In javscript to write HTML expressions or javascript code to a document, this method is used.

    e.g.document.write("Welcome To Javascript")

2.writeln() -

        writeln() method is same as write() method but there is difference i.e.in writeln() method it adds newline character.

    e.g.document.write("Welcome");

           document.writeln("Javascript");

3.getElementById() -

        For accessing form elements getElementById() method is used. In this method id property is used to find an element.


innerHTML Property-

        In Javascript to get or change any HTML element including <html> and <body>,innerHTML property is used.The innerHTML property is used for changing and getting html element content.

Example-

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function changeText()

{

var style="<h3 style='color:red'>";

var text="Information Technology";

var clstyle="</h3>";

document.getElementById('p1').innerHTML=style+text+clstyle;

}

</script>

</head>

<body>

<h1 align="center">

<p id="p1">Welcome to Information Technology</p>

<input type="button" onclick="changeText()" value="Change Text">

</h1>

</body>

</html>

Output-

For More Videos Click





        

        




Previous
Next Post »

Please Comment and Share. ConversionConversion EmoticonEmoticon