getElementById 的替代方法 - 如何影响多个元素

Question

我试图突出显示段落中的所有单词，并在单击时将它们保持红色。现在我得到了一个词的工作，但其他的不会跟随。https://jsfiddle.net/q1z7Lnv0/

<p><span id="word" class="notclicked">test</span> <span id="word" class="notclicked">test</span></p>

Javascript ：

    var word = document.getElementById("word");
    word.onclick = function() {
      if(word.className == "clicked"){
            word.className = 'notclicked';
        }
      if(word.className == "onmouse"){
            word.className = 'clicked';
        }
    }
    word.onmouseover = function onMouse(){
        if(word.className != "clicked"){
        word.className = 'onmouse';
      }
    }
    word.onmouseout = function onMouse(){
        if(word.className != "clicked"){
        word.className = 'notclicked';
      }
    }

我知道问题是只能有一个同名的 id。但我不知道我还能用什么其他选择。

请帮忙！

Answer 1

使用这个：

document.getElementsByClassName('word');

在您的 html 中：

<span class='word'>text</span>

这样，您将获得所有具有类名"word"的元素，并且可以将事件绑定到类而不是元素。

您必须修改代码才能获得目标单词，并且仅从该单词中添加和/或删除点击类，而不是带有类"word"的所有单词

例如：

word.onclick = function(e) {
    if(e.target.className == "clicked"){
            e.target.className = 'notclicked';
    }if(e.target.className == "onmouse"){
        e.target.className = 'clicked';
    }
}

我不是 100% 确定您可以使用 Event 接口修改目标的类名，因此请将此示例作为伪代码而不是可复制粘贴的代码。

如果您不熟悉我作为函数中的参数放入的"e"，它是所有 javascript 事件的 Event 接口。它总是传递给事件函数，您可以使用它来获取有关事件的所有必要信息。

Answer 2

有不止一种方法可以做到这一点。一种方法可能是向要访问的元素添加类而不是 id。然后你可以得到他们 getElementsByClassName .

这是一个工作示例：https://jsfiddle.net/q1z7Lnv0/1/

Answer 3

您可以使用类代替id作为替代别名。