如何在 javascript 中获取 document.getElementsByTagName("...") 的值？答案

【问题标题】：How do i get the values of document.getElementsByTagName("...") in javascript?如何在 javascript 中获取 document.getElementsByTagName("...") 的值？
【发布时间】：2021-06-18 12:33:04
【问题描述】：

我的代码示例：

var abc = document.getElementsByTagName("h2");
var def = document.getElementsByTagName("p");

我的 html 文件中有两个 h2 元素和 4 个 p 元素。

我怎样才能得到每个元素的整个字符串。我试过了

var test = abc[0].nodeValue();

但那是不正确的。

很高兴得到任何帮助。

【问题讨论】：

阅读innerHTML或textContent？
也许innerText?
Uncaught TypeError: abc[0].nodeValue is not a function 你应该在没有() 的情况下使用abc[0].nodeValue

标签： javascript arrays string

【解决方案1】：

var abc = document.getElementsByTagName("h2");
var def = document.getElementsByTagName("p");

for(let h2 of abc){
    console.log(h2.textContent);
}

for(let p of def){
    console.log(p.textContent);
}

<h2>h2 1</h2>
  <p>para 1</p>


<h2>h2 2</h2>
  <p>para 2</p>
  <p>para 3</p>

【讨论】：

【解决方案2】：

您可以使用textContent获取Node的值。

var abc = document.getElementsByTagName("h2");
var def = document.getElementsByTagName("p");

const headerTexts = [...abc].map(node => node.textContent);
const paraTexts = [...def].map(node => node.textContent);

console.log(headerTexts);
console.log(paraTexts);

<h2>h2 first</h2>
<h2>h2 second</h2>

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>

【讨论】：

您能否解释一下为什么nodeValue 不起作用？