JavaScript - Document
Element-only Navigation
Manipulate element nodes that represent tags and form the structure of the page. Text or comment nodes not included. Example: - children - firstElementChild - lastElementChild - previousElementSibling - nextElementSibling - parentElement
Host Environment
Provides own objects and functions additional to the core language. Examples are web browsers and servers.
Document Object Model (DOM)
Represents all page content as objects that can be modified. Describes the document structure, manipulations and events.
elem.querySelectorAll(css)
Returns all elements inside elem matching the given CSS selector.
elem.querySelector(css)
Returns the first element for the given CSS selector.
Node Navigation
Set of properties that help in navigation: - parentNode - childNodes - firstChild - lastChild - previousSibling - nextSibling
text nodes
The text inside elements. It contains only a string. It may not have children and is always a leaf of the tree.
outerHTML
contains the full HTML of the element. That's like innerHTML plus the element itself.
navigator object
provides background information about the browser and the OS. Its most widely known properties are navigator.userAgent and navigator.platform
nodeType
provides one more, "old-fashioned" way to get the "type" of a DOM node.
Browser Object Model (BOM)
represents additional objects provided by the browser (host environment) for working with everything except the document.
console.log(elem)
shows the element DOM tree
console.dir(elem)
shows the element as a DOM object, good to explore its properties
HTMLAnchorElement
the class for <a> elements
HTMLBodyElement
the class for <body> elements
HTMLInputElement
the class for <input> elements
Siblings
Are nodes that are children of the same parent.
elem.closest(css)
Looks the nearest ancestor that matches the CSS-selector.
Important Reminders for DOM Collection:
- We can use for..of to iterate over it - Array methods won't work, because it's not an array - Are read-only - Are live - reflect the current state of DOM - Don't use for..in to loop over collections
The Topmost Tree Nodes
- document.documentElement - document.body - document.head
Types of nodes that is often used
1. document 2. element nodes 3. text nodes 4. comments
Collection
A special array-like iterable object.
Descendants
All elements that are nested in the given one, including children, their children and so on.
Styles (Chrome Developer Tools)
Allows us to see CSS applied to the current element rule by rule, including built-in rules. Almost everything can be edited in-place, including the dimensions/margins/padding
Array.from()
Create a "real" array from the collection, if we want array methods.
elem.matches(css)
Does not look for anything, it merely checks if elem matches the given CSS-selector. It returns true or false.
Child/Children Nodes
Elements that are nested exactly in the selected node.
Ancestors
Form the chain of parents from the element to the top.
document.getElementById(id)
Get the element with an id attribute no matter where it is.
childNodes
Is a collection that lists all child nodes, including text nodes.
document object
Is the main entry point to the page. Allows for us to change or create anything on the page using it.
Window
The "root" object. It is a global object for JavaScript code and it represents the "browser window" and provides method to control it.
Computed (Chrome Developer Tools)
To see CSS applied to the element by property
Event Listeners (Chrome Developer Tools)
To see event listeners attached to DOM elements
navigator.userAgent
about the current browser
navigator.platform
about the platform (windows/linux/mac)
innerHTML
allows to get the HTML inside the element as a string.
Node
an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality.Objects of Node class are never created. But there are concrete node classes that inherit from it, namely: text, element and comment nodes.
element nodes
are HTML tags and form the tree structure. html is the root, then head and body are its children.
Autocorrection
if the browser encounters malformed HTML, it automatically corrects it when making the DOM
Element
is a base class for DOM elements. It provides element-level navigation and searching methods. The Element class serves as a base for more specific classes: SVGElement, XMLElement and HTMLElement.
HTMLElement
is finally the basic class for all HTML elements. It is inherited by concrete HTML elements.
EventTarget
is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events".