

They are document.querySelector and document.querySelectorAll. By CSS SelectorĪ couple of new methods are available in modern browsers that make selecting elements easier by allowing the use of CSS selectors. By Class Nameĭocument.getElementsB圜lassName returns the same kind of NodeList as getElementsByTagName, except that you pass a class name to be matched, not a tag name.

It’s provided by the browser and allows code on the page to interact with the content.ĭocument.getElementsByTagName works in much the same way as getElementById, except that it takes a tag name ( a, ul, li, etc) instead of an ID and returns a NodeList, which is essentially an array of the DOM Elements.

To access the DOM from JavaScript, the document object is used. Modifying the DOM, by picking an element and changing something about it, is something done often in JavaScript. For this reason, the DOM is also called the DOM tree. There is one root element ( html) with branches like head and body, each with their own branches. HTML is an XML-like structure in that the elements form a structure of parents’ nodes with children, like the branches of a tree. It’s a great insight into how the browser thinks, and in most browsers you can remove and modify elements directly. If you’d like to have a look at the DOM for a page, open up the developer tools in your browser and look for the “elements” pane. It represents the internals of the page as the browser sees it, and allows the developer to alter it with JavaScript. The Document Object Model is a way to manipulate the structure and style of an HTML page.
