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.
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
Attributes (in a certain A specific node calls the following properties through inheritance)
nodeType
nodeName
nodeValue
··············
##························
···Copy node···
cloneNode(boolean) true: means deep copy, false: means shallow copy
·······················
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.documentElement (representing HTML element), and the HTML element can be obtained through document.childNodes[1]
document.attributes (Get the attributes of a node and return a NamedNodeMap object, similar to NodeList)
Method
··· Find the element···
This method can be called on the Document type and Element type)
Document type, DocumentFragment type, Element type are all You can call this method)
Document type, DocumentFragment type, Element type You can call this method)
Method
##document.createDocumentFragment() (indicates creating a document fragment)
NodeList object
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;
}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
};
}
}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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
