• Wednesday , 1 April 2020

JavaScript Tutorial For Beginners #33 – Traversing the DOM

Code Canyon



Hey all, in this JavaScript tutorial for beginners, I’ll explain how we can reach into the DOM and grab content (nodes) from the DOM tree, such as elements, classes and ID’s. And I’ll also explain how we can search ‘within’ tags under different scopes to find child elements.

In this tutorial we’ll learn three JavaScript methods (functions) to do that:

getElementsByTagName() – returns an array of objects
getElementsByClassName() – returns an array of objects
getElementById() – returns a single object

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Original source

3d Ocean

Related Posts

28 Comments

  1. Christina Raganit
    February 23, 2020 at 18:01

    I have a midterm on this tomorrow – thank you for your help, my guy!

  2. Lane Ferm
    February 23, 2020 at 18:01

    9/28/19 3:13pm PST the HTML on your …https://www.thenetninja.co.uk.….website is different than on your tutorial. Cant follow the lesson by syntax ( this is important when learning ) but can just watch it. Ok, I know you have many tutorials and its probably nearly impossible to keep it all updated, but just letting you know.

  3. Dan Katende
    February 23, 2020 at 18:01

    Wow this video helped me a lot ! keep it up dude.

  4. Awais Ahmed
    February 23, 2020 at 18:01

    my data did not show in array form why ?

  5. Sean Song
    February 23, 2020 at 18:01

    Very good explanation. Very clear and cover the points.

  6. Owen Crowie
    February 23, 2020 at 18:01

    Can anyone help? I'm stuck n this video

    I get an error, this is my code:

    var myContentDivs = document.getElementsByClassName("content");
    // this returns html collection

    var myH2 = myContentDivs[1].getElementsByTagName("h2");
    // Returns an Error:

    VM1014:1 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
    at <anonymous>:1:29

  7. jan carlo castro
    February 23, 2020 at 18:01

    Where can we download your examples?

  8. Ivan Yosifov
    February 23, 2020 at 18:01

    That was a tutorial on selecting DOM elements, not on traversing!

  9. Jay Boland
    February 23, 2020 at 18:01

    Thanks

  10. Dave Andrea
    February 23, 2020 at 18:01

    Crystal clear. Very helpful.

  11. Ashwin Nair
    February 23, 2020 at 18:01

    u've actually made javascript fun to learn…..CHEERS

  12. Creation's Journey
    February 23, 2020 at 18:01

    thanks a lot! Was very helpful! I 've just started to practice JS DOM. Like that a lot.

  13. Reflexez
    February 23, 2020 at 18:01

    you could have done myContentDivs[1].firstElementChild for the <h2> tag right?

  14. Deep Roy
    February 23, 2020 at 18:01

    wow

  15. Aaron Ramsden
    February 23, 2020 at 18:01

    This really needs more than 500 likes, I actually understood how the D.O.M works thanks to your channel

  16. mickzeh 89
    February 23, 2020 at 18:01

    any idea, why my console always returns HTMLCollection, and then i always have to use dropdown button to see what text "h2" actually has by checking innerHTML. ?

  17. happy rebel
    February 23, 2020 at 18:01

    Amazing, you level down me stress, thumbs up…. now subscribed 🙂

  18. False Knight
    February 23, 2020 at 18:01

    Thanks for making me feel like I'm building my ninja coding skills :).

  19. Abdelrahman Magdy
    February 23, 2020 at 18:01

    thanks

  20. Fahad Waqar
    February 23, 2020 at 18:01

    One of the most easiest way to learn Javascript

  21. Scorpion
    February 23, 2020 at 18:01

    Your explanations are so simple and understanding . Thanks 😉

  22. bashconsole
    February 23, 2020 at 18:01

    you rock, dude! the best!

  23. pseudop
    February 23, 2020 at 18:01

    i believe it returned a node list, not an array

  24. COUNTING DEMON STUDIOS
    February 23, 2020 at 18:01

    MGTOW

  25. 0the0ambient0
    February 23, 2020 at 18:01

    Great explanation

  26. Volodymyr Hlushchenko
    February 23, 2020 at 18:01

    cool, thanks

  27. Nigel Pallatt
    February 23, 2020 at 18:01

    The web page has changed! Can not follow now… never mind.

  28. Moe Diakite
    February 23, 2020 at 18:01

    great videos . thank you so much

Leave A Comment

You must be logged in to post a comment.