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

Question

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

Som*_*ave 2 html javascript dom dom-events

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Gil*_*add 7

将点击事件添加到列表项
在处理程序中，检索“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);
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年前
查看次数：	8776 次
最近记录：	4 年，6 月前