In the introduction to this series it says "HTML elements are the nodes that
make up the [Document Object Model](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)."
We've discussed the type of element nodes. In this section we discuss element APIs that enable querying those nodes.
## The DOM and AOM
The DOM is an API for accessing and manipulating documents. The DOM is the tree of all the nodes in the document.
Some nodes can have children, others can't. The tree includes elements, along with their attributes, and text nodes.
Browser tools don't provide tree visualizations like the one above, but you can see the nodes in the element inspector.
The tree representation that can be inspected in browser developer tools is the [accessibility tree](https://web.dev/learn/accessibility/aria-html#the_accessibility_tree). The AOM is based
off the DOM; similarly, the accessibility tree contains objects representing all the markup elements, attributes, and text
nodes:
## HTML Element APIs
The middle letter of DOM is "object." Just like the `person` or `car` object example from most intro to object-oriented programming
classes, every node in the document tree is an object that can be manipulated with JavaScript.
The browser provides numerous
APIs providing natively supported methods, events, and property querying and updating.
Element nodes contain information about all the attributes set on the element. You can use HTML interfaces to access
information about an element's attributes. For example, we can use [`HTMLImageElement.alt`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/alt)
get the `alt` attributes of all the images:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
HTML interfaces provide more than just access to an element's attributes; you can access a lot more information. We can
find the read-only [`HTMLElement.offsetHeight`](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetHeight) to get the height of each section in our page, relative to the layout.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
If the user changes their device orientation or otherwise changes the width of the viewport, the height of each `