Scribd Logo
Upload

Welcome to Scribd!

  • Dompgms

    Uploaded by

    Tejashwini Gadag
    5 views9 pages
    The document contains examples of using DOM methods like getElementById, createElement, appendChild, removeChild, and event handlers like onclick to manipulate the document structure and display alerts. It demonstrates how to add, remove and modify elements, handle events, and display values from inputs on the page.

    Original Description:

    pgms

    Original Title

    dompgms

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains examples of using DOM methods like getElementById, createElement, appendChild, removeChild, and event handlers like onclick to manipulate the document structure and display alerts. It demonstrates how to add, remove and modify elements, handle events, and display values from inputs on the page.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    5 views9 pages

    Dompgms

    Uploaded by

    Tejashwini Gadag
    The document contains examples of using DOM methods like getElementById, createElement, appendChild, removeChild, and event handlers like onclick to manipulate the document structure and display alerts. It demonstrates how to add, remove and modify elements, handle events, and display values from inputs on the page.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 9

    1.

    Onclick using appro DOM

    <!doctype html>
    <html>
    <title> Demo of onclick Tag Attributes</title>
    <script type ="text/javascript">
    function my_fun()
    {
    alert("Hello Welcome all of you");
    }
    </script>
    </head>
    <body >
    <center>
    <form>
    <input type="button" value="click" onclick="my_fun()">
    </form>
    </center>
    </body>
    </html>

    Output
    2. Display sum of two number. Make use of appro DOM methods

    <!Doctype html>
    <html>
    <head>
    <script type="text/javascript">
    function getsum()
    {
    var number1=document.getElementById("number1").value;
    var number2=document.getElementById("number2").value;
    var num1=Number(number1);
    var num2=Number(number2);
    alert(num1+num2);
    }
    </script>
    </head>
    <body>
    <form>
    Enter Num1: <input type="text" id="number1"/><br/> <br/>
    Enter Num2: <input type="text" id="number2"/><br/>
    <input type ="button" value="SUM" onclick="getsum()"/>
    </form>
    </body>
    </html>

    Output

    3. Maniplation of DOM.. Create Element


    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function Function()
    {
    var btn= document.createElement("BUTTON");
    document.body.appendChild(btn);
    }
    </script>
    </head>
    <body>
    <button onclick="Function()">Create Button </button>
    </body>
    </html>

    OutPut
    4.Create Element and AppendObject using appro DOM

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function Function()
    {
    var btn= document.createElement("BUTTON");
    var txt= document.createTextNode("click");
    btn.appendChild(txt);
    document.body.appendChild(btn);
    }
    </script>
    </head>
    <body>
    <button onclick="Function()">Create Button </button>
    </body>
    </html>

    Output
    5. Remove Element using appro DOM

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function Function()
    {
    var list= document.getElementById("colors");
    list.removeChild(list.childNodes[1]); // removes the first child from the list
    }
    </script>
    </head>
    <body>
    <ul id="colors"><li>Red</li><li>Blue</li><li>green</li><li>yellow</li><li> black</li> </ul>
    <button onclick="Function()">Remove Element </button>
    </body>
    </html>
    6. Appending the child node using appro DOM

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function Function()
    {
    var node=document.createElement("li");
    var txt=document.createTextNode("White");
    node.appendChild(txt);
    document.getElementById("colors").appendChild(node);

    }
    </script>
    </head>
    <body>
    <ul id="colors">
    <li>Red</li>
    <li>Blue</li>
    <li>green</li>
    <li>yellow</li>
    <li> black</li>
    </ul>
    <button onclick="Function()">Append Element </button>
    </body>
    </html>

    Output
    7. Event

    Event handling using onload event

    <!doctype html>
    <html>
    <head>
    <title> Demo of onload Tag Attributes</title>
    <script type ="text/javascript">
    function my_fun()
    {
    alert("welcome");
    }
    </script>
    </head>
    <body onload="my_fun()">
    </body>
    </html>
    8. For handling the event button element tag attibuite onClick

    <!doctype html>
    <html>
    <title> Demo of onclick Tag Attributes</title>
    <script type ="text/javascript">
    function my_fun()
    {
    alert("Hello Welcome all of you");
    }
    </script>
    </head>
    <body >
    <center>
    <form>
    <input type="button" value="click" onclick="my_fun()">
    </form>
    </center>
    </body>
    </html>

    Output
    8.create a javascript which has event handlers for he buttons red,blue,green,yellow,orange and
    displaying msg stating fav colour,

    <!doctype html>
    <html>
    <title> Demo of onload Tag Attributes</title>
    <script type ="text/javascript">
    function fun(form_obj)
    {
    alert("your favourite color is " + form_obj.value);
    }
    </script>
    </head>
    <body>
    <form name="form1" method=post>
    <div align="left>"> <br/>
    <input type="radio" name="group1" value="red" onclick=fun(this)>red <br/>
    <input type="radio" name="group1" value="blue" onclick=fun(this)>blue <br/>
    <input type="radio" name="group1" value="green" onclick=fun(this)>green <br/>
    <input type="radio" name="group1" value="yellow" onclick=fun(this)>yellow<br/>
    <input type="radio" name="group1" value="orange" onclick=fun(this)>orange<br/>
    <center>
    </body>
    </html>

    Output

    You might also like