首页 > 解决方案 > 使用纯javascript获取li框的第一个标签文本内容

问题描述

每当单击 li 框时,我都希望拥有我的 li 的(名称)的第一个标签。但目前我的代码只会显示被点击的标签。

这是 jsfiddle https://jsfiddle.net/ehagk1d7/的链接,因为完全相同的代码似乎在片段中不起作用。

    function test() {
        console.log(event.target.textContent);
    }
<li class="lijst" onclick="test()">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

标签: javascripthtml

解决方案


使用firstElementChild

function test(el) {
  alert(el.firstElementChild.textContent );
}
<li class="lijst" onclick="test(this)">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

如果您想保留事件元素,请使用currentTarget,它始终是您的函数的原始“节点”

function test() {
    console.log(event.currentTarget.firstElementChild.textContent);
}
<li class="lijst" onclick="test()">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>


推荐阅读