2.java script dom

1. Arulkumar V Asst.Professor- CSE SECE JavaScript DOM

2. DOM Document Object Model  Every web page resides inside a browser window which can be considered as an object.  It represents the HTML document that is displayed in that window.  It has various properties that refer to other objects which allow access to and modification of document content.  This way is accessed and modified is called the Document Object Model, or DOM.  Hierarchical structure to the organization of objects in a Web document. =>

3. objects in a Web document.  Window object  Document object  Form object  Form control elements

4. Property & Description  Body - document.body  defaultView - document.defaultView  documentElement - document.documentElement8/31/2008  getElementById( id) - document.getElementById( id)  getElementsByName( name) - document.getElementsByName( name)  getElementsByTagName( tagname)- document.getElementsByTagName( tagname) 

5. DOMs in existence <head> <title> Document Title </title> <script type="text/javascript">  </script> </head>

6. <body> <h1 id="heading">This is main title</h1> <p>Click the following to see the result:</p> <form id="form1" name="FirstForm"> <input type="button" value="Click Me" onclick="myFunc();" /> <input type="button" value="Cancel"> </form> <form d="form2" name="SecondForm"> <input type="button" value="Don't ClickMe"/> </form> </body>

7. JavaScript - The Date Object  Date object is a datatype built into the JavaScript  Created with the new Date( )  new Date( )  new Date(milliseconds)  new Date(datestring)  new Date(year,month,date[, hour,minute,second,millisecond ])

8. JavaScript - The Date Object <html> <head> <title>JavaScript Date Method</title> </head> <body> <script type="text/javascript"> var dt = Date(); document.write("Date and Time : " + dt ); </script> </body> </html> Output: Date and Time : Tue Aug 08 2017 17:15:06 GMT+0530 (India Standard Time)

9. JavaScript – Domain example <html> <body> <p>Click the button to display the domain name of the server that loaded this document.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = document.domain; } </script></body></html> Click the try button to display the domain name of the server that loaded this document. o/p: www.google.com

10. JavaScript - Cookie <html> <body> <p id="demo">Click the button to display the cookies associated with this document.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Cookies associated with this document: " + document.cookie; } </script></body></html> Cookies associated with this document: __gads=ID=66b36630d70e3ac5:T=1502354049:S=ALNI_Mawf4e62DiZ3EEzs_-NPMoLpCUO2Q; _gat=1; _ga=GA1.2.148245611.1502354051; _gid=GA1.2.144215362.1502354051

11. JavaScript – Count Input tag <html><head> <script> function getElements() { var x = document.getElementsByTagName("input"); document.getElementById("demo").innerHTML = x.length; } </script></head><body> <input type="text" size="20"><br> <input type="text" size="20"><br> <input type="text" size="20"><br> <p> <input type="button" onclick="getElements()" value="How many input elements?“> </p> <p id="demo">Prints here:</p> </body> </html> Click How many input elements? Button o/p: 4

12. JavaScript – CSS Manipulation <html> <body> <p id="p1"> This is a text. This is a text. This is a text. </p> <input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'"> <input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'"> </body> </html>

2.java script dom

2.java script dom

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a 2.java script dom

Similar a 2.java script dom(20)

Mais de PhD Research Scholar

Mais de PhD Research Scholar(20)

Último

Último(20)

2.java script dom