如何获取noteList首个输入框并检查动态创建div是否包含input

一、从noteList获取第一个输入框 #

根据noteList的类型，有两种常见处理方式：

• 如果noteList是单个DOM元素（比如一个<div>或<ul>），直接用querySelector获取其内部第一个输入框：

  const firstInput = noteList.querySelector('input');
  

• 如果noteList是节点列表（比如document.querySelectorAll('.note')返回的集合），先取目标容器，再找输入框：

  // 取列表中第一个容器里的第一个输入框
  const firstInput = noteList[0].querySelector('input');
  // 或者用getElementsByTagName（返回动态集合）
  const firstInput = noteList[0].getElementsByTagName('input')[0];
  

注意：如果没有找到输入框，querySelector会返回null，getElementsByTagName取索引0会报错，需要提前做判断。

二、检查动态创建的div（to）是否包含输入框 #

你的代码出错原因：

1. to.childNodes.entries()返回的是[索引, 节点]形式的数组，你直接操作entry而非其中的DOM节点；
2. contains方法需要传入DOM节点对象，不能传字符串'input'；
3. indexOf是数组方法，不能用来判断节点的标签类型。

因为你无法使用querySelector，可以通过递归遍历节点的方式检查：

function hasInputElement(element) {
  // 先判断当前元素是不是输入框
  if (element.tagName === 'INPUT') {
    return true;
  }
  // 遍历所有子元素节点（跳过文本、注释等非元素节点）
  for (const child of element.childNodes) {
    if (child.nodeType === 1) { // nodeType=1表示元素节点
      if (hasInputElement(child)) {
        return true;
      }
    }
  }
  return false;
}

// 调用方法检查to
const hasInput = hasInputElement(to);
console.log('是否包含输入框：', hasInput);

如果不需要递归（只检查直接子节点），可以简化：

let hasInput = false;
for (const child of to.childNodes) {
  if (child.nodeType === 1 && child.tagName === 'INPUT') {
    hasInput = true;
    break;
  }
}
console.log('是否包含输入框：', hasInput);

内容的提问来源于stack exchange，提问作者hamburger