javascript - 如果文本不在 html 标签内，如何在单击时获取文本值？

Question

屏幕上有如下所示的 html。

屏幕:

target1 target2 target3 target4

代码:

<div>
  target1
  <span>target2</span>
  <span>target3</span>
  target4
</div>

当我点击target4时，我想获取文本“target4”

你如何处理它？<​​/p>

Answer 1

这回答了您的两个问题

var div = document.querySelector("div"); // get the div wrapper
div.childNodes.forEach(function(node) { // loop over the nodes
  var text = node.textContent; // get the text
  if (node.nodeName=="#text" && text.trim()!="") { // if text and not empty 
    var span = document.createElement("span"); // wrap in a span
    span.textContent = node.textContent.trim();
    node = div.replaceChild(span,node);
  }
});
div.onclick=function(e) {
  console.log(e.target.textContent); 
}

span { color:red }

<div>
  target1
  <span>target2</span>
  <span>target3</span>
  target4
</div>