this.parentNode 在 dom 中不起作用 [重复]答案

【问题标题】：this.parentNode not working inside a dom [duplicate]this.parentNode 在 dom 中不起作用 [重复]
【发布时间】：2018-07-02 08:11:15
【问题描述】：

getSelection = () => {
  console.log("this", this); //valid but empty json
  console.log("this.parentNode", this.parentNode); //<=undefined
}
document.querySelector('i.edit').addEventListener('click', getSelection, false);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="control-group">
  <label for="name" class="control-label">
          <p class="text-info">Alex<i class="icon-star"></i> </p>
        </label>
  <input type="text" class="edit-input" />
  <i class="fa fa-pencil edit" aria-hidden="true"></i>
</div>

【问题讨论】：

this.parentNode
而.parent() 是 jQuery
@Satpal 试过了，答案错误
@LGSon 没有 jQuery
你看过我的回答了吗，不要使用箭头函数，因为它没有自己的this

标签： javascript

【解决方案1】：

当您使用箭头函数时，您的 this 不会引用该对象。

使用event.target 属性

    <div class="control-group">
      <label for="name" class="control-label">
              <p class="text-info">Alex<i class="icon-star"></i> </p>
            </label>
      <input type="text" class="edit-input" />
      <i class="fa fa-pencil edit" aria-hidden="true">edit</i>
    </div>

    <script>
      getSelection = (e) => {
        //console.log("this", this); //valid but empty json
        console.log("e.target.parentNode", e.target.parentNode); //<=undefined
      }
      document.querySelector('i.edit').addEventListener('click', getSelection, false);
    </script>

【讨论】：