Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Javascript DOM

    Uploaded by

    Gabriel Alan Maldonado

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Javascript DOM

    Uploaded by

    Gabriel Alan Maldonado
    9 views9 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    9 views9 pages

    Javascript DOM

    Uploaded by

    Gabriel Alan Maldonado

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 9

    1/8

    JavaScript
    DOM Manipulation
    Mastering DOM Manipulation with JavaScript 🚀💡

    Jimmy Ramani
    @jimmyramani
    2/8

    Selecting Elements

    document.documentElement :

    Represents the root element (<html>) of the document.

    document.head :

    Represents the <head> element of the document.

    document.body :

    Represents the <body> element of the document.

    p l e :
    Ex am

    Jimmy Ramani
    @jimmyramani
    3/8

    document.querySelector :

    Selects the first element that matches the given CSS selector.

    p l e :
    Ex am

    document.querySelectorAll :

    Selects all elements that match the given CSS selector.

    p l e :
    Ex am

    Jimmy Ramani
    @jimmyramani
    4/8

    document.getElementById :

    Selects an element by its unique ID.

    p l e :
    Ex am

    document.getElementsByTagName :

    returns a live HTMLCollection that directly


    reflects changes made to the DOM.

    other not automatically update


    Selects all elements that match the given CSS selector.

    p l e :
    Ex am

    Jimmy Ramani
    @jimmyramani
    5/8

    document..getElementsByClassName :

    Selects elements by their class name.

    p l e :
    Ex am

    document..getElementsByName :

    Selects elements by their name attribute.

    p l e :
    Ex am

    Jimmy Ramani
    @jimmyramani
    6/8

    Creating and Inserting Elements

    Jimmy Ramani
    @jimmyramani
    7/8

    Deleting Elements
    remove() :

    parentElement.removeChild() :

    we've added an event listener to the .btn element that removes the
    message element when the button is clicked. You can also achieve the
    same result using the parentElement.removeChild() method ...

    Jimmy Ramani
    @jimmyramani
    8/8

    Playing all above


    with UI

    just click on
    https://codepen.io/jimmyramani
    Go to

    View Source Code


    Go
    to

    Js File
    Uncommenting the code
    last

    & start practising


    to
    Go

    Jimmy Ramani
    @jimmyramani
    WAS THIS
    HELPFUL?
    Share with a friend who needs it!

    Jimmy Ramani
    @jimmyramani

    You might also like