👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!
The JavaScript Document Object Model (DOM) is a representation of the HTML elements of a web page. It is an interface that we can use to manipulate a web page by modifying its content or style.
We can access the DOM by right clicking on a web page and selecting " inspect ". This way, a section (right or left) should appear with the HTML elements of the web page you are on. By hovering the mouse over these elements, you can find out which sections of the page are represented by them when the sections of the page are highlighted.
We can manipulate the content or the style of the pages by coding in the console.
The DOM itself is a tree-like data structure with nested parent and child elements. Items without children are called " leaves ‚". When you inspect a page, you can see that our main node element of our tree is the document, then our html tag, then our head tag, which contains the scripts and our title, which branch out into a single tree. We can also see our body tag, which is separate from the head tag and branches into a different tree that carries a different element. Below is an example of the elements used to represent the Python.Engineering home page.
Note that the right part of the homepage is highlighted when hovering over a particular div element which is a child of the body tag . In this article, we discuss ways to select elements in the DOM for future manipulation.
Selecting elements in the DOM
There are two ways to select elements in the DOM. One uses getElements methods, the other uses querySelector methods.
