Scribd Logo
Upload

Welcome to Scribd!

  • CSS Lec-16 Selecting HTML Elements - Fa1f670

    Uploaded by

    069 Umesh Chaudhari
    15 views4 pages
    The document discusses 4 methods for selecting HTML elements: getElementById(), getElementsByName(), getElementsTagName(), and getElementsByClassName(). It provides the syntax and examples of using each method to select and modify elements on a page. getElementById() returns a single element by ID. The others return node lists that can be accessed by index.

    Original Description:

    This is js notes

    Original Title

    CSS Lec-16 Selecting HTML Elements.fa1f670

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses 4 methods for selecting HTML elements: getElementById(), getElementsByName(), getElementsTagName(), and getElementsByClassName(). It provides the syntax and examples of using each method to select and modify elements on a page. getElementById() returns a single element by ID. The others return node lists that can be accessed by index.

    Copyright:

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

    CSS Lec-16 Selecting HTML Elements - Fa1f670

    Uploaded by

    069 Umesh Chaudhari
    The document discusses 4 methods for selecting HTML elements: getElementById(), getElementsByName(), getElementsTagName(), and getElementsByClassName(). It provides the syntax and examples of using each method to select and modify elements on a page. getElementById() returns a single element by ID. The others return node lists that can be accessed by index.

    Copyright:

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

    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    CSS Lecture-16
    Topic: Selecting HTML Elements

    Forms and the elements they contain can be selected from a document using
    standard methods like
    getElementById(),
    getElementsByName(),
    getElementsByTagName()
    getElementsByClassName()

    1) getElementById():
     The getElementById() method returns the element that has the ID attribute
    with the specified value.

     This method is one of the most common methods in the HTML DOM.

     Returns null if no elements with the specified ID exists.

     Syntax:
    element=document.getElementById(id);
    For Example: (getid.html)
    <html>
    <body>
    <p id="p1">Hello World</p>
    <input type="button" value="Click" onclick="abc()">
    </body>
    <script>
    function abc(){
    var ele=document.getElementById("p1").innerHTML="Info Planet";
    }
    </script>
    </html>

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    2) getElementsByTagName():
     This method returns a collection(array) of all elements in the document
    with the specified tag name.

     The elements can be accessed by index numbers. The index starts at 0.

     Note: The parameter value "*" returns all elements in the document.

     Syntax:
    elements=document.getElementsByTagName (tag_name);
    For Example: (gettagname1.html)
    <html>
    <body>
    <p> This is first paragraph </p>
    <p> This is second paragraph </p>
    <p> This is third paragraph </p>
    <p> This is fourth paragraph </p>
    <p> This is fifth paragraph </p>
    <input type="button" value="Click" onclick="abc()">
    </body>
    <script>
    function abc(){
    var e = document.getElementsByTagName("p");
    for(i=0;i<e.length;i++)
    e[i].style.color="red";
    }
    </script>
    </html>

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    3) getElementsByName()
     This method returns a collection(array) of all elements in the document
    with the specified name.

     The elements can be accessed by index numbers. The index starts at 0.

     Syntax:
    elements=document.getElementsByName (name);
    Fox Example: (getname.html)
    <html>
    <body>
    <form>
    FirstName:<input type="text" id="t1" name="firstname"><br>
    LastName:<input type="text" name="lastname" ><br>
    Email:<input type="text" name="email"><br>
    <input type="button" value="Click" onclick="abc()">
    </form>

    <p id="p1"></p>
    </body>
    <script>
    function abc(){
    var elements = document.getElementsByName("firstname");
    document.getElementById("p1").innerHTML=
    elements[0].type+" "+elements[0].name+" "+elements[0].value
    ;
    }
    </script>

    </html>

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    4) getElementsByClassName()
    This method returns a collection of all elements in the document with the
    specified class name.

    Syntax:
    elements=document.getElementsByClassName(class_name);

    Fox Example: (getclassname.html)


    <html>
    <body>
    <p class="mypara"> This is first paragraph </p>
    <p> This is second paragraph </p>
    <p class="mypara"> This is third paragraph </p>
    <a class="mypara" href="www.google.com">Google</a><br><br>
    <input type="button" value="Click" onclick="abc()">
    </body>
    <script>
    function abc(){
    var e = document.getElementsByClassName("mypara");
    for(i=0;i<e.length;i++)
    e[i].style.color="red";
    }
    </script>
    </html>

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260

    You might also like