我不知道為什么我的控制臺告訴我結果未定義。我正在學習 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>uj5u.com熱心網友回復：
- 當腳本在 head 中運行時，元素不存在。將腳本移動到元素之后
- 從變化
.main到main在getElementsByClassName 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>uj5u.com熱心網友回復：
- 將您的腳本移至正文
document.getElementsByClassName回傳 HTML 元素的集合，而不是單個元素- 與
document.getElementsByClassName你應該通過main，不.main - 帶有類的 div 的 textContent
main可能不是您期望的 - 要通過其類名或標簽名獲取單個元素，您還可以使用
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/346170.html
標籤：javascript dom