Traversing the Dom - what's the point?

I have watched a few tutorials on how to traverse the DOM, getting elements by ID and manipulating them etc. but I can’t find any context or real use case examples.
Why would I write a page of Javascript to change HTML and CSS when I can change the code manually? Can someone please give me a practical reason for using DOM traversal techniques in Javascript?
Any help appreciated.

1 Like

Example: delete a table row on button click (e.g. when there are form elements inside you don’t want in the final form)

$(document).on('click', 'table button.delete', function (evt) {
    $(this).closest('tr').remove();
});
1 Like

If you are unable to think of any practical use, then
you most probably don’t need to use JavaScript at all.

HTML is not dynamic, JavaScript is only required when,
for some reason, you require dynamic HTML. :winky:

coothead

1 Like

I can’t believe you can’t think of examples. Have you used the internet lately? You just wrote that post, it used a lot of DOM manipulation to insert the post, showing notifications in the top corner.
Inserting/deleting elements. Submitting forms. Popover windows or modal windows.
Opening/closing a menu or accordion or inner page tabs that expand and contract.
Clicking something in one part of the page that effects some other part of the page to hide or change it.
Showing form validation errors to make text appear and disappear.

Obviously one of the biggest reasons to select DOM elements is to hide or show them, but also insert completely new elements that weren’t there before, or completely delete elements.

1 Like

Traversing the DOM is hugely important whenever you need to make your site interactive and dynamic or when you need stylized form elements.

If it’s just an informational site or a site that doesn’t require user input (ex, blogs) then JavaScript isn’t needed and is just flourish.

2 Likes

Cheers guys! Yes, I want to advance my knowledge of programming.
So, I include a script tag just above the closing body tag? or add a link tag in the <head>?
Would it be fair to say that, among other things, Javascript DOM traversal > element targeting would help in deciphering and editing another developer’s code?

So, I include a script tag just above the closing body tag? or add a link tag in the ?

Just before the </body> is the best place. You should only have it in the head if you have a very specific use case for it being there.

3 Likes

Don’t spend too much time on that.
Typically you’re either going to see jQuery used and notice a lot of code like $(".someclass").func(...) or you’ll see functions called like getElementsByTagName() and other getSomethingBySomething functions.
All those are grabbing something in the DOM for some nefarious purpose or another.

1 Like

Zack, I don’t get what you mean by ‘nefarious’ in this context.

A story caught my eye last night about the newly released StackBlitz editor/IDE and it reminded me of this thread.

StackBlitz is an online code editor that allows you to write code from within your browser and preview it live as you edit. It also includes some very clever features like code auto-completion, which you’d usually only find in desktop software. It’s a perfect demonstration of how web technologies (HTML/CSS/JavaScript) can be used to write full-blown applications that run online from within a web browser - and a great example of what manipulating the DOM via JS can achieve.

2 Likes

If you don’t know the point of doing it then there are millions of other things to pursue. It seems foolish to spend time on something you have no idea how to use.

Note that I wrote Introduction to Web Site Scraping. I don’t suggest you get bibliographic data that way but there are many web sites that people do need to get information from that don’t provide more direct ways to obtain the information. Search the internet for “airfare comparison website”. Airlines don’t want to make it easy to do that. Many other websites don’t want to make it easy to download pictures and/or videos.

Perhaps you are confused about what others are saying about traversing the DOM. Are you sure they are suggesting you do it for the same page that the JavaScript is in? If that truly is what is suggested then ignore the suggestion until you have a use for it.

How does that relate to the original question - not sure I’m seeing a connection.

1 Like

Didn’t mean anything by it, just being goofy with language.

“Web Site Scraping” and “Traversing the DOM” are the same thing. My article uses C# and does not execute in a web page but otherwise it is what the question is asking about. The question is asking for possible uses of Traversing the DOM so I answered the question with an article I already wrote. The article at least provides a foundation for my statement that I have done that type of thing for many purposes.

It sure seems relevant to me. I am having difficulty understanding why you don’t see a connection. If I could understand better then I could provide a better explanation of how the article is relevant.

Perhaps the problem is that the article is in a competing web site and if so then that makes me reluctant to submit articles here.

This is wrong. They are entirely different things.

Transversing means to move though nodes of a Tree. The DOM is an example of a tree.

Web Scraping is the act of processing someone else’s web page to get data. You would probably “Transverse the DOM” while Web Scraping, but you could also just as easily use a Regex to pull out specific data or some other method.

2 Likes

This is wrong. Whether the DOM being traversed is in the same page or not, the DOM is traversed when the same API is used for both. That is the critical issue; the original question says “getting elements by ID” and that, along with other related things, are done in both solutions discussed here. The API functions used are the same. The original question does not say whether or not it is the same page. If that is what was intended then it should have said so; I responded to the question as it existed. The question asked for possible uses and I responded to that question.

I see you added to your response so I will respond to the addition. No one has said anything about using Regular Expressions. I highly recommend against using Regular Expressions for HTML and I hope that the article I wrote helps others to avoid use of Regular Expressions.

I never said you should, only that they are not the same thing and saying that they are is misleading. It’s like saying “driving” and “a car” are the same thing.

Using a regex was just the first thing that popped in my head as an example of an alternative.

1 Like

I have tried to understand what you are trying to say here but I don’t understand.

Too many people are quick to use regular expressions to parse HTML.

I have tried to understand what you are trying to say here but I don’t understand.

I gave an analogy that describes what I meant.

It’s like saying “driving” and “a car” are the same thing.

You could push a car or pull it by horse. Neither are advisable if the car is running, but that doesn’t mean “driving” is the same thing as “a car”.

Hey, here is the biggest benefit of DOM in JavaScript. I have used DOM to perform the multiplication & addition and showing it instantly in the total text box while developing a billing software. I needed to use it without loading the whole page and send the total value to the server after showing amount to the customer! It was possible because of the DOM service from JavaScript.