为何直接调用change()函数无法修改p标签内容？添加window.onload却可行？
2026-5-12
为什么直接调用修改p标签内容的函数不生效，绑定window.onload却可以？
嘿，这个问题其实和浏览器加载页面的顺序直接相关，我给你讲明白～
当你直接在脚本里调用change()的时候，大概率你的脚本执行时机比页面里的<p>标签被解析的时间更早！比如说，如果你的脚本放在页面的<head>标签里，浏览器会从上到下加载代码：先执行你的脚本，这时候<body>里的<p>标签还没被浏览器解析到DOM树里呢，document.getElementsByTagName("p")拿到的就是一个空的元素集合，循环根本跑不起来，自然看不到内容被修改的效果。
而window.onload这个事件的作用，就是等整个页面的所有资源（包括HTML文档、图片、样式表全部加载完成）之后才会触发。这时候页面里的所有DOM元素都已经被完整构建到DOM树里了，你再调用change()函数，就能正确获取到所有的<p>标签，修改它们的innerHTML自然就生效啦。
顺便给你提个小技巧：其实不用非得依赖window.onload，你也可以把你的脚本代码放在</body>标签的前面对应位置。这时候浏览器已经把<body>里的所有DOM元素都解析完毕了，直接调用change()也能达到同样的效果，比如这样写：
<body> <!-- 这里是你的页面内容，包含所有<p>标签 --> <script> function change(){ var a = document.getElementsByTagName("p"); for(var x = 0 ; x < a.length ; x++){ a[x].innerHTML = "hello" ; } } change(); </script> </body>
内容的提问来源于stack exchange，提问作者Tuấn Việt
相关产品推荐
相关产品推荐
