JS中如何获取<h2>元素内<a>元素的id？

Question

考虑以下示例：

<h2><a id="anchorid"><a/> Hello world!</h2>

我正在尝试获取里面的文本和a的id。此时我只得到文本，但 id 是未定义的。问题是如何获取另一个元素内元素的id？

吼我的尝试：

  var anchor = document.getElementsByTagName("h2"); //take all h2
  var headings = Array();
  headings.push(anchor)

  for (var i = 0; i < anchor.length; i++) {
    var c = document.body.children; //take all children, hopegully anchors
    if (c.nodeName == "A"); { //if the el is anchor
      var id = c.id; // get the the id of each anchor
      var text = "";
      var text = anchor[i].innerHTML;
      // if(id!="" ){
      document.write("<br>----------------------------Id of anchor- " + id + "<br>Text of h2--" + text + "<br>------------------------");
    }
  }

我的文件中有很多标题，因此我将它们放在一个 array() 中，这样我就可以循环显示每个人的文本。

请大家提点建议！非常感谢您的帮助

Answer 1

改进了您的代码并稍微修复了使用的变量，并且：

var anchor = document.getElementsByTagName("h2"); //take all h2

for (var i = 0; i < anchor.length; i++) {

  var children = anchor[i].children; //take all children, hopegully anchors  
  for (var ch = 0; ch < children.length; ch++) {
    var c = children[ch];
    if (c.nodeName == "A"); { //if the el is anchor    
      var id = c.id; // get the the id of each anchor
      var text = "";
      var text = anchor[i].innerHTML;
      console.log(id, text);
    }
  }
}

<h2>
  <a id="anchorid">Hello world!</a></h2>

但请注意，这仅适用于 h2 标签的直接子代。

Answer 2

我认为你可以用更少的代码实现你的目标。

var i, anchors = document.querySelectorAll('h2 > a');
for (i = 0; i < anchors.length; i += 1) {
    var a = anchors[i];
    console.log(a.id, a.parentElement.innerText);
}

如果您不确定，a 是 h2 的第一个 child，您可以使用以下选择器：

document.querySelectorAll('h2 a');

JS中如何获取<h2>元素内<a>元素的id？

How to get the id of <a> element inside <h2> element in JS?

javascript

arrays

getelementsbytagname