Browser, Document, DOM
-
The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
-
Every HTML tag is an object. Tags are the core of an HTML document.
-
Everything in HTML, even comments, becomes a part of the DOM.
-
The
elem.matches(css)
does not look for anything, it merely checks if elem matches the given CSS-selector. It returns true or false. -
The method
elem.closest(css)
looks for the nearest ancestor that matches the CSS-selector. The elem itself is also included in the search. -
Methods containing
getElementsBy
return a live collection, meaning they always reflect the current state of the document, and updates automatically when changes happen. -
The root of the DOM node's hierachy is EventTarget, which is an object that represents a target to which an event can be triggered whenever something has happened.
-
Get more information of a Node: nodeType, nodeName, tagName, outerHTML, nodeValue, data, textContent.
-
We can create more properties on the DOM, and not only have to use the existing ones.
-
Use
dataset
to setdata-*
attributes progrmatically, i.e. good for ids when looping and returning items. -
Creating an element: createElement, createTextNode.
-
Clone node via cloneNode.
-
DocumentFragment is a special DOM node to be used as a wrapper around lists of nodes. When outputted on the DOM, it sort of "blends in", rather used programatically to group items, and insert them onto the DOM as a group.
-
Use getComputedStyle to get an object which contains the resolved values, styles, of a node/element.