Javascript 如果文本不在html标记内，如何在单击时获取文本值？

屏幕上显示的html如下所示

屏幕：

target1 target2 target3 target4

代码：

目标1
目标2
目标3
目标4

当我点击target4时， 我想得到文本“target4”

---

如何处理它？

您可以获得上一个文本节点的值，这不是问题。不幸的是：

var x=document.getElementsByTagName（“div”）[0]； x、 addEventListener（“单击”，函数（e）{ log（e.currentTarget.childNodes[4].textContent）}）

目标1
目标2
目标3
目标4

您可以获取上一个文本节点的值，这不是问题。不幸的是：

var x=document.getElementsByTagName（“div”）[0]； x、 addEventListener（“单击”，函数（e）{ log（e.currentTarget.childNodes[4].textContent）}）

目标1
目标2
目标3
目标4

Scraapy已经回答了您的问题。但如果您可以控制HTML，则只需执行以下操作：

HTML

---

这样，您的代码更易于维护和使用。希望这有帮助

Scraapy已经回答了你的问题。但如果您可以控制HTML，则只需执行以下操作：

HTML

---

这样，您的代码更易于维护和使用。希望这有帮助

这回答了你的两个问题

var div=document.querySelector（“div”）；//取div包装器
forEach（函数（节点）{//在节点上循环
var text=node.textContent；//获取文本
if（node.nodeName==“#text”和&text.trim（）！=”）{//if text和not empty
var span=document.createElement（“span”）；//在span中换行
span.textContent=node.textContent.trim（）；
node=div.replaceChild（跨度，节点）；
}
});
div.onclick=函数（e）{
console.log（e.target.textContent）；
}

span{color:red}

目标1
目标2
目标3
目标4

这回答了你的两个问题

var div=document.querySelector（“div”）；//取div包装器
forEach（函数（节点）{//在节点上循环
var text=node.textContent；//获取文本
if（node.nodeName==“#text”和&text.trim（）！=”）{//if text和not empty
var span=document.createElement（“span”）；//在span中换行
span.textContent=node.textContent.trim（）；
node=div.replaceChild（跨度，节点）；
}
});
div.onclick=函数（e）{
console.log（e.target.textContent）；
}

span{color:red}

目标1
目标2
目标3
目标4

他只想在点击target4时显示target4。当我点击target4时，我想得到文本“target4”==>这个不能解决这个问题阅读答案

target4

是一个文本节点，不能添加事件侦听器。OP可以将文本包装在一个span中，将事件侦听器附加到div，并使用

event.target

捕获它，但使用当前标记，OP所要求的是不可能的。如果这是不可能的，这是唯一的解决方案。他只想在点击target4时显示target4。当我点击target4时，我想得到文本“target4”==>这个不能解决这个问题阅读答案

target4

是一个文本节点，不能添加事件侦听器。OP可以将文本包装在一个span中，将事件侦听器附加到div，并使用

event.target

捕获它，但使用当前标记，OP所要求的是不可能的。如果这是不可能的，这真的是唯一的解决方案。太棒了！我不知道你昨天在这里回答了。非常感谢。令人惊叹的！我不知道你昨天在这里回答了。非常感谢。

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

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

var el = document.querySelector("div");
  el.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});