DOM

We know that JavaScript is composed of ECMAScript + DOM + BOM. ECMAScript is some syntax in JS, and BOM is mainly a collection of related knowledge about the browser object (window) object. The DOM is a collection of knowledge related to document objects.

We know that the interaction between HTML and JS is achieved through events. The DOM is an API for HTML (XML) documents. Therefore, if we want to interact with the user, we need to use the API provided by the DOM to obtain the HTML element, and then bind the corresponding event to the element to interact with the user. Therefore, understanding and mastering DOM is very important.

This article is mainly based on the DOM-related chapters in "JavaScript Advanced Programming (3)" to sort out the main knowledge of DOM and intersperse some of my personal understanding.

Node level

Everyone who has written HTML code should know that we need to add indentation to each element, then write the relevant HTMl tags and content, and finally display it on the web page . So this nested HTML code and content constitutes the node hierarchy.

Everyone who understands ECMAScript should know that every object in JS is created based on a reference type, and the reference type can be the reference type provided natively by JS (Array, Function, RegExp, Object etc.), or it can be a custom reference type (the reference type is called through the new keyword (it can also be called a constructor)). All objects are instance objects of Object and can inherit the properties and methods on Object.prototype

And in the DOM, there is also a similar mechanism. In the DOM, the top-level type is the Node type, and all other nodes can inherit the properties and methods of the Node type. The Node type is actually equivalent to the Object constructor in JS.

In this case, let’s take a look at the properties and methods under the Node type

Node type

Attributes (in a certain A specific node calls the following properties through inheritance)

nodeType
nodeName
nodeValue
··············
##childNodes (pointer, pointing to the NodeList object )
parentNodes
nextSibling

Method (Call the following method through inheritance on a specific node)

##························
··· Delete node···
removeChild(ele)
···· ··················
··· Replace node···
replaceChild(ele, target)
##························
···Copy node···
cloneNode(boolean) true: means deep copy, false: means shallow copy
·······················
##··· Processing document nodes··· Rarely used ~
normalize()
There are only so many properties and methods on the Node type. Let me repeat it again, all of them Other nodes can inherit the properties and methods on the Node type

JS represents documents through the Document type. The document object is an instance of HTMLDocument and represents the entire HTML page. At the same time, the document object is also a property under the window object, so it can be accessed as a global object.

Attribute

document.documentElement (representing HTML element), and the HTML element can be obtained through document.childNodes[1]

document.body (indicating the body element)
document.head (indicating the head element)
document.compatMode (indicates which rendering method the browser uses, 'CSS1Compat' means standard mode, 'BackCompat' means mixed mode)
document.charset (indicates the actual rendering method used in the document Character set, can also be used to specify a new character set)
document.dataset (indicates accessing custom properties through dataset, such as document.dataset.myname)
document.docType (represents the element), there is a browser compatibility issue
document.title (represents the < title > element)
··· Web page request···
document.attributes (Get the attributes of a node and return a NamedNodeMap object, similar to NodeList)

Method

··· Find the element···
##document.getElementById(id) Returns the element
document.getElementsByTagName(classname) returns an HTMLCollection object containing zero or more elements, similar to a NodeList object
document.getElementsByName(ele) returns an element with a given name attribute, Also returns an HTMLCollection object
document.getElementsByClassName(className) returns all matching NodeList objects (
This method can be called on the Document type and Element type)
document.querySelector(selector) selector means that the CSS selector returns the first element that matches the pattern. If not found, returns null (
Document type, DocumentFragment type, Element type are all You can call this method)
document.querySelectorAll(selector) selector indicates that the CSS selector returns a successfully matched NodeList object (
Document type, DocumentFragment type, Element type You can call this method)

##getElementsByTagName(ele) Get the element with the tag name ele

Attribute

##nodeValue | data (access the text in the Text node)

DocumentFragment type

Method

##document.createDocumentFragment() (indicates creating a document fragment)

NodeList object

Element size

Offset dimension

To know the offset of an element on the page, compare the element's offsetLeft and offsetTop with its offsetParent By adding the same attributes and looping like this until the root element, a basically accurate value can be obtained. The following two functions can be used to obtain the left and upper offsets of the element respectively.

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

Copy after login

Client area size (client dimension)

To determine the browser viewport size, you can use the clientWidth and clientHeight of document.documentElement or document.body (in versions prior to IE7).

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

Copy after login

Scroll dimension(scroll dimension)

·················

Determine the element size

document.getBoundingClientRect() method returns a rectangular object. Contains 4 attributes: left, top, right and bottom. These properties give the element's position on the page relative to the viewport.

The above is the detailed content of Detailed introduction to DOM knowledge. For more information, please follow other related articles on the PHP Chinese website!