使用JavaScript更改锚文本

Question

我正在尝试更改锚标记的文本。 在此之前，我先定位了其中的DIV，然后定位了该DIV中的定位标记。 但是在锚标记上没有任何div或分配的ID，我迷路了。 这是我到目前为止的内容：

HTML：

<a href="#" class="small quality hide-forsmall" >Link Text</a>

JavaScript的：

var anchor=document.getElementsByClassName("quality");
anchor.innerHTML="Changed Text";

Answer 1

要获得具有该特定类名的每个元素，您需要遍历集合。 这是一个简单的示例：

http://jsfiddle.net/QU7Kv/1/

<a href="#" class="small quality hide-forsmall" >Link Text</a>


<script>
    (function (){
        var anchor=document.getElementsByClassName("quality");
        for(var i = 0; i < anchor.length; i++){
            anchor[i].innerHTML="Changed Text";
        };
     })()
</script>

Answer 2

document.getElementsByClassName返回与类名称匹配的元素的HtmlCollection 。

要获得第一个用途：

document.getElementsByClassName("quality")[0];

要更改所有匹配元素中的文本，请对其进行迭代，类似于：

for(var i = 0; i < anchor.length; i++){
    anchor[i].innerHTML="Changed Text";
}

或者，您也可以使用querySelector（） ，它仅返回第一个匹配项，因此仅返回单个元素，类似于：

var anchor=document.querySelector(".quality");

Answer 3

document.getElementsByClassName("quality");

方法getElementsByClassName返回HTMLCollection ，而不是单个节点。 如果要访问第一个结果，请尝试以下操作：

var anchor = document.getElementsByClassName("quality")[0];
anchor.innerHTML = "Changed Text";

有关getElementsByClassName更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/API/document.getElementsByClassName

Answer 4

getElementsByClassName返回HTMLCollection 。 请参考https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName 。