javascript 和 dom 操作

Question

我的目标是在单击按钮时删除和/或移动页面上按钮的父元素。 DOM 似乎没有响应我的点击事件。我认为这与范围和全局变量有关，但我仍然是新手。这是我的代码的样子。

var startButton = document.querySelectorAll('button[data-action="start"]');
var deleteButton = document.querySelectorAll('button[data-action="delete"]');
var element = document.getElementsByTagName('section');
var firstChildElement = element.firstChild;

startButton.addEventListener("click", toStart);
deleteButton.addEventListener("click", deleter);

/*function declarations*/
function toStart() {
  element.insertBefore(this.parentNode, firstChildElement);
}

function deleter() {
  element.removeChild(this.parentNode);
}

<section>
  <article>
    <h2>Item One 😇</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Two 👿</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Three 👻</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
</section>

Answer 1

那是因为你正在使用 querySelectorAll() ，它返回一个 node list (一组节点)并且您不能在一组上添加事件监听器(调用 .addEventListener())。您只能在单个节点上执行此操作。 .getElementsByTagName()也是如此.它还返回一个节点列表，您不能请求节点列表的 .firstChild。只能在节点上调用。

您可以使用 .querySelector()而不是只获取与选择器匹配的第一个节点。

现在，如果您想在所有按钮上设置事件，则需要遍历节点列表并为每个按钮调用 .addEventListener()。

但是，由于您希望在所有按钮上使用相同的监听器，因此使用 event delegation 会更高效且代码更少，由此我们允许事件“冒泡”到祖先元素，并在更高级别的元素上仅拦截一次事件。然后，我们可以在较低级别检查哪个元素实际触发了事件并采取相应行动。

// We're going to let all click events within the section be handled at the section level
// instead of setting up the same handlers on multiple elements.
let sec = document.querySelector("section");
sec.addEventListener("click", handleClick);

// When the event bubbles up to the section, this function will be called
// and it will automatically receive a reference to the event that triggered it
function handleClick(event){
  // The .target property of the event object refers to the lower-level ojbect
  // that actually initiated the event (either a start or delete button in our case).
  // We're going to need the nearest <article> ancestor of the button that was clicked
  // The closest() method finds the nearest ancestor element that matches the selector
  let art = event.target.closest("article");

  // We can check what the source of the event was and act accordingly
  // Since you've used data-* attributes, use the dataset API to test them
  if(event.target.dataset.action === "start"){
    toStart(art);
  } else if(event.target.dataset.action === "delete") {
    deleter(art);
  }
}

/*function declarations*/
function toStart(element){
  element.parentNode.insertBefore(element, element.parentNode.firstChild);
}

function deleter(element){
  element.parentNode.removeChild(element);
}

<section>
  <article>
    <h2>Item One 😇</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Two 👿</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Three 👻</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
</section>