Question

我想为div设置值，我尝试了很多方法但是所有这些都没有用。我认为语法是正确的，因为我进行了大量的研究

.flip3d2{width:100px;height:100px;margin:10px; float:left;}
.flip3d2  .front{
position:absolute;
-webkit-transform:perspective(600px) rotateY(0degdeg);
transform: perspective(600px) rotateY(0deg);
background:#fc0;width:100px;height:100px;border-radius:7px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:-webkit-transform .5s linear 0s;
transition:transform .5s linear 0s;
}

.flip3d2  .back{
position:absolute;
-webkit-transform:perspective(600px) rotateY(180deg);
transform: perspective (600px) rotateY(180deg);
background:#80bfff;width:100px;height:100px;border-radius:7px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:-webkit-transform .5s linear 0s;
transition:transform .5s linear 0s;
}

.flip3d2:hover  .front
{
-webkit-transform:perspective(600px) rotateY(-180deg);
transform:perspective(600px) rotateY(-180deg);
}

.flip3d2:hover  .back
{
-webkit-transform:perspective(600px) rotateY(0deg);
transform:perspective(600px) rotateY(0deg);
}
</style>

<script>


var list = document.getElementsByClassName("mainwindow");
var list2=list.getElementsByClassName("flip3d2");
list2.getElementsByClassName("front").value = "red";
    list2.getElementsByClassName("front").text = "red";
list2.getElementsByClassName("front").innerHTML = "red";
</script>
</head>
<body>
<div class="mainwindow">
<div class="flip3d2">
<div class="back"> box 2 - back</div>
<div class="front"> box 2 - front</div>

</div>
</div>
</body>
</html>

尝试了三种方法来设置div的值，但没有人工作。

Answer 1

getElementsByClassName返回一个HTMLcollection（它是一个类似于object的数组，可以包含多个元素）对象，而不是直接的dom引用，因此它没有像innerHTML这样的属性。

如果你确定只有1个元素，那么你可以使用索引访问dom引用，否则你可以遍历集合并设置内容。

var list = document.getElementsByClassName("mainwindow")[0];
var list2 = list.getElementsByClassName("flip3d2")[0];
list2.getElementsByClassName("front")[0].innerHTML = "red";

//to loop
//var els = list2.getElementsByClassName("front");
//for(var i = 0; i <  els.length; i++){
//  els[i].innerHTML = 'something'
//}

.flip3d2 {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}
.flip3d2 .front {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(0degdeg);
  transform: perspective(600px) rotateY(0deg);
  background: #fc0;
  width: 100px;
  height: 100px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3d2 .back {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(180deg);
  transform: perspective (600px) rotateY(180deg);
  background: #80bfff;
  width: 100px;
  height: 100px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3d2:hover .front {
  -webkit-transform: perspective(600px) rotateY(-180deg);
  transform: perspective(600px) rotateY(-180deg);
}
.flip3d2:hover .back {
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}

<div class="mainwindow">
  <div class="flip3d2">
    <div class="back">box 2 - back</div>
    <div class="front">box 2 - front</div>
  </div>
</div>

Answer 2

直到class属性不需要是uniq，当你从中查询元素时，你将获得一个元素数组，注意getElementsByClassName中的“s”。

document.getElementsByClassName("front")[0].innerHTML = "red";

Answer 3

您的代码存在一些问题。正如Arun P Johny的回答所提到的，getElementsByClassName返回HTMLCollection，array-like object，而不是DOM节点。您会注意到getElement s ByClassName中的 s ，其中包含元素 s 的任何DOM方法都会返回HTMLCollection。像getElementById（没有 s ）这样的方法会返回单个DOM节点。

如果你习惯使用jQuery，jQuery提供了一个类似于数组的对象，它有一些方法可以操作整个集合，这可能就是为什么你会觉得你可以用DOM方法返回的集合做到这一点，但遗憾的是，您无法使用HTMLCollection s。

由于HTMLCollection类似于数组，因此您可以使用括号表示法访问其元素：

var list = document.getElementsByClassName("mainwindow")[0];
var list2 = list.getElementsByClassName("flip3d2")[0];
list2.getElementsByClassName("front")[0].textContent = "red";

或者您可以使用querySelector，它将返回基于CSS选择器的单个DOM元素：

var list = document.querySelector(".mainwindow");
var list2 = list.querySelector(".flip3d2");
list2.querySelector(".front").textContent = "red";

或者如果您不需要.mainwindow的引用，您可以这样做：

var list2 = document.querySelector(".mainwindow .flip3d2");

或者，如果您不需要引用.mainwindow或.flip3d2来进行其他事情，您可以这样做：

document.querySelector(".mainwindow .flip3d2 .front").textContent = "red"

您的代码的另一个问题是脚本标记位于您尝试访问的元素的HTML标记之上。在您致电getElementsByClassName时，这些元素不存在，因此您会获得一个空的HTMLCollection对象。移动<script>标记下方的<div>标记即可解决此问题。最好将脚本放在尽可能低的页面中，这有助于避免very common error以及improves the performance of your page。

其他一些事情，

HTMLDivElement没有.value属性，设置它没有任何意义（尽管它会创建expando property。
div没有.text属性，您可能正在寻找.textContent。
同时使用.textContent和.innerHTML是多余的。 .textContent将设置元素的文本，然后.innerHTML将立即覆盖它。如果您设置的是纯文本而没有任何标记，请使用.textContent。如果您从可靠的来源注入HTML（不是用户提供的，最多可以打开XSS attacks），您可以使用.innerHTML。

为什么我不能为div设置值？

3 个答案: