javascript - 使用JS从DOM中选择元素

该选择器doc.getElementsByClassName('value')需要定位td元素,该元素是另一个td的下一个兄弟姐妹,该文本的文本为“在此处签名”,以便将图像附加在“ abc:”之后。

怎么做到呢?谢谢

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元素之后,其文本等于“在这里签名”

最佳答案

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

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


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



<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>