Question

如果将p标记放在上面并将脚本放在

下面，则下面的脚本可以正常工作

<p id="dom_intro">Hello</p> 

<script>
x=document.getElementById("dom_intro");
document.write("<p>This is the text of dom intro" + x.innerHTML + "Howzzat </p>");
</script>

如果首先放置脚本的相同代码和html p标签放在脚本下面它不起作用，我收到错误x是null或未定义

<script>
x=document.getElementById("dom_intro");
document.write("<p>This is the text of dom intro" + x.innerHTML + "Howzzat </p>");
</script>

<p id="dom_intro">Hello</p>

我尝试在外部javascript文件中粘贴脚本并放在head部分我得到了同样的错误。是否有任何javascript或jquery脚本在html具有rendred

之后加载javascript文件

Answer 1

jquery的：

$(document).ready(){function(){
//yourcode

});

和Javascript

window.onload=function(){
//your code

}

在jquery中准备好的文档在DOM准备就绪时执行该功能，这意味着在下载一些图像之前。

当页面完全就绪时，即所有图像加载完毕后，会触发Window.onload。

Answer 2

dom准备好后你需要访问该元素。您收到此错误是因为您尝试在dom加载之前访问p标记。

这可能会解决您的问题

window.onload = function(){ 
  // your javascript here
   x=document.getElementById("dom_intro");
   document.write("<p>This is the text of dom intro" + x.innerHTML + "Howzzat </p>");

}

Answer 3

浏览器正在渲染您的代码（线性）。这里的问题是你的脚本试图访问一些不存在的东西，所以通常的做法是等待所有DOM元素都准备就绪然后执行脚本。

请看这里：http://api.jquery.com/ready/

$(document).ready(function() {
  // Handler for .ready() called.
});

这相当于调用：

$(function() {
 // Handler for .ready() called.
});

Answer 4

＆lt; script＆gt;在您放置内容的地方执行内容，因此在第二种情况下，您尝试在声明之前使用“dom_intro”。但是你试图在html渲染之后加载javascript，所以你不想在html内容之前编写脚本，对吗？

加载JS文件的常用方法就在＆lt; / body＆gt;之前。关闭标记。这样，您就可以确保在加载所有HTML之前不会下载任何HTML。

如果您想在执行任何JS之前等待HTML完成加载，您必须执行以下操作：

普通javascript：

window.onload = function () {
    // do_whatever_you_want
}

Jquery的：

$(document).ready(function() {
    // do_whatever_you_want
}

html渲染后加载javascript

4 个答案: