Es6 如何检查项目是否存在于使用 includes() 从 nodeList 构建的数组中

Question

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

这是我的

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

这是为了检查最直接的表单错误。然后我想检查 return 是否是输入、文本区域或 select.

上面的代码return是我的 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

None 这些尝试似乎奏效了。我的目标是最终拥有看起来像

的东西

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>

更新

您在评论中说："even better if I could find a way to select 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 如何检查项目是否存在于使用 includes() 从 nodeList 构建的数组中

Es6 how to check if an item exists in an array built from a nodeList using includes()

javascript

arrays

ecmascript-6

nodelist