Document Object Model
Using JS to modify a website
https://scrimba.com/learn-javascript-c0v/~0g?via=mdn
- The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the
Documentobject. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.
From Mozilla
The document currently loaded in each one of your browser tabs is represented by a DOM. This is a “tree structure” representation created by the browser that
HTML is the blueprint (like class in Java) and DOM is like living (instance of class). Note that JS does not have any compile time blueprint
DOM
DOM is a tree structure, which represents document currently loaded in browser tab
- Enables the HTML structure to be easily accessed by programming languages for example,
- the browser itself uses it to apply styling and other information to the correct elements as it renders a page
- and developers, who can manipulate the DOM with JavaScript after the page has been rendered.
Document Interface Live Dom Viewer
Node
Each entry in the tree is called a node.
Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Most notable are Document, Element, and DocumentFragment.
In addition, every kind of DOM node is represented by an interface based on Node. These include Attr, CharacterData (which Text, Comment, CDATASection and ProcessingInstruction are all based on), and DocumentType.
Some nodes represent elements (identified as HTML, HEAD, META and so on) and others represent text (identified as #text). There are other types of nodes as well, defined through their nodeType property.
| Name | Value |
|---|---|
ELEMENT_NODE | 1 |
ATTRIBUTE_NODE | 2 |
TEXT_NODE | 3 |
CDATA_SECTION_NODE | 4 |
PROCESSING_INSTRUCTION_NODE | 7 |
COMMENT_NODE | 8 |
DOCUMENT_NODE | 9 |
DOCUMENT_TYPE_NODE | 10 |
DOCUMENT_FRAGMENT_NODE | 11 |
Q
- who is creating instance of Document interface here ?
- what is selector, and combinator