Question

我有HTML文件：

<div class="um-field-area">
    <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value4</div>
</div>
<button onclick="Function()">Whatever</button>
<div id="result"></div>

我希望函数使用“ um-field-value”类的所有四个div取值

<div class="um-field-value">Value1</div>

然后将它们放在Div的“结果”中

本质上，我希望脚本简单地复制um-field-value类中给定的值并将其粘贴到“结果” div中。我尝试了以下操作：

function Function() {
    var x = document.getElementsByClassName("um-field-value");
    document.getElementsById('result').innerHTML = x;
}

但这根本不起作用。

我对编码有些陌生，所以我不确定是否可以编码。 Google搜索了一个多小时，但找不到任何解决方案。

Answer 1

document.getElementsByClassName本身就是HTML节点，但是您必须从HTML节点中提取值，将它们组合起来，然后将其设置为结果div。下面的示例片段：

function myFunction() {
    var valueNodes = Array.prototype.slice.call(document.getElementsByClassName("um-field-value"));
    var values = valueNodes.map(valueNode => valueNode.innerHTML);
    var result = values.join(' ');
    document.getElementById('result').innerHTML = result;
}

<div class="um-field-area">
    <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value4</div>
</div>
<button onclick="myFunction()">Whatever</button>
<div id="result"></div>

Answer 2

使用querySelectorAll获取具有此类um-field-value的所有dom，然后对其进行迭代以获取innerHTML

您的代码中有一个错字。它是getElementById而不是getElementsById。还有一个额外的s

function Function() {
  var x = document.querySelectorAll(".um-field-value");
  let result = '';
  for (var y = 0; y < x.length; y++) {
    result += x[y].innerHTML;
  }
  document.getElementById('result').innerHTML = result;
}

<div class="um-field-area">
  <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
  <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
  <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
  <div class="um-field-value">Value4</div>
</div>
<button onclick="Function()">Whatever</button>
<div id="result"></div>

Answer 3

您处在正确的轨道上。 document.getElementsByClassName将返回NodeList。您需要为该列表中的每个元素获取innerText。根据浏览器的不同，您可以使用forEach或常规for循环遍历列表。

function Function() {
    var fieldsList = document.getElementsByClassName("um-field-value");
    var fieldValues = [];
    fieldsList.forEach(function(field) { fieldValues.push(field.innerText) });
    document.getElementsById('result').innerHTML = fieldValues.join(", ");
}

Answer 4

这是一个简单易读的解决方案，它使用循环在每个元素内获取文本并将其添加到字符串中。 getElementsByClassName返回找到的所有元素的数组，因此需要循环才能使用textContent在每个元素内获取文本。

function Function() {
    var result = '';
    var fields = document.getElementsByClassName("um-field-value");
    for (var i=0; i<fields.length; i++) {
        result += fields[i].textContent + '\n';
    }
    document.getElementById('result').innerHTML = result;
}

<div class="um-field-area">
    <div class="um-field-value">Value1</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value2</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value3</div>
</div>
<div class="um-field-area">
    <div class="um-field-value">Value4</div>
</div>
<button onclick="Function()">Whatever</button>
<div id="result"></div>

将类值复制到Div

4 个答案: