深入认识Document
发布在极乐科技2016年12月28日view:103JavaScript
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

来源:深入认识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...等等方法了 最后附上文档连接:

本文完!

评论
发表评论
暂无评论
WRITTEN BY
极乐网
https://zhuanlan.zhihu.com/dreawer
TA的新浪微博
PUBLISHED IN
极乐科技

面向IT技术人员和技术供应商服务的平台网站,我们的口号是:让技术变得更简单! 极乐网

我的收藏