js里的document.documentElement和document.body

最新推荐文章于 2024-03-28 23:52:10 发布
原创 最新推荐文章于 2024-03-28 23:52:10 发布 · 4.3k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #html

本文详细解析了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 ...
js中document.documentElement 和document.body 以及其属性
weixin_30591551的博客
05-11 164
（原来HTML里是document.body --XHTML里是document.documentElement ,都指的是<body>节点(OR元素)） 在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单...
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||
js中获取html元素之document.documentElement
韦_恩的博客
05-18 1万+
document.documentElement Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。 对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。 参考文档 html中document.body 与 document.d
document.documentElement和document.body区别介绍
09-05
在标准模式下，则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0，若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后，前端开发者在...
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
JS：document 和 element 浅谈
谢谢๑‾᷅^‾᷅๑的博客
12-21 3843
一、简介 DOM 对象：DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。 打开网页后，首先看到的是浏览器窗口，即顶层的window对象，而网页内容就是document对象，其中document是window的一个对象属性，所以document可全局访问。DOM对象共有7种，这里浅谈下其中的HTML D...
document和element
qq_52563729的博客
10-10 303
js
JavaScript 中的 DOM 对象（Document 对象、Element 对象
m0_60388216的博客
03-28 1195
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
document.documentElement 属性
m0_57835615的博客
05-29 1063
document.documentElement 属性返回文档中的html元素。 var html = document.documentElement; console.log(html);
javascript 原生得到document.Element的方法
weixin_34257076的博客
07-03 216
　　今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法。 　　1.document.getElementById。这个方法接收1个参数，就是DOM元素的id（区分大小写），这也是平时用的最多的方法，并且用这种方法DOM查找的效率是最高的，所以如果能用id查找的dom元素尽量用id来查询，返回的类型是DOM ELEMENT。 　　2.document.getEl...
document.documentElement.scrollTop || document.body.scrollTop;
热门推荐
tfgdd的专栏
01-12 2万+
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代docum
document.documentElement
孙群
12-16 2245
参考   https://developer.mozilla.org/zh-CN/docs/Web/API/document.documentElement              http://www.w3schools.com/jsref/prop_document_documentelement.asp 该属性为只读属性，返回的元素是document的根元素（例如：HTML文档的根元素
uni-app 获取不到document.documentElement.scrollTop || document.body.scrollTop
最新发布
06-10
<think>根据用户的问题，用户希望在uni-app中解决无法获取document.documentElement.scrollTop或document.body.scrollTop的问题。从用户提供的引用中可以看到，在uni-app中，使用传统的DOM操作方式（如document对象）可能无法正常工作，因为uni-app运行在小程序或移动端环境中，这些环境没有完整的浏览器DOM。用户引用的[1]展示了传统JS中通过documentElement.scrollTop或body.scrollTop获取滚动位置的方式，但在uni-app中不适用。用户引用的[2]展示了一个在uni-app中封装滚动条置底的方法，使用了uni.createSelectorQuery()来获取节点信息，然后通过boundingClientRect获取高度信息，并设置scrollTop。这提示我们，在uni-app中应该使用其提供的API来操作节点。因此，解决方案的核心是使用uni-app的节点查询API（createSelectorQuery）来获取滚动容器的信息，然后通过计算得到滚动位置。具体步骤：1.为需要获取滚动位置的滚动容器设置一个id（例如#scroll-view）。2.使用uni.createSelectorQuery()创建一个节点查询对象，然后通过select()方法选择该容器。3.调用boundingClientRect()获取容器的位置和尺寸信息，包括滚动高度（但注意，boundingClientRect只能获取视图信息，滚动位置需要另外获取）。4.然而，boundingClientRect并不能直接得到滚动条的位置。实际上，我们需要监听滚动事件来记录滚动位置，或者使用scrollOffset相关方法。重新思考：uni-app中获取滚动条位置的正确方式在uni-app中，如果我们使用的是scroll-view组件，那么在滚动事件中，事件对象event.detail可以获取到scrollTop和scrollLeft。如果我们没有使用scroll-view，而是使用页面本身的滚动，那么在onPageScroll生命周期函数中可以获取到页面滚动的距离（单位是px）。根据uni-app文档：-对于页面的滚动，可以在页面的onPageScroll生命周期中获取到滚动距离。-对于scroll-view组件的滚动，可以通过绑定scroll事件，在event.detail中获取。因此，解决方案分为两种情况：情况一：获取页面滚动距离在页面的onPageScroll生命周期中监听滚动事件：```javascriptonPageScroll(e){console.log(e.scrollTop);//这里e.scrollTop就是页面的滚动距离}```情况二：获取scroll-view组件的滚动距离在scroll-view组件上绑定scroll事件：```vue<scroll-viewscroll-y="true"@scroll="scrollEvent"><!--内容--></scroll-view>```在methods中定义scrollEvent方法：```javascriptscrollEvent(e){console.log(e.detail.scrollTop);}```如果用户想要主动获取滚动位置，而不是在滚动事件中获取，那么：-对于页面滚动，目前uni-app没有提供直接获取页面滚动位置的API，所以只能通过onPageScroll记录到一个变量中。-对于scroll-view，可以使用组件的scrollTop属性，或者通过uni.createSelectorQuery().select()方法获取scroll-view实例，然后使用fields方法获取scrollOffset。对于scroll-view，我们可以这样获取当前的滚动位置：```javascriptletview=uni.createSelectorQuery().select('#scroll-view');view.fields({scrollOffset:true},data=>{console.log(data.scrollTop);//这里就是滚动条的位置}).exec();```总结：1.如果用户的问题是关于页面滚动的，则无法直接获取，需要在onPageScroll中记录滚动位置。2.如果用户的问题是关于scroll-view的，则可以通过上述的节点查询方法获取。根据用户的问题描述，用户可能是在尝试获取页面滚动位置。在uni-app中，由于运行环境不同，传统的documentElement.scrollTop不可用，必须使用uni-app提供的API。因此，解决方案：-如果用户想要监听页面的滚动位置，则使用onPageScroll生命周期函数。-如果用户需要在scroll-view中获取滚动位置，则使用scroll事件或节点查询。注意：用户提到返回0或undefined，很可能是因为在uni-app的页面中，并没有documentElement对象，所以获取的是undefined；而在某些环境下document.body.scrollTop可能返回0。下面提供两种场景下的解决方案代码：场景一：监听页面滚动在页面的js中：```javascriptexportdefault{data(){return{scrollTop:0}},onPageScroll(e){this.scrollTop=e.scrollTop;//记录滚动位置到scrollTop变量}}```场景二：获取scroll-view的滚动位置（主动获取）在scroll-view上设置id，比如id="myScroll"```javascriptgetScrollPosition(){uni.createSelectorQuery().select('#myScroll').fields({scrollOffset:true},res=>{console.log('滚动位置:',res.scrollTop);}).exec();}```如果用户使用的是小程序，请注意uni.createSelectorQuery在自定义组件中的使用需要加.in(this)（如引用[2]中所示），如果不是自定义组件则不需要。因此，根据用户的具体场景，选择合适的方法。相关问题生成：1.在uni-app中如何实现页面滚动到指定位置？2.在uni-app的scroll-view组件中，如何动态设置滚动条位置？3.uni-app的onPageScroll生命周期函数有什么使用限制？4.在uni-app中如何监听页面的滚动事件？注意：用户是在uni-app环境下，所以回答必须基于uni-app的API，而不是传统浏览器DOM方法。</think> 在uni-app中无法使用传统浏览器API获取滚动位置的问题，根源在于uni-app基于Vue.js框架开发，主要运行在小程序环境而非浏览器环境中。以下是具体解决方案和代码实现： ### 📌 核心解决方案：使用uni-app原生API替代DOM操作 1. **页面级滚动位置获取**（推荐） ```javascript // 在页面生命周期中监听滚动 onPageScroll(e) { console.log("当前滚动位置：", e.scrollTop) // 单位px this.scrollPosition = e.scrollTop } ``` 2. **scroll-view组件滚动位置获取** ```vue <scroll-view scroll-y @scroll="handleScroll" id="scrollContainer" > <!-- 内容区域 --> </scroll-view> ``` ```javascript methods: { handleScroll(e) { console.log("scroll-view滚动位置：", e.detail.scrollTop) } } ``` 3. **主动获取滚动位置**（异步API） ```javascript // 获取页面滚动位置 uni.pageScrollTo({ scrollTop: 0, duration: 0, success: () => { const query = uni.createSelectorQuery() query.selectViewport().scrollOffset(res => { console.log("当前滚动位置：", res.scrollTop) }).exec() } }) ``` ### ⚠️ 关键注意事项 1. **环境差异处理** ```javascript // 条件编译处理不同平台 let scrollTop = 0 // #ifdef H5 scrollTop = document.documentElement.scrollTop || document.body.scrollTop // #endif // #ifndef H5 uni.pageScrollTo({ /* ... */ }) // 使用uni API // #endif ``` 2. **滚动容器要求** - 使用`scroll-view`时必须设置固定高度 ```css /* 必须设置高度才能触发滚动 */ #scrollContainer { height: 100vh; overflow-y: auto; } ``` 3. **节点查询时机** ```javascript // 确保DOM渲染完成后再获取 this.$nextTick(() => { uni.createSelectorQuery() .select('#scrollContainer') .boundingClientRect(res => { console.log("容器高度:", res.height) }).exec() }) ``` ### 💡 滚动位置应用示例 ```javascript // 滚动到底部实现 scrollToBottom() { uni.createSelectorQuery() .select('#message-scroll') .boundingClientRect(res => { uni.pageScrollTo({ scrollTop: res.height, duration: 300 }) }).exec() } ``` > **技术说明**：uni-app的运行环境与浏览器存在本质差异。小程序平台使用JSCore而非WebView，因此传统DOM API（如document）不可用。建议开发者优先使用uni-app的[页面滚动API](https://uniapp.dcloud.io/api/ui/scroll)和[节点查询API](https://uniapp.dcloud.io/api/ui/nodes-info)[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值