Question

我正在测试“JavaScript the definite guide”一书中的一个例子（Flanagan，O'Reilly）。

无法理解两件事：

为什么在此行的末尾添加[0]：var title = elt.getElementsByClassName("handle")[0];
为什么不工作？

这是代码：

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]添加了第一个带有类

的元素

SEE Demo，您的代码有效，不使用换行

Answer 2

末尾有一个[0]

var title = elt.getElementsByClassName("handle")[0];

因为getElementsByClassName方法返回文档中所有元素的数组，因此要访问数组的第一个元素，请使用下标（[]）来访问第一个元素。

getElementsByClassName返回数组而不是getElementById的原因是因为id是唯一的，所以只有一个，但允许一个类（实际上是将）多次使用，因此返回使用该类的每个元素的数组。

至于代码，它确实是正确的但是在你的JSFiddle上你选择了onload并且你已经将代码包装在onload函数中。要解决此问题，您可以删除window.onload包装器，也可以更改脚本在JSFiddle中加载到No wrap in -<head>的方式。显然，删除window.onload包装器意味着代码将在普通网站中失败，因为DOM尚未加载。

Answer 3

试试这个：

function addEvent(elt){
        //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";
        }
}

window.onload = function(){
//esperamos a que el doc cargue completamente
    //buscar todos los elementos con la clase 'reveal'
    var elements = document.getElementsByClassName("reveal");
    //para cada uno..
    for (var i=0; i<elements.length; i++) {
        addEvent(elements[i]);
    }
};

演示：http://jsfiddle.net/q8AQn/5/

Answer 4

虽然不确定您希望通过代码实现什么，但仍然回答您的第一个问题是 - document.getElementsByClassName或document.getElementByName或任何其他文档（点）函数....返回一个数组，以便访问数组上需要添加[0]的第一个元素。

JS：为什么这个代码在点击时没有改变？

4 个答案: