为什么控制台给我未定义的结果

我不知道为什么我的控制台告诉我结果未定义。我正在学习DOM，发现我的第一个代码的问题，我不理解

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let head = document.getElementsByClassName(".main");
console.log(head.textContent);
let tail = document.getElementsByTagName("p");
console.log(tail.textContent);
</script>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
</body>
</html>

脚本运行时元素不存在。将脚本移动到元素
getElementsByClassName中.main到main的变化
getElementsByClassName返回一个列表，因此将[0]添加到getElementsByClassName("main")以获得第一个元素

<div class="main">
<p>hello</p>
</div>
<script>
let head = document.getElementsByClassName("main")[0];
console.log(head.textContent);
let tail = document.getElementsByTagName("p")[0];
console.log(tail.textContent);
</script>

将脚本移动到正文
document.getElementsByClassName返回HTML元素的集合，而不是单个元素
与document.getElementsByClassName你应该通过main，而不是.main
类maindiv的textContent可能不是你期望的
通过类名或标签名获取单个元素，您也可以使用querySelector，这更简单(但速度较慢)这是一个工作版本:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<p>hello</p>
</div>

<script>
let head = document.querySelector(".main");
console.log(head.textContent);
let tail = document.querySelector("p");
console.log(tail.textContent);
</script>
</body>
</html>

相关内容

最新更新

热门标签：