Traversing the DOM with JavaScript

Using the Node and Element properties you can search through a web page to find specific elements and their contents.
Remember that all the Nodes have parent-child relationships to each other. Only Element nodes can be parents. However, depending on the property that you use you can get lists of Elements or lists that include element nodes, text nodes, and comment nodes.

[@AndrewKwabula]

I searched, "Traversing the Dom" and looked at which one is done by Steve Griffith. Very clear explanation in a very very chilled voice.

[@akshy471]

veery erotic voice

[@ga7853]

I can listen to you hours and hours without an itch, unbelievable way of explaining, you have made for this.

[@rotrose7531]

Thank you very much, I begin to worry that once I learned all your tutorials, what should I do then. I do not want to lose the motivation I gained from your tutorials.

[@SteveGriffith-Prof3ssorSt3v3]

Build something. Start simple and add more and more features. You will learn by doing.
And I will always have more tutorials.

[@rotrose7531]

@@SteveGriffith-Prof3ssorSt3v3 Thank you. I will resume many botched projects after finishing all the tutorials here. Enpowered with your knowlwdge, now feel fit to pick them up again. Thank you.

[@fuzzl277]

You should upload more of these tutorials, you are amazing at explaining something. Thanks a lot.

[@SteveGriffith-Prof3ssorSt3v3]

FuZzL thanks. Be sure to subscribe. I upload new ones every week.

[@funkybuddha1598]

You have a gift of teaching, you would make one of the top instructors in udemy!!

[@groovysalmon6857]

Finally, The Bob Ross voice of JavaScript!

[@SteveGriffith-Prof3ssorSt3v3]

Now, everyone make a happy little function.

[@deyanshotev3137]

Really appreciate your summary down below the video. Also the content value is incredible

[@gyros9162]

Excellent films !

[@1966fong]

clear and helpful.thanks

[@jesusrivas5812]

Sound like Tony Stark of RDJ, Great Video, Thanks a lot!

[@ElTopDev]

2023 still usefull!!

[@Isra1289]

Thank you!!! Very well explained, helped me a lot!!!

[@jonathanwarner2420]

Great stuff, mate. Keep on going!

[@tinpham6413]

2:48 after the open tag isn't it have 1 character return. I nearly understand about note count, just a little confuse

[@SteveGriffith-Prof3ssorSt3v3]

This should help - ruclips.net/video/k0OpqA87wEo/видео.html

[@JohnDoe-sz5jh]

Thank you for your videos Steve. I am trying to append to the text in my links onmouseover and revert onmousout. I am not figure it out or find the information in the documentation.

[@SteveGriffith-Prof3ssorSt3v3]

You would use addEventListener with mouseover and mouseout and then change the textContent property value or maybe create a span with the text which can be appended and removed with appendChild and removeChild.

[@JohnDoe-sz5jh]

@@SteveGriffith-Prof3ssorSt3v3 thanks man. I do try that. I need to go back and watch JavaScript from the Start playlist to completion as well. I broke away from that to look at this one, as it appertains directly what I'm trying to do.

[@SteveGriffith-Prof3ssorSt3v3]

@@JohnDoe-sz5jh I have a playlist about JavaScript in the browser and another one about Events which would probably be better for things like this.

[@JohnDoe-sz5jh]

@@SteveGriffith-Prof3ssorSt3v3 Yeah. I'll check them out. I'm putting your examples in in a practice.js file and heavily commenting for reference. I need t get a better understanding of core JavaScript, I think, before I proceed. I have no programming foreknowledge. I'm very recently looking into it.

[@SteveGriffith-Prof3ssorSt3v3]

@@JohnDoe-sz5jh good luck!

[@scarface9362]

Hi @steve griffith
// node.parentNode
i want to display element ul
console.log( firstLi.lis )
I tried the above but it resulted as : undefined
please help

[@SteveGriffith-Prof3ssorSt3v3]

lis is an array of all the list items, not the parent ul element.
firstLi.parentNode or firstLi.parentElement will work.

[@scarface9362]

@@SteveGriffith-Prof3ssorSt3v3 Thanks steve i was thinking in a wrong direction . u r correction helped me

[@jocelines5578]

9:20 Can you please me understand why firstLi.firstChild.nodeValue.toUpperCase(); does not work?

[@SteveGriffith-Prof3ssorSt3v3]

toUppercase( ) returns the uppercase value version of the string. It doesn't change the one in the DOM. You have to assign it. The spelling and capitalization of the method also matter.

[@jocelines5578]

​@@SteveGriffith-Prof3ssorSt3v3 Got it now! Thanks for clarifying these 2 points. BTW, I like your teaching style. I am learning so much from going thru your playlist! THANK YOU for your quality work!

[@webstuff56]

Nice tutorial; thank you!

[@SteveGriffith-Prof3ssorSt3v3]

Thanks!

[@iwswordpress]

Very useful :)

[@emotheremail6667]

Can you be more specific about the childrenNodes i.e character turn? Like could you highlight with your mouse where they are? I’m a visual learner who needs to see things actually pointed out not just talked about or breezed past. I can’t learn if not shown.

[@SteveGriffith-Prof3ssorSt3v3]

Everything except the html element is a child node. If you take any HTML element, say and put something inside it (another tag OR some text) then you just created a new child node.
Hello - Hello is the child node
- is the child node

[@shinajkurup]

9:18 didn't get converted to uppercase. Console.log should be at the end of code.

[@SteveGriffith-Prof3ssorSt3v3]

It was converted to uppercase on the webpage, in the list item, not in the console.log.

[@yarik83men51]

+++