Browser Env Flashcards
DOM
The Document Object Model, or DOM for short, represents all page content as objects that can be modified.
The document object is the main “entry point” to the page. We can change or create anything on the page using it.
BOM
The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
Examples objects
location-The location object allows us to read the current URL and can redirect the browser to a new one.
navigator - navigator.userAgent – about the current browser, and navigator.platform – about the platform
screen
frames
history
XMLHttpRequest
The functions alert/confirm/prompt are also a part of the BOM: they are not directly related to the document, but represent pure browser methods for communicating with the user.
DOM Tree
An HTML/XML document is represented inside the browser as the DOM tree.
Tags become element nodes and form the structure.
Text becomes text nodes.
Walking the DOM
The topmost tree nodes are available directly as document properties:
<html> = document.documentElement
<body> = document.body
<head> = document.head
</head></body></html>
Child Node and Descendant Nodes
Child nodes (or children) – elements that are direct children. I
Descendants – all elements that are nested in the given one, including children, their children and so on.
document.body.childNodes.length
The childNodes collection lists all child nodes, including text nodes.
firstChild and lastChild give fast access to the first and last children.
elem.childNodes[0] === elem.firstChild
There’s also a special function elem.hasChildNodes() to check whether there are any child nodes.
DOM Collections
As we can see, childNodes looks like an array. But actually it’s not an array, but rather a collection
We can use for..of to iterate over it:
DOM collections are read-only
DOM collections are read-only. DOM collections, and even more – all navigation properties listed in this chapter are read-only.
We can’t replace a child by something else by assigning childNodes[i] = ….
Changing DOM needs other methods.
DOM collections are live
Almost all DOM collections with minor exceptions are live. In other words, they reflect the current state of DOM. If we keep a reference to elem.childNodes, and add/remove nodes into DOM, then they appear in the collection automatically.
Siblings and the parent
document.head.nextSibling
document.body.previousSibling
document.body.parentNode
Element Only Navigation
Navigation properties listed above refer to all nodes. For instance, in childNodes we can see both text nodes, element nodes, and even comment nodes if they exist.
But for many tasks we don’t want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page.
The links are similar to those given above, just with Element word inside:
children – only those children that are element nodes.
firstElementChild, lastElementChild – first and last element children.
previousElementSibling, nextElementSibling – neighbor elements.
parentElement – parent element.
Searching Elements - document.getElementById(id)
DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
If an element has the id attribute, we can get the element using the method document.getElementById(id), no matter where it is.
The id must be unique. There can be only one element in the document with the given id.
querySelectorAll
By far, the most versatile method, elem.querySelectorAll(css) returns all elements inside elem matching the given CSS selector.
let elements = document.querySelectorAll(‘ul > li:last-child’);
This method is indeed powerful, because any CSS selector can be used.
querySelector
The call to elem.querySelector(css) returns the first element for the given CSS selector.
matches
The elem.matches(css) does not look for anything, it merely checks if elem matches the given CSS-selector. It returns true or false.
closest
The method elem.closest(css) looks for the nearest ancestor that matches the CSS-selector. The elem itself is also included in the search.
Parent Child Relation check
elemA.contains(elemB) returns true if elemB is inside elemA (a descendant of elemA) or when elemA==elemB.
DOM node classes
https://javascript.info/basic-dom-node-properties
The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it.
DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance.
For example, let’s consider the DOM object for an <input></input> element. It belongs to HTMLInputElement class.
It gets properties and methods as a superposition of (listed in inheritance order):
HTMLInputElement – this class provides input-specific properties,
HTMLElement – it provides common HTML element methods (and getters/setters),
Element – provides generic element methods,
Node – provides common DOM node properties,
EventTarget – gives the support for events (to be covered),
DOM node class name
An object usually has the constructor property. It references the class constructor, and constructor.name is its name
alert( document.body.constructor.name ); // HTMLBodyElement
Node Properties
The innerHTML property allows to get the HTML inside the element as a string.
document.body.innerHTML – returns all the HTML inside body
The outerHTML property contains the full HTML of the element. That’s like innerHTML plus the element itself.
The innerHTML property is only valid for element nodes.
let text = document.body.firstChild;
alert(text.data); // Hello
The textContent provides access to the text inside the element: only text, minus all <tags>.
hidden
When set to true, does the same as CSS display:none</tags>
DOM Props
DOM nodes also have other properties depending on their class. For instance, <input></input> elements (HTMLInputElement) support value, type, while <a> elements (HTMLAnchorElement) support href etc.Most standard HTML attributes have a corresponding DOM property.</a>
DOM Parsing and Object Creation
When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects from it
For instance, if the tag is <body id="page">, then the DOM object has body.id=”page”.
DOM nodes are regular JavaScript objects. We can alter them.
For instance, let’s create a new property in document.body:
document.body.myData = {
name: ‘Caesar’,
title: ‘Imperator’
};
alert(document.body.myData.title); // Imperator
Other ways to access attribute values
elem.hasAttribute(name) – checks for existence.
elem.getAttribute(name) – gets the value.
elem.setAttribute(name, value) – sets the value.
elem.removeAttribute(name) – removes the attribute.
Custom Attributes
What if we use a non-standard attribute for our purposes and later the standard introduces it and makes it do something? The HTML language is alive, it grows, and more attributes appear to suit the needs of developers. There may be unexpected effects in such case.
To avoid conflicts, there exist data-* attributes.
All attributes starting with “data-” are reserved for programmers’ use. They are available in the dataset property.
For instance, if an elem has an attribute named “data-about”, it’s available as elem.dataset.about.
Multiword attributes like data-order-state become camel-cased: dataset.orderState.
Modifying document
DOM Modification is key to creating Live pages
let div = document.createElement(‘div’);
div.innerHTML = “<strong>Hi there!</strong> You’ve read an important message.”;
document.body.append(div), other methods are there prepend, before, after, replaceWith
Other ways to insert HTML
div.insertAdjacentHTML(‘beforebegin’, ‘<p>Hello</p>’);
<p>Hello</p>
<div></div>
Node removal
using elem.remove()
Change positions elem.after(anotherelem)
Clone Node
The call elem.cloneNode(true) creates a “deep” clone of the element – with all attributes and subelements. If we call elem.cloneNode(false), then the clone is made without child elements.
