dom

DOM DOM - D ocument O bject M odel browser loads and “parses” the HTML and generates DOM nodes each DOM node is an object DOM consists of a hierarchy of DOM node Nodes are html tags + text nodes + comment nodes + ... others (12 node types) Element is a node of a specific element type - Node.ELEMENT_NODE comments & text nodes aren't elements Node is constructor of a node, HTMLElement is a constructor of an element in JavaScript DOM element is a subtype of a node every HTML tag is an object acc. to DOM text inside a tag is an object as well document.body - object representing the <body> tag most standard HTML attributes of element nodes automatically become properties of DOM objects DOM is a tree structure of tags, where every tree node is an object Tags are element nodes (or just elements) and form the tree structure Text inside forms text nodes and contains only a string Spaces and newlines form text nodes become a part of the DOM Browser tools do not show spaces at the start/end of the text and line-breaks between tags Developer tools shows DOM, but w/o "blanks" and text nodes are shown as a text Auto correction Spaces and newlines before <head> are ignored for historical reasons something after </body> automatically moved inside the body malformed HTML is automatically corrected when DOM is being made if <html> <body> don't exist, it will exist in the DOM browser closes tags automatically tables always have <tbody> Node types Everything in HTML, even comments, become a part of the DOM, but in practice we usually work with 4 node types document the “entry point” into DOM element nodes HTML-tags, the tree building blocks text nodes contain text comments sometimes we can put information there, it won't be shown, but JS can read it from the DOM There are 12 node types Node classes Each DOM node belongs to the corresponding built-in class The classes form a hierarchy The root of the hierarchy is EventTarget - Node - ... other DOM nodes The full set of properties and methods come as the result of inheritance EventTarget EventTarget is the root “abstract” class Objects of this class are never created, they are served as a base Node class inherits from it Node Node is also an “abstract” class, serving as a base for DOM nodes It provides the core tree functionality: parentNode, nextSibling, childNodes and so on (they are getters) Objects of Node class are never created. "Text", "Element", "Comment" inherit from it Element Element is a base class for DOM elements It provides element-level navigation like nextElementSibling, children and searching methods like getElementsByTagName, querySelector "HTMLElement" inherit from it HTMLElement HTMLElement is finally the basic class for all HTML elements It is inherited by HTML elements HTMLInputElement the class for <input> elements HTMLBodyElement the class for <body> elements HTMLAnchorElement the class for <a> elements …and so on, each tag has its own class that may provide specific properties and methods input.constructor.name // "HTMLInputElement" input instanceof HTMLElement // true input instanceof EventTarget // true console.dir(inputElem) let's console some input element with console.dir(inputElem) in DOM object tree in __proto__ we can see hierarchy 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 Object plain object methods available, like hasOwnProperty etc... elem.nodeType elem.nodeType == 1 // for element nodes elem.nodeType == 3 // for text nodes elem.nodeType == 9 // for the document object In modern scripts, we can use instanceof and other class-based tests. elem.nodeName we can read node tag name from nodeName or tagName properties nodeName is defined for any Node document.body.nodeName // BODY input.nodeName // INPUT elem.tagName The tagName property exists only for Element nodes. document.body.tagName // BODY Browser host environment - browser, web-server, or another host (even coffee machine), where JavaScript runs each host environment provides platform-specific functionality host environment provides own objects and functions additional to the language core in browser the DOM is kept in window object - root object for a web-browser browser (or other host environment) provides additional objects for working with everything except the document // window object function sayHi() { alert("Hello") } sayHi() window.sayHi() // same, function is located in window object window.innerHeight // inner window height // BOM location.href // shows current URL location.href = "https://wikipedia.org"; // redirect the browser to another URL alert/confirm/prompt/navigator/screen/location/frames/history/XMLHttpRequest