The Abyss of DOM's Foundation

// After executing the first two lines, the binding between v8 dom wrapper and c++ DOM is complete
let div = document.createElement('div');
div.innerHTML = '<p><span>foo</span></p>';
// Test the code below
div.xxx = 123;
document.body.appendChild(div);
div = null;
document.body.lastChild.xxx; // 123

1. Element.innerHTML
2. DOMParser
var parser = new DOMParser();
const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");
3. Document.createElementNS
document.createElementNS('p','endition')
->"<endition></endition>"
4. Document.createElement
5. Document.write
6. Document.createDocumentFragment
DocumentFragments are DOM Nodes. They do not become part of the main DOM tree and need to be appended to the DOM tree.
7. Document.createTextNode
Creates text nodes
...

<h2>hello world!<h2>

{

---Document Verification

Document.readyState
  - Property describing document's loading state

Document.title
  - Document title

Document.visibilityState
  - Returns document visibility, the context environment of currently visible elements. This shows whether the current document (page) is in background or hidden in invisible tabs

----

---Document Writing
Document.write()
  - document.write(markup);
  - Method writes a text string to a document stream opened by document.open()
---

--- Fullscreen Related
Document.webkitFullscreenEnabled
  - "Fullscreen enabled" property indicates whether fullscreen mode is available
Document.webkitIsFullScreen
  - Whether in fullscreen mode
Document.exitFullscreen()
  - Used to exit fullscreen mode for current document

document.fullscreenElement //Returns Element node currently in fullscreen mode in current document, returns null if not using fullscreen mode
document.fullscreenEnabled //Returns boolean indicating whether browser supports fullscreen mode
---

--- Range Objects

Document.createRange()
  - Range object (can be used for rich text cutting)
  - var range = document.createRange();
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);

Document.caretRangeFromPoint()
  - var range = document.caretRangeFromPoint(float x, float y);
  - Returns a Range object (document fragment at specified coordinates)
---

--- Creation Classes (DOM/Elements/Comments/Events)
Document.createAttribute()
  - attribute = document.createAttribute(name)
  - Creates and returns a new attribute node

Document.createElement()
  - document.createElement(tagName[, options]);
  - Creates an HTML element specified by tagName. If user agent cannot recognize tagName, generates an unknown HTML element HTMLUnknownElement

Document.createDocumentFragment()
  - let fragment = document.createDocumentFragment();
  - Creates a new empty document fragment. Document fragments exist in memory and not in DOM tree,
  - so inserting child elements into document fragments doesn't cause page reflow (calculations of element position and geometry). Therefore, using document fragments usually brings better performance
---

--- Getting Element Information

Node.nodeType  //Read-only property representing node object type
  - document.nodeType 9 (Node.DOCUMENT_NODE)

Node.previousSibling //Returns previous sibling node of current node
Element.nextElementSibling // Returns next element node among child element nodes of parent element, returns null if element is already the last element node
Element.previousElementSibling  //Returns previous element node among child element nodes of parent element, returns null if element is already the first element node
Element.classList //Read-only property representing live updated collection of class attributes - DOMTokenList
Element.className  // Gets or sets class attribute value of specified element

Element.innerHTML // Property gets or sets HTML or XML markup contained within element

Element.getBoundingClientRect()
  - Returns element size and its position relative to viewport
  - For standard box model, element size equals total of width/height + padding + border-width
  - If box-sizing: border-box, element size equals width/height

Element.querySelector()
  - baseElement.querySelector(selectors)
  - Returns first element descendant matching specified selector group

Element.querySelectorAll()
  - Returns non-live NodeList containing all non-active nodes from elements matching specified CSS selector group
  - baseElement.querySelectorAll(selectors);

Node.cloneNode()
 - var dupNode = node.cloneNode(deep{true||false}); //If true, all descendant nodes will also be cloned
  - Function returns copy of node object calling this method
Node.contains()
  - document.body.contains(node) ex. document.body.contains(document.querySelector('body') //true
  - Returns boolean indicating whether passed node is descendant node of this node

Document.getElementById()
  - document.getElementById(id);
  - Returns element matching specific ID

Document.getElementsByClassName()
  - document.getElementsByClassName(names);
  - Returns array-like object containing all child elements with specified class names

Document.getElementsByName()
  - document.getElementsByName(name)
  - Returns node list collection in (X)HTML document

Document.getElementsByTagName()
  - document.getElementsByTagName(name);
  - Returns HTMLCollection containing all elements with given tag name

Element.getAttribute()
  - align = div1.getAttribute("align");
  - Function returns attribute of web element. If attribute doesn't exist, return value will be null or "" (empty string)
Element.getAttributeNS()
  - Namespaces only supported in XML documents
  - Returns string value of attribute with specified namespace and name. If named attribute doesn't exist, return value will be null or "" (empty string)
Element.getAttributeNames()
  - let attributeNames = element.getAttributeNames();
  - Returns Array containing all attribute names of specified Element, returns empty array if element contains no attributes

Element.hasAttribute()
  - element.hasAttribute(attName);
  - Returns boolean indicating whether element contains specified attribute

---

--- Setting Elements

Element.attributes //Turns all attributes in specific node into collection and returns it // NamedNodeMap is not an array. attributes is key/value pairing

Element.toggleAttribute()
  - Element.toggleAttribute(name [, force]);
  - Toggles boolean attribute state of given element (adds attribute if doesn't exist, removes if exists)

Element.setAttribute()
  - element.setAttribute(name, value);
  - Sets attribute value on specified element. If attribute already exists, updates the value

Element.before()
  - child.before(span);
  - Method can insert series of Node or DOMString objects in parent node of this ChildNode,
  - position is before ChildNode, DOMString objects are inserted like Text nodes

Element.after()
  - after(... nodes)
  - Method inserts Node or DOMString objects in parent node's child node list. Insert position is after this node. DOMString objects are inserted as Text

Element.append()
  - parent.append(p);
  - Inserts set of Node objects or DOMString objects after last child node of Element
  - No return value, Node.appendChild() returns appended object

Element.prepend()
  - Element.prepend((Node or DOMString)... nodes);
  - Inserts series of Node objects or DOMString objects before first child node of parent node

Element.insertAdjacentElement()
  - element.insertAdjacentElement(position, element);
  - activeElem.insertAdjacentElement('afterend',div)
  - Inserts given element node at given position relative to called element
  'beforebegin': Before the element itself
  'afterbegin': Inside the element, before its first child
  'beforeend': Inside the element, after its last child
  'afterend': After the element itself

Element.insertAdjacentHTML()
  - insertAdjacentHTML() parses passed string as HTML or XML and inserts that node at specified position in DOM tree
  - It doesn't reparse used element, so doesn't destroy existing elements inside
  - element.insertAdjacentHTML(position, text);
  - position like top
  - d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

Element.insertAdjacentText()
  - Inserts given text node at given position relative to called element
  - element.insertAdjacentText(position, element);
  - position like top
  - para.insertAdjacentText('afterbegin',textInput.value);

Element.replaceChildren()
  - Element.replaceChildren(...nodesOrDOMStrings)
  - Replaces Node descendants with specified descendant collection. New descendants can be DOMString or Node objects

Element.replaceWith()
  - child.replaceWith(span);
  - Node object or DOMString object replaces child node under this node's parent

----

---Removal

Node.removeChild()
  - node.removeChild(child);
  - Removes child node from DOM and returns removed node. Can delete DOM mapping bound by v8binding, immediately unusable and irreversible

Node.replaceChild()
  - parentNode.replaceChild(newChild, oldChild);
  - Replaces child node of current node with specified node and returns replaced node
  - Can explore whether DOM binding still exists?

Element.remove()
  - node.remove();
  - Removes object from DOM tree it belongs to

Element.removeAttribute()
  - element.removeAttribute(attrName);
  - Removes attribute from specified element

----

location object's position (URL), contains URL-related information of document and provides methods to change that URL and load other URLs
----
  document.location
  document.location === window.location interface locations are equal
  document.location.href //entire url
  document.location.host //returns domain name (including port) 192.168.31.121:8080
  document.location.search  //returns URL parameters including (?)
  document.location.hash   // returns identifier URL parameters including (#)
  document.location.reload // fn reloads page resources
  document.location.replace // fn navigates to given URL, no history record
---

Settable Function Types
---
document.designMode // Controls whether entire document is editable = "on" || "off"
document.dir // Document text direction = 'ltr' || 'rtl'
---

}