The DOM Tree

The Document Object Model (DOM) is an interface that treats an HTML document as a tree-like structure each node contains an object that represents a part of the document. Each branch of the DOM tree ends with an element node. Some methods allow programmatic access to the tree, with these methods you can change the structure, style, and content of a document. The node elements can have event handlers attached to them, once the event fires off, the event handlers automatically get executed.

This is an example —

A DOM starts at but what’s visible to the DOM starts from what’s in between the element. Anything that is within the<body> element is considered subtrees.

And the tree for the example above will look something like this —

You can find and select an HTML element on the rendered page

When creating an HTML for a page on your application, its very useful to use metadata for a node element. Metadata is a class or id — the attribute makes it easier to find the node. If you make the metadata specific its more helpful to find the desired element.

The methods to find an element —

document.getElementsByClassName()

This method is used more commonly in DOM programming. This method finds the elements by the class name.

document.getElementById()

This method finds elements by its ID. All ID’s are expected to be unique.

You can try out these methods by opening up your DevTools and find the elements by its id or class name by typing the following in —

document.getElementById(‘the ID’)

You can see a full list of methods here.

Conclusion

Knowing how to navigate any DOM tree makes it easy to find node elements and manipulate them in JavaScript.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript | Longest Substring Without Repeating Characters | Interview Question | Data Structure

Calculating the Exponential Moving Average in JavaScript

Before starting your React Native project

CKeditor- ExportPDF

Lesson 10: JS Event Listeners

Inside React.JS | Virtual DOM

Installing packages from private npm registry with GitHub Actions

React.js: Summary on React Hooks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Natalia Wit

Natalia Wit

More from Medium

Functions of the Press/The Post Reflection

Journey with STM32 Nucleo Board: 1. Blinking a LED using the C program

Local Storage and Session Storage (JavaScript)

Rest and Spread in JavaScript