Question

我有以下HTML：

<span class="testClass1" >
  <a href="testlink.com">wanted Text</a>
  <a class="ctx" href="#"></a>
</span>

现在我要获取文字"wanted Text"。我怎样才能做到这一点？

我尝试过：

document.getElementsByClassName("testClass1");

我也试过document.getElementsByTagName()，但我不知道如何正确使用它们。

Answer 1

您可以使用querySelectorAll

因此：

document.querySelectorAll('.testclass1 a')

将返回<a>

的所有.testclass1项子项

摘录示例：

＆＃13;

var elements = document.querySelectorAll('.testClass1 a')

console.log(elements) // open the console to see this
console.log(elements[0].text) // this gets the first <a> text `wanted Text`

＆＃13;

<span class="testClass1" >
  <a href="testlink.com">wanted Text</a>
  <a class="ctx" href="#"></a>
</span>

＆＃13;

Answer 2

getElementsByClassName()函数返回一个匹配元素数组，所以如果你需要访问它们，你可以使用循环来实现：

// Get each of the elements that have the class "testClass1"
var elements = document.getElementsByClassName("testClass1");
// Iterate through each element that was found
for(var e = 0; e < elements.length; e++){
     // Get the inner content via the innerHTML property
     var content = elements[e].innerHTML;
}

如果您需要在编辑指示的某些元素下方直接访问<a>标记，那么您可以使用getElementsbyTagName()函数搜索与现有元素相关的那些元素：< / p>

// Get each of the elements that have the class "testClass1"
var elements = document.getElementsByClassName("testClass1");
// Iterate through each element that was found
for(var e = 0; e < elements.length; e++){
     // Find the <a> elements below this element
     var aElements = elements[e].getElementsByTagName('a');
     // Iterate through them
     for(var a = 0; a < aElements.length; a++){
        // Access your element content through aElements[a].innerHTML here
     }
}

您还可以使用squint's评论或Fred's等利用querySelectorAll()函数的方法，因为getElementsByClassName()和getElementsByTagName()可以更好地提供服务访问多个元素而不是一个特定的元素。

Answer 3

试试这个：

document.getElementsByClassName("testClass1")[0].getElementsByTagName('a')[0].innerText

Answer 4

var testClass1 = document.getElementsByClassName("testClass1");
console.log(testClass1[0].innerHTML);

获取没有id的元素值

4 个答案: