In the front-end development, some operations must be performed on the DOM more or less, such as some of our commonly used methods: document.getElementById(“”); document.querySelectorAll(“”); document.getElementsByClassName(); document.createElement(). ….. Wait for a series of methods, where do these methods come from? Where is it defined? Let’s test it together.
Sample demo
First, we open the IDE and create a blank html file with nothing to write in it, as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Then we open the console of the chrome browser and enter document, and then we see a document object. Since it is an object, let’s test it. Enter typeof document and control the printing of “object”, as shown below:
It seems that it is indeed an object. Since it is an object, what properties and methods does it have? Let’s traverse and modify the html just now:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
window.onload = function(){
var count = 0;
for (var k in document) {
count++;
console.log(k);
}
console.log(count)
}
</script>
</html>Then refresh the page and you will see a lot of properties in the console. My chrome version is version 54. The final count is 234. The number of other browsers will vary, and there will be differences between different versions. Here we will see that we have some methods we are familiar with. As mentioned earlier, some of the ones we haven’t seen may be very old, or they may be new methods that are still in the experimental stage. How is this document defined?
What it says on MDN
The Document interface represents the loading of any web page in the browser and server, and also serves as the entrance to the web page content (DOM tree, including elements such as body and table). It also provides global functions for the document, such as the function to get the URL of the page and create a new element in the document.
The Document interface describes the public properties and methods of any type of document. According to the document type (such as HTML, XML, SVG, etc.), more corresponding APIs can be used. For example, HTML documents (text/html type content) implement the HTMLDocument interface, and SVG documents implement the SVGDocument interface.
Then there is a commonly used method getBoundingClientRect(); I didn’t see it here, I just added a div with id test1 under the body.
Then this method can be used. After reading the documentation, I found that this getBoundingClientRect is a method of Element. What is this Element? Let’s take a look at MDN’s instructions:
The Element interface is an object of Document. This interface describes the methods and attributes common to all elements of the same kind. These interfaces that inherit from Element and add some additional functions describe specific behaviors. For example, the HTMLElement interface is the basic interface of all HTML elements, and the SVGElement interface is the basic interface of all SVG elements.
These explain why there are no scrollTop, scrollLeft, clientTop…etc methods on the document.
