Es6 如何使用 include() 检查从节点列表构建的数组中是否存在项目

Question

我似乎无法弄清楚这一点，我正在尝试检查输入是否包含在节点数组中。无论我尝试什么，它似乎都返回错误。我想这一定是我错过的简单东西。

这是我所拥有的

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

问题是你的数组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>

Answer 2

你不能只检查这样的包含，因为它不是字符串数组['text', 'input', 'etc']。它是一个节点对象的数组，您要查找的名称是该节点的属性，您可以找到该属性，例如focusedInput[5].localName(或.tagName或.nodeName(。 所以，就像：

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