获取不带 id 的元素值

Get an element's value without an id

本文关键字：元素 id 获取      更新时间：2023-09-26

>我有以下HTML：

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

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

我尝试过：

document.getElementsByClassName("testClass1");

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

您可以使用 querySelectorAll

因此：

document.querySelectorAll('.testclass1 a')

将返回.testclass1的所有<a>项

代码段示例：

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`
<span class="testClass1" >
  <a href="testlink.com">wanted Text</a>
  <a class="ctx" href="#"></a>
</span>

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() 函数搜索每个现有元素中的那些标签：

// 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
     }
}

您还可以使用斜视评论或 Fred 评论等方法，它们利用querySelectorAll()功能，因为在访问多个元素而不是专门访问一个元素时，getElementsByClassName()和getElementsByTagName()会得到更好的服务。

试试这个：

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

var testClass1 = document.getElementsByClassName("testClass1");
console.log(testClass1[0].innerHTML);
相关文章：