javascript - 使用纯 Javascript 从自定义数据属性获取值，而不使用 getElementById

Question

这个问题已经有答案了:

Javascript - Browser naming conventions for event attributes confusing me (2 个回答)

已关闭 7 年前。

我需要从这些字段获取自定义数据属性。

<input type="text" name="FirstName" data-type="string" placeholder="First name" autocomplete="off" >

<input type="text" name="phone" data-type="number" placeholder="Last name" autocomplete="off" >

这是不使用 getElementById 选择字段的代码:

 var elements = this.elements;

            this.elements = document.getElementsByTagName('input');
            var elements = this.elements;
            var group = elements.length;


            for (var i = 0; i < group; i++) {

                this.controller.validate({
                    field: elements[i],
                    value: elements[i].value,
                    dataType: e.target.getAttribute('data-type'), //   <---- ERROR: This is undefined
                    optional: e.target.getAttribute('data-optional')//   <---- ERROR: This is undefined
                });

            }

使用element.getAttribute('data-type')在 Chrome 和 Firefox 中工作正常，但在 Internet Explorer 上失败

挑战:

I need to get the value of these custom attributes from any browser:

• 我无法使用任何第三方库。
• 我无法使用 getElementById，因为这些字段是动态的。

有什么想法吗？

Answer 1

既然您已经更新了您的问题，我们可以看到您的错误在于在 e.target 上调用 getAttribute，该错误可能不存在，具体取决于您收听的方式事件，以及您使用的浏览器。

当然，最好只是将全面的验证处理程序附加到输入，忽略 e 并简单地立即检查所有输入进行验证。

该处理程序的内容可能如下所示:

var elements = document.getElementsByTagName('input');

for (var i = 0; i < elements.length; i++) {

  var type = elements[i].getAttribute('data-type');
  var optional = elements[i].getAttribute('data-optional');

  console.log('type/optional:', type, optional);

  this.controller.validate({
    field: elements[i],
    value: elements[i].value,
    dataType: type,
    optional: optional
  });
}

如果您坚持使用该事件，那么也许您应该只检查已调度该事件的特定输入，从而减少对 getElementsByTagName 的需求:

var target = e.target ? e.target : e.srcElement;

var type = target.getAttribute('data-type');
var optional = target.getAttribute('data-optional');

console.log('type/optional:', type, optional);

this.controller.validate({
  field: target,
  value: target.value,
  dataType: type,
  optional: optional
});

请注意，data-optional 不作为标记中的属性存在，因此它们的值为 null。