Detailed introduction to DOM knowledge

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

##previousSibling
firstChild
lastChild
ownDocument (each node can only belong to one Document node)

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

··· Find node·· ·
The method to find elements is located in the Document type
················· ·······
··· Insert node···
appendChild(ele)
insertBefore(ele, target)

• ##························

• ··· 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

Document 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.URL (Get URL address)
document.domain (Get URL Domain name in , pathname)

• 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)

##··· Create element···
document.createElement() (created The element is in a free state and needs to be inserted through appendChild)
··· Create a text node···
document.createTextNode() (Create Good elements are in a free state and need to be inserted through appendChild)
··· Determine the element size···
document.getBoundingClientRect()

Element type

Attribute
id
title
lang
className

Method
getAttribute(ele) Get an attribute
setAttribute(name, value) Set an attribute
removeAttribute(ele) Remove an attribute

• ##getElementsByTagName(ele) Get the element with the tag name ele
Text type

Attribute

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

• DocumentFragment type
Purpose: To operate DOM elements offline to avoid a large number of rearrangements and redraws of DOM nodes, causing performance problems

Method

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

• NodeList object

Understanding NodeList and its "close relatives" NamedNodeMap and HTMLCollection is the key to a thorough understanding of the DOM as a whole. All three collections are "dynamic"; in other words, they are updated every time the document structure changes. Therefore, they always hold the latest and most accurate information. Essentially, all NodeList objects are queries that run in real time as the DOM document is accessed.

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;
}

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
 };
 }
}

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!