解决document.documentElement.body的值是null

最新推荐文章于 2024-12-25 08:53:40 发布
最新推荐文章于 2024-12-25 08:53:40 发布
阅读量1.5k 收藏
点赞数
分类专栏： 前端js 文章标签： 前端
本文解释了一个常见的JavaScript加载问题：如果在文档中的body元素之前加载JS文件，可能会导致某些依赖于DOM的操作失败。解决方法是将相关JS代码放置在body标签的结尾处，确保DOM完全加载后再执行这些操作。

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

      问题的原因很简单，是因为我们在body标签前就加载了js，此时还没有body元素

     问题的解决办法就是把调用到document.body的JS代码移到body标签代码结束之后

    输出nodelist对象须在节点对象后加.innerHTML

document.body is null
HYY0515000的博客
06-12 299
document.body is null：做前端的同学们对这个错误应该不陌生吧 出现这个问题的原因是：你太着急了，document还没渲染到body呢，你就想调用了，当然会找不到了 解决办法so easy 将代码放在$(document).ready()中就O了 转载于:https://www.cnblogs.com/MRPUNK/p/3849293.html...
document.body为null
u013163834的专栏
10-11 352
document.body为null
document.body为null的问题
weixin_34380948的博客
09-24 632
      虽然body是JS中的DOM技术中所有浏览器支持的属性，但在我们的代码编写中，还是会碰到document.is null问题 例如：我们可以使用alert(document.body);的时候，就会提示Null。  解决方法： 原因很简单，是因为我们在body标签前或在body标签中就加载了或写的js代码，此时还没有body元素 问题的解决办法就是把调用到document....
关于document.getElement获取的值为null的问题
qq_44604924的博客
06-09 889
在写js代码时，运行发现报如下错误： 图中报错的相应源代码入下： ，该js代码我放到里面的，然后我用alert弹窗打出three,发现其值为null,百度发现很多给的是没给id赋值，但我的代码有该id值，然后我猜想应该是js代码放的位置不对，js代码先于html代码运行，导致不能获取id为three的值。后改动js代码位置，将其全部放到结束标签后，发现能正确运行不报错。然后再次百度发现，还可以在标签里面加上defer:true 如下代码： 以上方法可解决问题。 ...
document.body为null问题
qq_36437991的博客
12-25 286
document.body null问题解决
document.documentElement.scrollTop为0
07-27
\[1\]解决这个问题的方法是将原来的document.body.scrollTop改为document.documentElement.scrollTop。\[2\]另外，为了兼容所有浏览器，可以封装一个函数来获取页面向上卷曲出去的距离，可以使用以下代码：top: ...
document
菜鸟第一步
04-18 876
Document对象，它的Element对象和文档中中表示文本的Text对象都是Node对象，Node定义了以下重要的属性 ParentNode     该节点的父节点，或者针对类似Document对象应该是null，因为它是没用父节点的 ChildNodes     只读的类数组对象，它是该节点的子节点的实时表示   firstChild    lastChild     该节点的子节点
// 全局水印 let setWatermark = str => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') can.width = 200 can.height = 200 let cans = can.getContext('2d') cans.rotate((-15 * Math.PI) / 150) cans.font = '14px Vedana' cans.fillStyle = 'rgba(200, 200, 200, 0.40)' cans.textAlign = 'left' cans.textBaseline = 'middle' cans.fillText(str, can.width / 8, can.height / 2) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px' div.style.left = '0px' div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth + 'px' div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } const set = str => { let id = setWatermark(str) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) window.onresize = () => { setWatermark(str) } } const outWatermark = id => { if (document.getElementById(id) !== null) { const div = document.getElementById(id) div.style.display = 'none' } } const out = () => { outWatermark('1.23452384164.123412415') } const reset = str => { out() set(str) } export default { set, out, reset, } 帮我优化代码
06-01
div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } ...
export default { props: { continue: { type: Boolean, default: false // false 监听一次 true 持续监听 }, exact: { type: String, default: 'environment' // environment 后摄像头 user 前摄像头 }, size: { type: String, default: 'whole' // whole 全屏 balf 半屏 }, definition: { type: Boolean, default: false // fasle 正常 true 高清 } }, data() { return { windowWidth: 0, windowHeight: 0, video: null, canvas2d: null, canvas2d2: null, canvasWidth: 200, canvasHeight: 200, maskWidth: 0, maskHeight: 0, inter: 0, track: null, isUseTorch: false, trackStatus: false, isParse: false, isUse: true } }, mounted() { if (origin.indexOf('https') === -1) throw '请在 https 环境中使用摄像头组件。' this.windowWidth = document.documentElement.clientWidth || document.body.clientWidth this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight this.windowHeight = this.size === 'whole' ? this.windowHeight : this.windowHeight / 2 this.isParse = true this.$nextTick(() => { this.createMsk() this.openScan() }) }, destroyed() { this.closeCamera() }}转成Vue3代码
最新发布
04-01
windowWidth.value = document.documentElement.clientWidth || document.body.clientWidth windowHeight.value = props.size === 'whole' ? (document.documentElement.clientHeight || document.body....
优化一下这段代码//1、获取元素 var one = document.querySelector('.one') var two = document.querySelector('.two') //2、绑定滚动事件 window.onscroll = function () { //2-1，获取浏览器卷去的高度 var height = document.documentElement.scrollTop || document.body.scrollTop //2-2，判断卷去的高度 if (height >= 300) { //显示 two.style.display = 'block' } else { //隐藏 two.style.display = 'none' } } //3，绑定点击事件 two.onclick = function () { //3-1，让页面滚动回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }) }
06-03
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 2-2、判断卷去的高度 if (scrollTop >= 300) { // 显示 $('.two').style.display = 'block' } else { // 隐藏 $('....
document.body控制台输出为null的问题
weixin_39789869的博客
11-19 1293
console.log(document.body); document.body.innerHTML = 'helloworld'; 控制台输出document.body为null： 解决1： 原因很简单，是我在引入js文件的时候把script标签写在了head标签里 解决办法就是把调用document.body的JS代码移到body结束标签之前/之后。 思考：在很多时候，我们获取页面的某个元素为null的情况和这个类似，可能也是你在该元素之前写了
3 document.body为什么是null
weixin_34342905的博客
05-29 728
大家好，我是小遁。 document 可以看作整个HTML文档 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
js编写中遇到的问题-TypeError: document.body is null
h1013的博客
06-23 1666
遇到该错误的原因是：在body标签之前就加载了js，而js代码中用到了document.body，所以这是就报了document.body为空这一错误 解决办法是：将js代码写在body标签之后，或者使用window.onload(onload的作用是页面对象装载完毕后执行onload中的代码)
document.body为空或不是对象或者为什么获取不到document.documentElement.scrollHeight的值...
weixin_30501857的博客
03-19 1563
当我们在<head></head>标记之间的script中，引用document.body时，会出现document.body为空或不是对象，这时可将js代码移至<body></body>标签之间，该问题即可解决。 下面说说将js代码放在<head></head>和<body></body&gt...
[Http网络信息传输]Document生成xml文件以及输出[#document:null]问题
EasyJax的博客
08-12 1098
​ DocumentBuilderFactory是用于创建解析器配置的工厂类，使用该工厂类创建一个实例之后创建一个DocumentBuilder类的实例（该实例可用于将XML文档解析为一个文档对象），通过该实例也就是下列代码中的db.newDocument()创建一个空的文档对象，表示一个xml文档。​ 这里要声明一下，formData4XML这个变量正是本文要展开讲的Document所转变而来的，那我们就不得不谈到到Document对象要创建的问题上面来了。对象的内容，您需要使用。​ 在输出来的值当中，
xfire调用webservice[#document: null]问题
elfenliedef的编程之旅
10-08 6110
<br />xfire 调用.net webservice的时候返回[#document: null]这个事怎么回事呀？<br /><br /> Client client = new Client(<br /> new URL(<br /> "http://www.webxml.com.cn/WebServices/IpAddressSearchWebService.asmx?wsdl"));<br /> HttpClientParams params = new
document.body为空或不是对象
java学习开发
09-29 4071
在IE6中，由于引入的JS库在该版本中存在BUG，所以当我们在标记之间引用document.body时会出现document.body为空或不是对象，这时可将代码移至标签之间，该问题即可解决。 百度的ueditor在IE6或IE8中提示： 行: 13384 错误: 'document.body' 为空或不是对象 原因为： document还没有加载完全，就执行了e
IE6下document.documentElement.clientHeight值为0的问题
狗
03-17 2317
在IE 6下 如果有 就用 document.documentElement 否则用 document.body
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值