javascript - JS : Why this code isn´t changing when clicked on?

Question

我正在测试“JavaScript 权威指南”(Flanagan，O' Reilly)一书中的示例。

并且无法理解两件事:

1. 为什么要在此行末尾添加 [0]:var title = elt.getElementsByClassName("handle")[0];

2. 为什么不工作？

I've pasted the code in JSFiddle .

这是代码:

HTML

<div class="reveal">
    <h1 class="handle">Click here!</h1>
    <p>Parrafo escondido!</p>
</div>

CSS

.reveal *{display:none;}
.reveal *.handle {display:block; color:red;}

JS

//esperamos a que el doc cargue completamente
window.onload = function() {
    //buscar todos los elementos con la clase 'reveal'
    var elements = document.getElementsByClassName("reveal");
    //para cada uno..
    for (var i = 0; i < elements.length; i++) {
        var elt = elements[i];
        //buscamos en cada elemento encontrado la clase 'handle'
        var title = elt.getElementsByClassName("handle")[0];
        //revelar el resto del contenido cuando el elemento es clickeado
        title.onclick = function() {
            if(elt.className == "reveal") elt.className = "revealed";
            else if(elt.className == "revealed") elt.className = "reveal";
        }
    }
};

Answer 1

问题的答案:为什么要在这一行的末尾添加 [0]

document.getElementsByClassName ，它返回具有任何给定类名的所有子元素的数组。

因此，我们需要使用索引来获取元素。因此 [0] 被添加到获取具有类的第一个元素

参见 Demo ，你的代码有效，不使用换行