A data structure that appears in the everyday life of a web developer After graduating from the Grace Hopper Program last February, I accepted a Teaching Fellow position for the next cohort. My students often ask me how data structures relate to their lives as programmers, besides knowing how to ace white-boarding problems for job interviews. As someone who did not take CS course in college, I also struggled with data structures at first, but became fascinated once I realized that much of the underlying structure of software, including the browser, depends on them. The first practice we had with trees as students was creating a , along with insertion, traversal, and search methods. Binary Tree As we began to explore the browser, we learned how the browser’s render engine processes an HTML document and creates two trees: The (Document Object Model), a tree representing HTML element and attribute nodes, and a tree (CSS Object Model) of styles. DOM tree CSSOM CSS These two trees are then combined into a which contains the nodes and the styles needed to display DOM content on the page. render tree What is so fascinating about these trees is that, just like BSTs, they are often traversed For example, the CSSOM tree is recursively traversed. The browser processes the child nodes of the CSSOM tree first, because those specific style rules ultimately take precedence in the layout of the page. That means that as long as a node has children, a traversal function will continue to be called. Being able to show my students both use cases for trees AND recursion is really awesome! recursively. Finally, the tree and CSSOM tree are combined to form one last tree, the render tree! DOM Pretty cool, right? Here’s a super from Google’s Developer docs to learn more! helpful resource
![10 Best Object-Oriented Online Programming and Design Courses 2020 [Updated]](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMQzhgEvAeOXyPo3IjFRz4IZU3K83-r85m3uu7.jpeg?alt=media&token=52050782-8c47-4a38-85af-94636f190ad2&auto=format&fit=max&w=3840)
