Question

此选择器doc.getElementsByClassName('value')需要定位td元素，该元素是另一个td的下一个兄弟，其中包含文本＆＃34;在此处签名＆＃34;以便在＆＃34; abc：＆＃34;之后附加图像。

怎么做？感谢

let w = window.open();
let doc = w.document;
doc.write(raw_html);
doc.close();
let sigImg = new Image();
sigImg.src = signature;
doc.getElementsByClassName('value').appendChild(sigImg); //wrong selector

有许多td和tr元素具有不同的类和值。

<tr>
  <td class="label">sign here</td>
  <td class="value">abc:</td>
</tr>

修改
元素索引事先不知道。只是它是另一个td元素，其文本等于＆＃34;在这里签名＆＃34;

Answer 1

document.getElementsByClassName返回HTMLCollection。使用括号表示法选择特定索引处的元素;例如，[0]选择返回集合的索引0的元素

doc.getElementsByClassName('value')[0].appendChild(sigImg);

要选择前一个元素文本包含"sign here"的元素，您可以迭代具有className "value"的所有元素，检查元素.previousElementSibling .textContent是否等于必需元素文本

＆＃13;

<table>
  <tbody>
    <tr>
      <td class="label">sign here</td>
      <td class="value">abc:</td>
    </tr>
    <tr>
      <td class="label">do not sign here</td>
      <td class="value">def:</td>
    </tr>
  </tbody>
</table>
<script>
  var sigImg = new Image;
  sigImg.src = "http://lorempixel.com/50/50";
  for (var elem of document.getElementsByClassName("value")) {
    if (elem.previousElementSibling.textContent === "sign here") {
      elem.appendChild(sigImg); break;
    }
  }
</script>

＆＃13;

Answer 2

由于会有很多td.label和td.value，我会选择每个td.label，然后通过他们将textContent与{{1}进行比较来循环然后抓住下一个要使用的元素。

"sign here"

这将找到您正在寻找的元素，并在var tdLabels = document.querySelectorAll("td.label"); var tdValue = null; for(var i=0; i<tdLabels.length; i++) { var td = tdLabels[i]; if(td.textContent=="sign here") { tdValue = td.parentNode.querySelector("td.value"); break; } } // use tdValue somehow, but null if not found中存储对它的引用。如果这样的元素不存在，它将被设置为tdValue。

使用JS从DOM中选择元素

2 个答案: