时间戳

首页 > 解决方案 > 为什么说 Java 脚本中的类未定义？

javascript - 为什么说 Java 脚本中的类未定义？

问题描述

这里发生在我身上的是，当我试图查看“类内部”的父级时，它undefined在控制台中说，但是当我对 id 做同样的事情时，它显示了它的父级。为什么？使用所有这些东西有什么限制吗？我们需要做什么才能看到有班级的父母？

var a = document.getElementsByClassName("inner").parentElement;

console.log(a)

// var a = document.getElementById("inner").parentElement;

// console.log(a)
*{
  text-align:center;
}
.outer{
  background:hotpink;
  width:1000px;
  margin:0 auto;
  margin-top:8em;
  height:400px;
}
.inner{
  background:#FFFF99;
  width:800px;
    height:250px;
  margin:0 auto;
  display:flex;
  
}
#inner{
  background:#FFFF99;
  width:800px;
    height:250px;
  margin:0 auto;
  display:flex;
  
}
.a,.b,.c,.d{
  margin-left:6px;
  
  
  background:white;
  width:150px;
  height:130px;
  
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="outer">
    <h1>outer box</h1>
    <div class="inner" id="inner">
      <h1></h1>
      <div class="a">a</div>
      <div class="b">b</div>
      <div class="c">c</div>
      <div class="d">d</div>
    </div>
  </div>
  
</body>
</html>

标签： javascripthtmlcss

解决方案

因为getElementsByClassName返回一个类似数组的对象。您需要像数组一样循环或访问元素，例如：

var a = document.getElementsByClassName("inner")[0].parentElement;

console.log(a)

// var a = document.getElementById("inner").parentElement;

// console.log(a)
*{
  text-align:center;
}
.outer{
  background:hotpink;
  width:1000px;
  margin:0 auto;
  margin-top:8em;
  height:400px;
}
.inner{
  background:#FFFF99;
  width:800px;
    height:250px;
  margin:0 auto;
  display:flex;
  
}
#inner{
  background:#FFFF99;
  width:800px;
    height:250px;
  margin:0 auto;
  display:flex;
  
}
.a,.b,.c,.d{
  margin-left:6px;
  
  
  background:white;
  width:150px;
  height:130px;
  
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="outer">
    <h1>outer box</h1>
    <div class="inner" id="inner">
      <h1></h1>
      <div class="a">a</div>
      <div class="b">b</div>
      <div class="c">c</div>
      <div class="d">d</div>
    </div>
  </div>
  
</body>
</html>

推荐阅读