Question

我在简单的代码中，在html页面中使用getelementbyid.innerHtml。请帮我。

<!doctype html>
<html lang="en">
	<head>
		<title>Dom examples</title>
		<script>
			var code = document.getElementById("one").innerHTML;
			code = code + " !!";
			console.log(code);
		</script>
	</head>
	<body>
		<h4> DOM practise page </h4>
		<p id="one"> This page is for practise of DOM model in JS</p>
		<p id="two"> Thank You </p>
	</body>
</html>

Answer 1

在浏览器呈现HTML页面之前调用您的javascript。因此，当您的浏览器呼叫getElementById时，未定义ID。

只需在文件末尾移动您的JavaScript即可

Answer 2

只需移动下面的脚本......因为id还没有呈现原因。

<!doctype html>
<html lang="en">
	<head>
		<title>Dom examples</title>
		
	</head>
	<body>
		<h4> DOM practise page </h4>
		<p id="one"> This page is for practise of DOM model in JS</p>
		<p id="two"> Thank You </p>
	</body>
    <script>
			var code = document.getElementById("one").innerHTML;
			code = code + " !!";
			console.log(code);
		</script>
</html>

Answer 3

利用onload的{{1}}属性在window加载时调用函数

window

Answer 4

只需将脚本部分放在close body之前，它就可以了。

<!doctype html>
<html lang="en">

<head>
  <title>Dom examples</title>
  <script>
    onload = function() {
      var code = document.getElementById("one").innerHTML;
      code = code + " !!";
      console.log(code);
    }
  </script>
</head>

<body>
  <h4> DOM practise page </h4>
  <p id="one"> This page is for practise of DOM model in JS</p>
  <p id="two"> Thank You </p>
</body>

</html>

Answer 5

浏览器从上到下解析html页面。因此，如果您将<!doctype html> <html lang="en"> <head> <title>Dom examples</title> </head> <body> <h4> DOM practise page </h4> <p id="one"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> <script> var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); </script> </body> </html>放在script中，它将首先呈现，然后呈现head。因此，您的body正在搜索尚未呈现给DOM的ID。

将script放在底部，可以解决您的问题。

script

Answer 6

工作正常，最后只使用脚本标签。为了更清晰的检查。 https://jsfiddle.net/djmayank/Lzewxgyw/

HTML

<head>
        <title>Dom examples</title>

    </head>
    <body>
        <h4> DOM practise page </h4>
        <p id="one"> This page is for practise of DOM model in JS</p>
        <p id="two"> Thank You </p>
    </body>

JS

var code = document.getElementById("one").innerHTML;
        code = code + " !!";
        console.log(code);

Answer 7

在加载id为1的元素之前加载script，因此尚不存在。{1}}。您有以下选择：

您将脚本放在需要的标记之后： <!doctype html> <html lang="en"> <head> <title>Dom examples</title> </head> <body> <h4> DOM practise page </h4> <p id="one"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> <script> var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); </script> </body> </html>
制作function并使用onload属性，这是优选的，因为代码可以重复用于其他功能： <!doctype html> <html lang="en"> <head> <title>Dom examples</title> <script> function myFunction() { var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); } </script> </head> <body> <h4> DOM practise page </h4> <p id="one" onload="myFunction()"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> </body> </html>

在html中使用getelementbyid获取Null类型的错误

7 个答案: