如何在 JavaScript 中获取 span 标签父类名

Question

<div class="todo"> <h3>Have to understand js DOM</h3>
        <div class="ed-btn">
          <span id="delete" onclick="deleteTodo(event)"><i class="far fa-trash-alt"></i></a>
          </span>`; </div>
const deleteTodo = event => {   console.log(event.currentTarget); };

通过点击删除我刚刚发现的Todo(事件(

      <span id="delete" onclick="deleteTodo(event)"><i class="far fa-trash-alt"></i></a>

但是我怎样才能获得类"待办事项"或 h3 的内部内容？

Answer 1

单击文本"某些文本"以触发侦听器;)

非常简单：

parentElement允许您获取父元素。

className 将为你提供节点的类。

innerText会让你...内部文本;)

const deleteTodo = event => { 
  const target = event.currentTarget;
  const root = target.parentElement.parentElement;
  console.log('root class:', root.className);
  console.log('h3 content:', root.querySelector('h3').innerText); 
};

<div class="todo"> 
  <h3>Have to understand js DOM</h3>
  <div class="ed-btn">
    <span id="delete" onclick="deleteTodo(event)">
      <i class="far fa-trash-alt"></i>
      Some text
    </span>
  </div>
</div>

希望对您有所帮助！

Answer 2

如果你想访问标签的父级，你可以使用 parentElement 方法，如下所示：

document.getElementById("delete").parentElement

此处文档中的更多信息

但是，您可以直接访问 h3 或待办事项元素：

document.getElementsByClassName("todo")

更多关于这一点