实施例

我正在创建自定义文件输入组件，因此我不得不返回用户使用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的抽象函数？这是人们的做法吗？

Answer 1

从输入字段获取值并将该值放入目标元素的逻辑必须假设存在某种DOM结构（如示例所示），如果目标元素未明确知晓。

我经常使用的约定是在输入字段中添加数据（数据短划线）属性，以存储将使用输入值更新的目标元素的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/

Answer 2

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

如果其他开发者不使用它们，可能是因为他们不想访问父母。

但是，请注意

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

在使用“this”

实施例

问题

还有其他方法吗？

2 个答案: