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

【问题标题】：How to get the innerHTML/innerText from a related node of a clicked element?如何从点击元素的相关节点获取innerHTML/innerText？
【发布时间】：2023-03-19 15:14:02
【问题描述】：

我想从我单击的 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>

Javascript 函数应根据点击的链接返回“First”或“Second”。

我的基本思路是添加一个事件监听器，并使用返回的事件来获取span元素的内容：

function(){
  document.addEventListener('click', function(e) {
    e = e || window.event;
    var spanText= e.path[i].innerText; //Don't know how to assign i correctly
    return spanText;
    }, false);
}

我的问题是我不知道如何定义 i 或者是否有比 .path[i] 更合适的东西来使用。取决于我点击的是图片还是文字。

【问题讨论】：

标签： javascript html dom dom-events

【解决方案1】：

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

var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
  el.addEventListener('click', onClick, false);
})

function onClick(e) {
  var li = e.currentTarget;
  var span = li.querySelector('span');
  console.log(span.innerText);
}

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

【讨论】：

【解决方案2】：

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();

【讨论】：

如果用户点击图片会发生什么？

【解决方案3】：

您可以检查单击了哪个具体元素，然后返回其文本。如果您想了解更多信息，请使用data- 属性并阅读target.dataset 来阅读它。

  document.addEventListener('click', function(e) {
    var target = e.target;

    if(target.tagName === 'SPAN') {
        console.log(target.innerText);  
        return target.innerText;
    }
    
  }, false);

<ul class="categories">
        <li>
            <a href="#">
            <div>
                <img src="http://www.example.com/someSource">
                <span>First</span>
            </div>
            </a>
        </li>

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

    </ul>

【讨论】：

如果用户点击图片会发生什么？
检查不会通过`if(target.tagName === 'SPAN')。你想达到什么行为？
我可能误读了这个问题，但我认为 OP 希望单击 link 以返回跨度中的单词。（即，不是点击跨度来返回跨度中的单词）。

【解决方案4】：

如果结构一致，则<span> 元素的数量将始终与<a> 元素的数量相同。

因此，如果您知道用户刚刚点击了第二个<a>，您就会知道您需要返回的<span> 是第二个<span>。

工作示例：

var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');

function getTextContent(e) {
    e.preventDefault();
    var linksArray = Array.prototype.slice.call(links);
    var index = linksArray.indexOf(this);
    console.log(spans[index].textContent);
}

links.forEach(function(link){
    link.addEventListener('click', getTextContent, false);
});

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

【讨论】：

【解决方案5】：

对不起，我的语言不好..

我迟到了。

也许它会帮助别人；

window.addEventListener("click", (event) => { //dblclick    
  let div = event.target.innerText; // <-- the code you want
  window.onClick(div);
});

还有..

function onClick(div) {
   console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}

你想要的代码：let div = event.target.innerText;

【讨论】：