当使用'this'时，替代总是引用父节点和子节点来修改DOM

Alternative to always referencing to parents and children to modify DOM when using 'this'

本文关键字：父节点 引用 子节点 DOM 修改 this      更新时间：2023-09-26

我注意到，当我需要在组件之间共享行为时，我总是使用this 。

我正在创建一个定制的文件输入组件，因此我必须返回由JS用户添加的文件。但是有三个输入，我需要创建一个函数，它将在它们之间共享，所以它不能是特定的，也不能是唯一的。它应该对所有的都有效。

var setFilename = function () {
  // get element I want
  var input    = this
  var filepath  = input.value
  var m         = filepath.match(/([^'/'']+)$/)
  var filename  = m[1]
  var spanLabel  = input.parentNode.querySelector('.input')
  // apply to element I wanted to get
  spanLabel.innerHTML = filename;
}

问题

注意，这里的功只是为了到达我想要的元素，一般来说。我用parentNode

我总是这样做，甚至有代码是这样结束的:

var element       = this,
    elementParent = this.parentNode,
    elementIWant  = selectedSpan.parentNode.querySelector('.class');

我不认为这是一个好的做法。是吗?我没有在其他开发者的代码中看到它。我用jQuery (parent(), closest()等)和JS。

有其他方法吗?

如何以正确的方式操作DOM的抽象函数?这就是人们做事的方式吗?

从输入字段获取值并将该值放入目标元素的逻辑必须假设存在某种DOM结构(如在您的示例中)，如果目标元素不是显式已知的。

我经常使用的约定是向输入字段添加一个data- (data dash)属性，以存储将使用输入值更新的目标元素的id。例如:

<div>
  <label for="filename">Filename: </label>
  <input type="text" id="filename" data-target-id="filename-display" />
</div>
<div class="some-displayed-values">
  <span class="input" id="filename-display"></span>
</div>

然后，可以通过其ID值选择目标元素，如下所示:

function setFilename () {
  var input = this;
  // older browsers might not have input.dataset available
  var targetId = input.dataset.targetId || input.getAttribute('data-target-id'); 
  var target = document.getElementById(targetId);
  target.innerHTML = input.value;
}

jsfiddle示例:http://jsfiddle.net/silkster/ex1dvv0s/

如果您需要访问父级，parentNode或parentElement是正确的方式。

如果其他开发人员不使用它们，可能是因为他们不想访问父目录。

但是，要注意

  • parentNode可能返回一个节点而不是一个元素。因此，在返回值上使用仅对元素可用的属性或方法可能会抛出错误。如果您希望结果是一个元素，请使用parentElement。
  • parentNode和parentElement可以返回null。因此，在尝试访问其属性之前检查返回值可能是一个好主意。
相关文章：