[JS] document.documentElement与document.body

david2tdw commented 3 years ago

document.documentElement与document.body

document代表的是整个文档(对于一个网页来说包括整个网页结构)，document.documentElement是整个文档节点树的根节点，在网页中即html标签；
document.body是整个文档DOM节点树里的body节点，网页中即为body标签元素。

这两个属性主要是和html 的DTD有关

在文档使用了DTD时，需要使用document.documentElement.scrollTop来获取滚动条滚过的长度（document.body.scrollTop的值为0）；
在未使用DTD定义文档时，使用document.body.scrollTop获取值。

兼容性写法

    var top = document.documentElement.scrollTop || document.body.scrollTop;
    或
    var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

漫谈document.documentElement与document.body

david2tdw commented 3 years ago

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>Javascript</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #ccc;
        font-size: 12px;
        overflow: auto;
      }
      .main {
        height: 900px;
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <div class="main">

    </div>

    <script>
      window.onload = function () {
        window.addEventListener('scroll', function () {
          console.log(document.documentElement.scrollTop, document.body.scrollTop)
        })
      }
    </script>
  </body>
</html>

david2tdw commented 3 years ago

未声明DTD:

<!-- <!DOCTYPE html> -->
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>Javascript</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #ccc;
        font-size: 12px;
        overflow: auto;
      }
      .main {
        height: 900px;
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <div class="main">

    </div>

    <script>
      window.onload = function () {
        window.addEventListener('scroll', function () {
          console.log(document.documentElement.scrollTop, document.body.scrollTop)
        })
      }
    </script>
  </body>
</html>

david2tdw / blog

[JS] document.documentElement与document.body #200

document.documentElement与document.body

这两个属性主要是和html 的DTD有关

兼容性写法