Question

请帮助我，因为我现在正在学习JS，由于某些原因querySelector无法正常工作网站：

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="../testimgs/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">

  </head>
  <body>

    <h1>the test new </h1>
  </body>

  <footer>
    www ? App Brewery ? com
  </footer>
</html>

然后我打开google chrome控制台并使用此小脚本但无法正常工作：

var h1 =document.querySelector("h1");

问题在于变量h1什么也没有得到，并且为空且为空

Answer 1

在下面看看。控制台日志显示它正在选择您的<h1>，代码应选择您的h1，只要这是您要执行的操作即可：

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>Dicee</title>
		<link rel="stylesheet" href="../testimgs/styles.css">
		<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
	</head>
	<body>
		<h1>the test new </h1>
		<footer>
			www ? App Brewery ? com
		</footer>
		<script>var h1 =document.querySelector("h1"); console.log(h1);</script>
	</body>
</html>

如果您要这么做，只需删除console.log(h1);。

Answer 2

谢谢大家，我的观点是对的，它终于奏效了。如果我直接从Dream Waver上运行网站并尝试使用控制台来实现该问题，当我直接从wamp服务器目录。文件夹工作顺利。谢谢大家

JS querySelector即使代码也无法正常工作

2 个答案: