`

document.body和document.documentElement的区别

脚本HTML 
阅读更多

document.body:是DOM中Document对象里的body子节点

 

document.documentElement:DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

 

示例:

 

if(document.documentElement && document.documentElement.clientHight &&document.documentElement.clientWidth)
{
   theWindowHeight=document.documentElement.clientHeigth;
   theWindowWidht=document.documentElement.clientWidth;
}

 

if(document.documentElement && document.documentElement.clientHight &&document.documentElement.clientWidth)
这一句的逻辑是：如果存在document.documentElement实例，而且存在document.documentElement.clientHight实例和 document.documentElement.clientWidth实例

如果不加这一层控制，如果document.documentElement不是一个实例化的量（为null），那么执行：
theWindowHeight=document.documentElement.clientHeigth;
theWindowWidht=document.documentElement.clientWidth;
就会报“空指针错误”。

 

 

分享到：
| IIS权限设置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时，我们深入分析了浏览器在处理页面滚动位置时的不同行为，尤其是当滚动位置值始终为0时的...

    document.body属性.document.body.scrollTop

    3. **与window对象的scrollY区别**：虽然 `window.scrollY` 和 `document.body.scrollTop` 在很多情况下结果相同，但它们并不完全等价。`window.scrollY` 返回的是整个窗口（包括顶部固定元素）相对于浏览器顶部的...

    document.body.scrollTop用法

    - 使用 `event.clientX` 和 `event.clientY` 获取鼠标相对于视口的位置，但若想得到相对于整个文档的位置，则需加上 `document.documentElement.scrollTop` 或 `document.documentElement.scrollLeft`。 ```...

    深入解析：`document.documentElement` 与 `document.body` 的差异及其应用

    在JavaScript的DOM操作中，document.documentElement 和 document.body 是两个非常重要的属性，它们分别代表了文档的不同部分。理解这两者之间的区别对于前端开发者来说至关重要，尤其是在进行页面布局和滚动操作时...

    document.documentElement和document.body区别介绍

    在标准模式下，则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0，若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后，前端开发者在...

    解决VUE中document.body.scrollTop为0的问题

    页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享...

    document.documentElement &amp;&amp; document.documentElement.scrollTop

    在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...

    Document.body.scrollTop的值总为零的快速解决办法

    在标准模式下，浏览器倾向于使用`document.documentElement.scrollTop`来获取页面的滚动位置，而不是`document.body.scrollTop`。 `document.documentElement` 指的是HTML文档的根元素，即`&lt;html&gt;`标签。在标准模式...

    用document.documentElement取代document.body的原因分析

    上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...

    用javascript地址栏显示源码

    - 使用`document.write('&lt;body&gt;&lt;/body&gt;')`来清除页面上的所有内容，并重新插入一个空的`&lt;body&gt;`标签。 - 这一步是必要的，因为如果直接修改现有文档的内容而不进行清空操作，可能会导致布局错乱或意料之外的结果。...

    javascript获取滚动条高度 页面宽度与高度

    - 在 Firefox 和 Opera 中，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示页面宽度减去`BODY`的外边距（`margin`）后的宽度和高度。 为了确保代码的兼容性，开发者在...

    由document.body和document.documentElement想到的

    在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...

    document.documentElement document.documentElement.scrollTop

    if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...

    javascript 获取网页高度宽度.pdf

    这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中，这两个属性可能有不同的行为，因此需要进行条件判断来确保兼容性。 ```javascript ...

    document.body.scrollTop 值总为0的解决方法 比较常见的标准问题

    在标准模式下，IE和Firefox等现代浏览器倾向于遵循W3C标准，其中规定应该使用`document.documentElement.scrollTop`来获取整个页面的滚动位置，而不是`document.body.scrollTop`。因此，当你尝试通过`document.body....

    js中的如何定位固定层的位置.docx

    但需要注意的是，对于IE5.5及更高版本，需要特别处理`document.body.scrollLeft`和`document.documentElement.scrollLeft`，以及`document.body.scrollTop`和`document.documentElement.scrollTop`，以确保在所有...

    获取页面长宽和滚动条的位置

    } else if(document.body.scrollHeight &gt; document.body.offsetHeight) { // all but IE Mac scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { /...

Magicbox
Global site tag (gtag.js) - Google Analytics