 |
VOOZH | about |
|
VOOZH | about |
In Understanding the DOM Tree and Nodes, we went over how the DOM is structured as a tree of objects called nodes, and that nodes can be text, comments, or elements. Usually when we access content in the DOM, it will be through an HTML element node.
In order to be confident in accessing elements in the DOM, it’s good to have a working knowledge of CSS selectors, syntax and terminology as well as an understanding of HTML elements. In this tutorial, you will learn several ways to access elements in the DOM: by ID, class, tag, and query selectors.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
The Document Object Model, usually referred to as the DOM, is an essential part of making websites interactive. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.
Browse Series: 8 tutorials
Software engineer and open source creator
Community and Developer Education expert. Former Senior Manager, Community at DigitalOcean. Focused on topics including Ubuntu 22.04, Ubuntu 20.04, Python, Django, and more.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Great explanation Tania on how to access to DOM elements, I have understood the array idea behind these types of objects in Javascript. Thanks to you, I will be able to automate a web page data introduction via Internet Explorer and PowerShell.
Hi Tania, I too thought it was a great tutorial – all of them are so far. Really helpful. There is one thing, though, that I think could be improved. When you are processing elements that were accessed using .getElementsByClassName, or .getElementsByTagName, you handle the returned variable with a for loop, but when you are processing elements that were accessed using .querySelectorAll you handle the returned variable with the .forEach method. I think it would have been good to have some explanation for why – which, if I understand correctly, is because the “getElementsBy…()” methods return “HTMLCollection” objects, which cannot be processed with .forEach like arrays, while the querySelectorAll() method returns “NodeList” objects, which, in modern browsers, CAN be processed with .forEach like arrays. I think a little explanation about that would have been helpful.
Thanks, really helped me out. Great tutorial and easy to follow
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
