Scribd Logo
Upload

Welcome to Scribd!

  • JS Dom

    Uploaded by

    Magarsa Bedasa
    30 views4 pages
    JavaScript can interact with the DOM (Document Object Model) to modify an HTML document dynamically after it has loaded. The DOM represents the document as nodes that JavaScript can access and modify. 1. When a page loads, the browser builds a DOM representation of the HTML document. 2. JavaScript can select DOM elements using methods like getElementById() and modify their content, styles, and attributes. 3. When the DOM is updated, the browser automatically updates the page display to reflect the changes.

    Original Description:

    RRRRRRRRRRRR

    Original Title

    JS DOM

    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
    JavaScript can interact with the DOM (Document Object Model) to modify an HTML document dynamically after it has loaded. The DOM represents the document as nodes that JavaScript can access and modify. 1. When a page loads, the browser builds a DOM representation of the HTML document. 2. JavaScript can select DOM elements using methods like getElementById() and modify their content, styles, and attributes. 3. When the DOM is updated, the browser automatically updates the page display to reflect the changes.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    30 views4 pages

    JS Dom

    Uploaded by

    Magarsa Bedasa
    JavaScript can interact with the DOM (Document Object Model) to modify an HTML document dynamically after it has loaded. The DOM represents the document as nodes that JavaScript can access and modify. 1. When a page loads, the browser builds a DOM representation of the HTML document. 2. JavaScript can select DOM elements using methods like getElementById() and modify their content, styles, and attributes. 3. When the DOM is updated, the browser automatically updates the page display to reflect the changes.

    Copyright:

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

    JavaScript and the DOM

    JavaScript and HTML are two different things. HTML is markup and JavaScript is code. So how do you get
    JavaScript to interact with the markup in your page? You use the Document Object Model.
     When you load a page into the browser, the browser parses the HTML and creates an internal model of
    your document that contains all the elements of your HTML markup.
     Your JavaScript can interact with the DOM to get access to the elements and the content in them.
    JavaScript can also use the DOM to create or remove elements (among a number of other things we’ll be
    getting to).
     When JavaScript modifies the DOM, the browser updates the page dynamically, so you see new content on
    your page.
     JavaScript can change the content, change the style, change the attribute of an HTML element
     JavaScript can add and delete new HTML elements
     There are two steps to perform all the above task
     Get the element to change the content, attribute or style
     Change it

    Edit the following page using JavaScript


     Change the h2 content to JavaScript Content
    <doctype html>
    <html>
    <head>
    <title>Find Element</title>
    </head>
    <body>
    <h2 id="i1" class="c1">This is the HTML
    content</h2>
    </body>
    </html>

    i. Find the HTML element

     There are 3 basic methods


    a. getElementById() method

    var i=document.getElementById("i1");

    we can get the element by its id “i1” and assign it to a variable i.

    the method returns a single element

    b. getElementByTagName()

    var i=document.getElementsByTagName("h2");

    we can get that element by its tag name

    the method returns an array of h2 elements

    c. getElementByClassName()

    var i=document.getElementsByClassName("c1");

    we can get that element by its class name.

    this method also returns an array of elements with “c1” class

    ii. Change the HTML Element


    a. Change the inner HTML (content)
    To change the elements content we use “innerHTML” method

    var i=document.getElementById("i1");

    i.innerHTML=”JavaScript Content”;
    OR we can find the element by its tag name or class name and modify its content

    var i=document.getElementsByTagName("h2");

    i[0].innerHTML=”JavaScript Content”;

     To change the attribute of an element we use the “element.attribute” or


    element.setAttribute(“attribute-name” , “value”)
    Example - var i=document.getElementsByClassName("c1");
    i[0].setAttribute("id","ccc"); // or i[0].id=”anotherId”;
     To change the style of an element we use “ element.style.property=” method

    Example - var i=document.getElementById("i1");

    i.style.color=”purple”;

    when to change content, attribute or style of an element ------------------ DOM EVENTS

    Events are generated by the browser when "things happen" to HTML elements.

    i. Onclick event  ocured when a user clicks

    <doctype html>
    <html>
    <head>
    <title>Evaent</title>
    </head>
    <body>
    <p id="pid"
    onclick="change()">Click Me</p>
    <script>
    var
    pid=document.getElementById("pid")
    ;
    function change(){
    pid.innerHTML="you did it";
    }
    </script>
    </body>
    </html>

    Exercise one  write HTML5 and javaScript that changes an image src attribute on click
    event.

    Checkevent.htm

    <doctype html>
    <html>
    <head>
    <title>Event</title>
    </head>
    <body>
    <fieldset>
    <legend><p id="pid" onclick="change()">Click Me</p></legend>
    <form>
    NAME: <input type="text" id="input" onchange="function2()"
    placeholder="enter more than two characters">
    <p id="result"></p>
    <input type="button" id="m" onmouseover="mouseover()"
    value="mouseover" onmouseout="mo()">
    <p id="result"></p>
    </form>
    </fieldset>
    <script>
    var pid=document.getElementById("pid");
    function change(){
    pid.innerHTML="you did it";

    }
    function function2(){
    var r=document.getElementById("input");
    if(r.value.length <= 2)
    //alert("that is not a name");
    var result=document.getElementById("result").innerHTML=r.value+" is
    not a name";
    else
    var result=document.getElementById("result").innerHTML="THANK YOU
    "+r.value;
    }
    function mouseover(){
    var m=document.getElementById("m");
    m.style.color="blue";

    }
    function mo(){
    var m=document.getElementById("m");
    m.style.color="white";
    }
    </script>
    </body>
    </html>

    You might also like