javascript - 通过事件访问 parentElement 属性

Question

我有一个名为 quote_div 的 div，它是 parentElement。它包含两个input type="number"元素，一个<label>我称为 r_lbl（变量名）的<label>元素和另一个称为 r_position 的元素（所以这是一个 div 中的四个元素）。

我在 div 上放置了一个事件侦听器，这样当任何一个input type="number"元素发生更改时，我都可以执行计算。

quote_div.addEventListener("change", calculateCost);

现在我正在尝试使用事件触发器 e（解析为 calculateCost(e) 函数）访问 div 上的 r_position 元素，但我得到一个未定义的错误，这很奇怪，因为我已经预定义了 r_position 的值。

console.log("li element position: " + e.target.parentElement.r_position.value);

难道就不能这样做吗？如果是这样，我有什么不明白的？

标签： javascripthtmldom

Answer 1

根据您的 HTML 结构，您可以使用NonDocumentTypeChildNode.previousElementSibling或NonDocumentTypeChildNode.nextElementSibling：

const div = document.getElementById('quote_div');

div.addEventListener('change', (e) => {
  const target = e.target;  
  const label = target.previousElementSibling;
  
  console.log(label.innerText);
});

<div id="quote_div">
  <label class="r_lbl" for="input1">Label 1</label>
  <input id="input1" type="number" />
  
  <label class="r_position" for="input2">Label 2</label>
  <input id="input2" type="number" />
</div>

否则，您可以使用,或任何其他选择器Element.querySelector()从父级<div>使用：idclassname

const div = document.getElementById('quote_div');

div.addEventListener('change', (e) => {
  const div = e.target.parentElement;  
  const label1 = div.querySelector('.r_lbl');
  const label2 = div.querySelector('.r_position');
  
  console.log(label1.innerText, label2.innerText);
});

<div id="quote_div">
  <label class="r_lbl" for="input1">Label 1</label>
  <input id="input1" type="number" />
  
  <label class="r_position" for="input2">Label 2</label>
  <input id="input2" type="number" />
</div>