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

Question

I Don't khow why my console is telling me that the result is undefined.I am learning DOM and found the problem on my first code which i don't understand我不知道为什么我的控制台告诉我结果未定义。我正在学习 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>

Answer 1

The elements doesn´t exist when the script runs in head.当脚本在头部运行时，元素不存在。 Move the script to after the elements将脚本移动到元素之后
Change from .main to main in getElementsByClassName在getElementsByClassName从.main更改为main
getElementsByClassName returns a list so add [0] to getElementsByClassName("main") to get the first element 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>

Answer 2

Move your script to the body将您的脚本移至正文
document.getElementsByClassName returns a collection of HTML elements, not a single element document.getElementsByClassName返回 HTML 元素的集合，而不是单个元素
with document.getElementsByClassName you should pass main , not .main使用document.getElementsByClassName你应该通过main ，而不是.main
the textContent of the div with class main is probably not what you expect类main的 div 的 textContent 可能不是您期望的
to get an single element by its class name or its tag name, you can also use querySelector which is more simple (but slower) Here is a working version :要通过其类名或标签名获取单个元素，您还可以使用更简单（但速度较慢）的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>

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

问题描述

2 个解决方案

解决方案1
0 2021-10-28 18:49:43

解决方案2
0 2021-10-28 18:51:32

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

问题描述

2 个解决方案

解决方案1 0 2021-10-28 18:49:43

解决方案2 0 2021-10-28 18:51:32

解决方案1
0 2021-10-28 18:49:43

解决方案2
0 2021-10-28 18:51:32