遍历 h3 元素

Question

各位。我想制作一个 for 循环输出我的 h3 元素。我可以为其中一个做这件事，但要拥有所有这些，它不会输出内容。循环中的 a 用于在长页面中制作我的 h3 的内部链接。

function showH() {
  var x = document.getElementsByTagName("H3");

  let str = '<a href="">';
  for (var i =0; i < x.length; i++) {
    str += x[i] + "</a>";
  }
  document.getElementById("get").innerHTML = str;
}

<p id="get"></p>
<button onclick="showH()">click</button>

此代码输出：

[object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement][object HTMLHeadingElement]

Answer 1

x 是一个 HTMLHeadingElements 数组。要获取文本，请使用 .innerText.

您的 for 循环中也有一些错误的逻辑。第一个 link 将始终有效，但之后的 link 将无法正确呈现，因为 link 标记的开头设置为 str 并且再也不会添加。

function showH() {
  var x = document.getElementsByTagName("H3");
  var str = "";
  for (var i = 0; i < x.length; i++) {
    str += '<a href="">' + x[i].innerText + "</a>";
  }
  document.getElementById("get").innerHTML = str;
}

<h3>Hello</h3>
<h3>World</h3>
<h3>!</h3>
<p id="get"></p>
<button onclick="showH()">click</button>

遍历 h3 元素

Loop through h3 elements

javascript

for-loop

getelementsbytagname