From the course: Web Programming Foundations

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

The node tree: How the browser sees a web document

The node tree: How the browser sees a web document

From the course: Web Programming Foundations

Start my 1-month free trial

The node tree: How the browser sees a web document

“

- Any time a browser is asked to display an HTML document, it creates a document object model or DOM, which is a structural representation of the elements in the document and their relationships. This document object model can be visualized as a DOM tree, where each element is a leaf or node, and the connections are branches. When you add new elements to an HTML document, you are effectively adding a node to this DOM tree. When you target elements using CS or Javascript, you ask the browser to follow the branches all the way from the root to the node or nodes in question. This is called either walking or traversing or navigating the DOM. When I develop, design, and work with web documents, I often find it useful to visualize or actually draw out the dom tree or part of the tree to understand relationships and inheritants between different elements. This also encourages me to reduce complexity and avoid unnecessary nesting. This way, I'm able to keep accessibility and logical structure…

Contents