js里的document.documentElement和document.body

最新推荐文章于 2025-07-14 22:17:55 发布
最新推荐文章于 2025-07-14 22:17:55 发布
阅读量4.3k 收藏 11
点赞数 5
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37820744/article/details/86570247
本文详细解析了document.documentElement与document.body在DOM操作中的不同作用与应用场景。前者返回HTML根节点，后者返回<body>元素。通过实例展示了如何利用这两个属性获取网页的可见宽度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.documentElement和document.body的区别

这两个的有何区别？

document.body返回出来的是html 中< body >

console.log(document.body)

在这里插入图片描述

document.documentElement返回的是 html 根节点

	console.log(document.documentElement)

在这里插入图片描述

用法

我们一般要写 诸如获取网页可见区域宽
可以结合兼容写法

var w = document.documentElement.clientWidth || document.body.clientWidth
document.documentElement && document.documentElement.scrollTop
10-30
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
document.documentElement document.documentElement.scrollTop
01-19
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
document.documentElement和document.body区别介绍
09-05
body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
js中document.documentElement 和document.body 以及其属性
weixin_30591551的博客
05-11 166
（原来HTML里是document.body --XHTML里是document.documentElement ,都指的是<body>节点(OR元素)） 在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单...
document.documentElement详解
最新发布
软考鸭
07-14 364
定义与 的区别 常见用途 1. 操作根元素样式 2. 获取文档尺寸 3. 动态主题切换 注意事项 兼容性XML 文档与 的区别
JS中document.documentElement和document.body
memgke的博客
11-13 524
都是指节点 document .body.scrollTop属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，使用document .documentElement来取代document .body 在监听滚动条事件中var top=document.documentElement.scrollTop||
document.documentElement和document.body区别
我的博客
09-06 1563
区别： body是DOM对象里的body子节点，即 标签； documentElement 是整个节点树的根节点root，即 标签； 没使用DTD情况即怪异模式BackCompat下： document.documentElement.clientHeight=0 document.body.clientHeight=618 使用DTD情况即标准模式CSS
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
document.documentElement和document.body的区别
菜鸟史
04-15 1万+
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动： window.onscroll = function () { var div = document.getElementById("div"); div.style.top = document.body.scrollTop + "px"
document.documentElement 和 document.body
weixin_33744854的博客
01-08 186
document.documentElement 对&lt;html /&gt;元素的引用 document.documentElement === document.getElementsByTagName('html')[0] document.body 对&lt;body /&gt;元素的引用 document.body === document.getElementsByTa...
js中获取html元素之document.documentElement
热门推荐
韦_恩的博客
05-18 1万+
document.documentElement Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。 对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。 参考文档 html中document.body 与 document.d
document.body
06-30 126
比如document.body,最好是写成document.getElementsByTagName("body")[0]; 转载于:https://www.cnblogs.com/loveMis/p/9246513.html
JS：document 和 element 浅谈
谢谢๑‾᷅^‾᷅๑的博客
12-21 3860
一、简介 DOM 对象：DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。 打开网页后，首先看到的是浏览器窗口，即顶层的window对象，而网页内容就是document对象，其中document是window的一个对象属性，所以document可全局访问。DOM对象共有7种，这里浅谈下其中的HTML D...
document和element
qq_52563729的博客
10-10 304
js
JavaScript 中的 DOM 对象（Document 对象、Element 对象
m0_60388216的博客
03-28 1198
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
uni-app 获取不到document.documentElement.scrollTop || document.body.scrollTop
06-10
根据用户的问题，用户希望在uni-app中解决无法获取document.documentElement.scrollTop或document.body.scrollTop的问题。从用户提供的引用中可以看到，在uni-app中，使用传统的DOM操作方式（如document对象）可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值