-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathhtml_dbody.md
71 lines (50 loc) · 2.25 KB
/
html_dbody.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
---
layout: post
title: New Post
permalink: new-page.html
description: Some Description
date: 2016-01-25 15:03:48 +08:00
tags: "some tags here"
---
# 漫谈document.documentElement与document.body
在前端开发中，我们经常需要获取网页中滚动条滚过的长度，获取该值的方式一般通过scrollTop属性，如：document.body.scrollTop，是不是还经常看见document.documentElement.scrollTop，这两者都是经常用来获取文档滚动条滚过长度值的方式，他们又有什么区别呢？待下文，细细道来：
## DTD
DTD告诉浏览器当前文档用的是什么标记语言，然后浏览器才能正确的根据W3C标准解析文档代码。目前htmlDTD有三种类型：
- Strict DTD：严格的文档类型定义
不能包含已过时的元素（或属性）和框架元素。
- Transitional DTD：过渡的文档类型定义
能包含已过时的元素和属性但不能包含框架元素。
- Frameset DTD: 框架集文档类型定义
能包含已过时的元素和框架元素。
在html文档中定义DTD就是通过！doctype定义，如下，是一个html4.0的过渡DTDhtml文档：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
```
或在html5中：
```
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
```
## document.documentElement与document.body
- document代表的是整个文档(对于一个网页来说包括整个网页结构)，document.documentElement是整个文档节点树的根节点，在网页中即html标签；
- document.body是整个文档DOM节点树里的body节点，网页中即为body标签元素。
我们常看见如下这种写法获取页面滚动条滚过的长度：
```
var top = document.documentElement.scrollTop || document.body.scrollTop;
或
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
```
在文档使用了DTD时，document.body.scrollTop的值为0，此时需要使用document.documentElement.scrollTop来获取滚动条滚过的长度；在未使用DTD定义文档时，使用document.body.scrollTop获取值。