Javascript 如何从单击元素的相关节点获取innerHTML/innerText？_Javascript_Html_Dom_Dom Events

Javascript 如何从单击元素的相关节点获取innerHTML/innerText？

javascript html dom

Javascript 如何从单击元素的相关节点获取innerHTML/innerText？,javascript,html,dom,dom-events,Javascript,Html,Dom,Dom Events,我希望从我单击的HTML文档中单击的元素中获取特定的innerText 相应的HTML如下所示： !DOCTYPE html> <html> <head> <title>Some title</title> </head> <body> <ul class="categories"> <li> <a href="http://www.

我希望从我单击的HTML文档中单击的元素中获取特定的innerText

相应的HTML如下所示：

!DOCTYPE html>
<html>
<head>
    <title>Some title</title>
</head>
<body>
    <ul class="categories">
        <li>
            <a href="http://www.example2.com/1">
            <div>
                <img src="http://www.example.com/someSource">
                <span>First</span>
            </div>
            </a>
        </li>

        <li>
            <a href="http://www.example2.com/1">
            <div>
                <img src="http://www.example.com/someSource">
                <span>Second</span>
            </div>
            </a>
        </li>

    </ul>
</body>
</html>

我的问题是，我不知道如何定义I，或者是否有比.path[I]更适合使用的东西。取决于我是单击图像还是单击文本。

function init(){
document.addEventListener('click', function(e) {
  var link = e.target.closest('a');
  if(!link)return;
  e.preventDefault();
  var text = link.textContent;
  alert(text);

  return spanText;
  });
}

init();

将单击事件添加到列表项中
在处理程序中，检索“span”子级并获取其文本

var lis=document.querySelectorAll（'.categories li'）；
lis.forEach（功能（el）{
el.addEventListener（'click'，onClick，false）；
})
函数onClick（e）{
var li=e.currentTarget；
var span=li.querySelector（'span'）；
console.log（span.innerText）；
}

将单击事件添加到列表项中
在处理程序中，检索“span”子级并获取其文本

var lis=document.querySelectorAll（'.categories li'）；
lis.forEach（功能（el）{
el.addEventListener（'click'，onClick，false）；
})
函数onClick（e）{
var li=e.currentTarget；
var span=li.querySelector（'span'）；
console.log（span.innerText）；
}

您可以检查单击的具体元素，然后返回其文本。如果您想获得一些附加信息，请使用

data-

attributes并阅读

target.dataset

document.addEventListener（'click'，函数（e）{
var目标=e.target；
如果（target.tagName==='SPAN'）{
log（target.innerText）；
返回target.innerText；
}
}，假）





您可以检查单击的具体元素，然后返回其文本。如果您想获得一些附加信息，请使用data-
attributes并阅读target.dataset


document.addEventListener（'click'，函数（e）{
var目标=e.target；
如果（target.tagName==='SPAN'）{
log（target.innerText）；
返回target.innerText；
}
}，假）





如果结构一致，那么
元素的数量将始终与



如果结构一致，那么
元素的数量将始终与



如果用户单击图像会发生什么？检查不会通过'if（target.tagName=='SPAN'）。你想要达到什么样的行为？我可能误解了这个问题，但我认为OP想要点击链接以返回span中的单词。（即，不单击span返回span中的单词）。如果用户单击图像会发生什么情况？检查将不会通过'if（target.tagName=='span'）。你想要达到什么样的行为？我可能误解了这个问题，但我认为OP想要点击链接以返回span中的单词。（即，不点击span返回span中的单词）。如果用户点击图像会发生什么？如果用户点击图像会发生什么？
function init(){
document.addEventListener('click', function(e) {
  var link = e.target.closest('a');
  if(!link)return;
  e.preventDefault();
  var text = link.textContent;
  alert(text);

  return spanText;
  });
}

init();