深入认识Document - 极乐科技

来源：深入认识Document *作者：yuyuyu*

前端开发中或多或少都要对DOM进行一些操作，比如我们常用的一些方法：document.getElementById("");document.querySelectorAll("");document.getElementsByClassName();document.createElement()…… 等等一系列的方法,这些方式是从哪里来的呢？在哪里定义的呢？我们就一起来测试一下。

首先我们打开IDE，新建一个空白的html文件，里面什么都不写,如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

    </body>
</html>

然后我们打开chrome浏览器的控制台输入 document，然后我们就看到了一个document对象，既然是对象，我们就来测试一下，输入 typeof document, 控制打印了 "object"，如下图：看来确实是对象，既然是对象他有那些属性和方法呢？我们来遍历一下，修改一下刚才的html：

<!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>

然后刷新页面会在控制台看到非常多的属性，我这里的chrome版本是版本 54，最后统计数量是234个，其他浏览器的数量会有差异，不同版本的也有差异。这里会看到我们有一些我们熟悉的方法，如前面所提到的，还有一些没见过的可能是非常古老的，也有可能是一些全新的还在试验阶段的方法。那这个 document是如何定义的呢？

MDN上这样说的：

Document 接口代表在浏览器及服务器中加载任意 web 页面，也作为 web 页面内容（DOM tree，包含如 body 和 table 等 element）的入口。其也为文档（document）提供了全局性的函数，例如获取页面的URL、在文档中创建新的 element 的函数。

Document 接口描述了任何类型的文档的公共属性和方法。根据文档的类型（如 HTML、XML、SVG等等），可以使用更多对应的API，比如，HTML 文档（text/html 类型的内容）实现了 HTMLDocument 接口，而SVG 文档实现了 SVGDocument 接口。

然后有一个常用的方法 getBoundingClientRect();这里没看到，我就在body下加了一个 id为test1的div

然后这个方法可以用了，翻阅文档之后发现这个 getBoundingClientRect 是Element的方法，这个Element又是什么鬼？看下MDN的原话：

Element（元素）接口是 Document的一个对象. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口，而 SVGElement 接口是所有SVG元素的基本接口.

这些就解释了为什么 document上没有 scrollTop、scrollLeft、clientTop...等等方法了最后附上文档连接：

本文完！