Question

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title> sample </title>
<script>

var para = document.getElementsByTagName("p")[0]; // First <p> in the document
var text = para.textContent; // Text is "This is a simple document."
para.textContent = "Hello World!"; // Alter paragraph content

</script>

</head>
<body>
<p> This is a simple document. </p>
</body>
</html>

根据我用于学习javascript的书，这应该将

标签内的文字改为＆＃34; Hello World！＆＃34;但我不明白为什么它不起作用。

Answer 1

在页面上存在任何p元素之前，脚本正在运行。您应该将脚本移到</body>之前。

暂且不说：其他答案表明绑定load事件。在加载所有图像，外部资源和iframe之后触发load事件，这对于此示例实际上并不是必需的。 readystatechange或domcontentloaded事件更合适（相当于jQuery＆＃39; ready事件），当DOM完成加载并且load将触发之前触发事件。只需将脚本移动到页面底部就可以获得完全相同的效果而不会引入更多代码，并且可以更快地运行。

Answer 2

正如@Cory所说，你在html之前运行脚本。另一个选项是将代码放在window.onload函数中：

 window.onload=function(){

     //your code

 }

Answer 3

所以你的代码试图访问尚未渲染的元素。要解决此问题，您可以使用以下代码：

window.addEventListener('load', function() {
    var para = document.getElementsByTagName("p")[0]; // First <p> in the document
    var text = para.textContent; // Text is "This is a simple document."
    para.textContent = "Hello World!"; // Alter paragraph content
}, false);

Link to fiddle.

所以在这段代码中我们附加了windows load事件的事件监听器。在窗口加载完成后（浏览器呈现的所有元素）将触发此事件。

Answer 4

Cory解决方案的另一个选择是将您的代码放在window.onload函数中。像这样：

<script>
    window.onload = function(){
        var para = document.getElementsByTagName("p")[0]; // First <p> in the document
        var text = para.textContent; // Text is "This is a simple document."
        para.textContent = "Hello World!"; // Alter paragraph content
    };
</script>

这样代码只会在页面加载后运行。

您还可以将代码放入自定义函数中，并将onload事件处理程序添加到调用函数的body标记中：

<!DOCTYPE html>
<html>
<head>
<title> sample </title>
<script>
    function changePara(){
        var para = document.getElementsByTagName("p")[0]; // First <p> in the document
        var text = para.textContent; // Text is "This is a simple document."
        para.textContent = "Hello World!"; // Alter paragraph content
    };
</script>
</head>
<body onload="changePara();">
    <p> This is a simple document. </p>
</body>

我个人建议使用window.onload，因为您可以将您的功能放入javascript文件中，并在您的网站上轻松使用和更新。

Javascript：textContent和getElementsByTagName在我的代码中不起作用

4 个答案: