document.documentElement和document.body、DTD

最新推荐文章于 2020-03-05 10:35:47 发布

shangrila-xiu

最新推荐文章于 2020-03-05 10:35:47 发布

阅读量174

点赞数

分类专栏： xml js 文章标签： document.documentElement和document.b

本文链接：https://blog.csdn.net/lyx9611/article/details/89684307

版权

js 同时被 2 个专栏收录

91 篇文章 0 订阅

订阅专栏

xml

0 篇文章 0 订阅

订阅专栏

下面将引申到document.documentElement和document.body的区别：
上一个博客讲到document.documentElement，可以去看看哦！！

什么是document.documentElement？

返回html dom中的root 节点即<html>

什么是document.body？

返回html dom中的body节点即<body>

document.documentElement 与 document.body的应用场景

获取 scrollTop 方面的差异

在chrome(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DTD是否存在,不会影响 document.body.scrollTop的获取。

通过console查看结果：

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

在firefox(47.0)及 IE(11.3)下获取scrollTop，DTD是否存,会影响document.body.scrollTop 与 document.documentElement.scrollTop的取值

在firefox(47.0)

页面存在DTD，使用document.documentElement.scrollTop获取滚动条距离；

页面不存在，使用document.body.scrollTop 获取滚动条距离

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

IE(11.3)

页面存在DTD，使用document.documentEelement.scrollTop获取滚动条距离

页面不存在DTD,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以获取到滚动条距离

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

兼容解决方案：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

什么是DTD（document Type Define）？

DTD（文档类型定义）的作用是定义 XML 文档的合法构建模块。
DTD 可被成行地声明于 XML 文档中，也可作为一个外部引用。

内部DTD

假如 DTD 被包含在您的 XML 源文件中，它应当通过下面的语法包装在一个 DOCTYPE 声明中：

<!DOCTYPE root-element [element-declarations]>

带有 DTD 的 XML 文档实例（请在 IE5 以及更高的版本打开，并选择查看源代码）：

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>

以上 DTD 解释如下：

!DOCTYPE note (第二行)定义此文档是 note 类型的文档。
!ELEMENT note (第三行)定义 note 元素有四个元素：“to、from、heading,、body”
!ELEMENT to (第四行)定义 to 元素为 “#PCDATA” 类型
!ELEMENT from (第五行)定义 from 元素为 “#PCDATA” 类型
!ELEMENT heading (第六行)定义 heading 元素为 “#PCDATA” 类型
!ELEMENT body (第七行)定义 body 元素为 “#PCDATA” 类型

外部DTD

假如 DTD 位于 XML 源文件的外部，那么它应通过下面的语法被封装在一个 DOCTYPE 定义中：

<!DOCTYPE root-element SYSTEM "filename">

这个 XML 文档和上面的 XML 文档相同，但是拥有一个外部的 DTD:

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>