Question

我似乎无法弄清楚这一点，我试图检查输入是否包含在节点数组中。无论我尝试什么，它似乎都返回false。我认为这一定是我所缺少的简单事物。

这就是我所拥有的

const error = document.getElementsByClassName('has-form-error')
let focusedInputNodeList = error[0].childNodes
let focusedInput = Array.from(focusedInputNodeList)

这是为了检查最直接的表格错误。然后，我想检查返回值是输入，文本区域还是选择。

上面的代码将数组从我的html返回到控制台

(6) [text, label, text, div.form-error, input#first_name, text]

然后我尝试

console.log(focusedInput.includes('input')) //returns false

我发现可能是由于#first_name所致，所以我尝试使用

console.log(focusedInput.includes('text')) //returns false

和

console.log(focusedInput.includes('#text')) //returns false

这些尝试似乎都没有奏效。我的目标是最终拥有一个看起来像

的东西

if (focusedInput.includes('input')) {
    focusedInput[4].focus() //even better if I could find a way to select focusedInput.input.focus()  
}
if (focusedInput.includes('textarea')) {
    focusedInput[5].focus() // even better if I could find a way to select focusedInput.textarea.focus()
}

Answer 1

由于它不是字符串['text', 'input', 'etc']的数组，因此不能仅检查包含内容。它是节点对象的数组，您要查找的名称是该节点的属性，可以像focusedInput[5].localName（或.tagName或.nodeName）一样找到。因此，就像：

focusedInput.forEach(item => {
    if (item.localName === 'input') {
        item.focus()
    }
})

Answer 2

问题是您的数组focusedInput包含元素而不是字符串。在下面的代码中，我获得了一个额外的元素类型数组（作为字符串），从中可以找到所需的内容。

我要做的另一件事是使用.children获取所有非文本元素以减少数组中的内容。

const error = document.querySelector('.has-form-error');
let focusedInputNodeList = error.children;
let focusedInput = Array.from(focusedInputNodeList);
let nodeTypes = focusedInput.map(el=>el.localName);
console.log(focusedInput);
console.log(nodeTypes.indexOf('label'));
console.log(nodeTypes.indexOf('input'));

<div class="has-form-error">
  <label>Click me</label>
  <div class="form-error">Error</div><input id="first_name" />
</div>

更新

在评论中您说：“如果我能找到一种选择focusedInput.input.focus（）的方法，那就更好了

那么为什么不这样做：

const input = document.querySelector('.has-form-error input');
if (input) {
  input.focus();
}

<div class="has-form-error">
  <label>Click me</label>
  <div class="form-error">Error</div><input id="first_name" />
</div>

ES6如何使用include（）

2 个答案: