javascript - 获取类中的 tagName 元素

Question

我想获取a内部类的元素并进行更改。

我的 HTML 是：

<div class="alignleft">
    <a href="http://cismdomain.com/articles/page/2/">« Older Entries</a>
</div>

Older Entries我想改成Previous。

我的 JavaScript 代码是：

var oldentries = document.querySelector('.alignleft');
var ainside = document.getElementsByTagName('a');
oldentries.ainside.innerHTML = "Previous";

但这给了我undefined。

Answer 1

一旦你使用Document.querySelector()来获取带有类的元素，'.alignleft'你也可以oldentries.querySelector('a');在其中获取'a'元素oldentries，然后更改element.innerHTML：

var oldentries = document.querySelector('.alignleft'),
    ainside = oldentries.querySelector('a');

ainside.innerHTML = 'Previous';

<div class="alignleft">
  <a href="http://cismdomain.com/articles/page/2/">« Older Entries</a>
</div>

Answer 2

您需要更新元素的textContent属性。<a>

工作示例：

var linkElement = document.querySelector('.alignleft a');
linkElement.textContent = 'Previous';

<div class="alignleft">
<a>Older Entries</a>
</div>

Answer 3

document.getElementsByTagName返回一个 HTML 集合。因此，您需要对其进行迭代（在您的情况下，它将是第一个条目）。

var oldentries = document.querySelector('.alignleft');
var ainside = document.getElementsByTagName('a');
for(i=0;i<ainside.length;i++) {
    ainside[i].innerHTML = "Previous";
}

Answer 4

您可以使用更精确的选择器通过对 querySelector 的信号调用来查找您的元素：直接使用.alignLeft a而不是执行两次。

此代码有效：

var entries = document.querySelector('.alignLeft a');
entries.innerHTML = "Previous"

Answer 5

您的代码将呈现为类似

document.querySelector('.alignleft').document.getElementsByTagName('a').innerHTML = "Previous";

此外，getElementsByTagName('a')将呈现 Array 而不是您可以应用的对象.innerHTML。

var ainside = document.querySelector('.alignlef a'); // Select first occurance of a inside the first occurance of .alignleft in the document

ainside.innerHTML = "Previous";