为什么我调用 querySelectorAll('.select') return 为空？

Question

我有一个文件负责与输入的所有交互。在下面的例子中，我有链接到两个 selection 字段的事件，但是，在输入控制文件中，不仅有 select，还有其他几个输入。因此，当我调用此文件时，控制台上显示有几个变量为空，因为它们不存在于当前页面上。让我举个例子：

HTML 文件：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <select name="select">
      <option value="value1">Apple</option>
      <option value="value2">Banana</option>
      <option value="value3">Grape</option>
    </select>

 <select name="select">
      <option value="value3">Bread</option>
      <option value="value4">Water</option>
      <option value="value5">Wine</option>
  </select>

<script src="script.js" type="text/javascript">
</body>
</html>

输入控制文件(script.js):

let selects = document.querySelectorAll('.select');
let radioInputs = document.querySelectorAll('.radio');
let checkbox =  document.querySelectorAll('.checkbox');

错误：

未捕获类型错误：radioInputs 为空
未捕获类型错误：复选框为空

如何解决这个错误？

Answer 1

let selects = document.querySelectorAll('select');
let radioInputs = document.querySelectorAll('radio');
let checkbox =  document.querySelectorAll('checkbox');

删除“.”。您编写的代码试图查找具有指定类(.select, .radio, .checkbox)

的 dom 元素

Answer 2

您的元素存在，因为脚本标记位于之后元素。这不是问题。

您的问题在这里：

let selects = document.querySelectorAll('.select');
let radioInputs = document.querySelectorAll('.radio');
let checkbox =  document.querySelectorAll('.checkbox');

.select 上的 . 前缀查找 class 为 select 的元素（例如 <div class="select">)，但你有一个 标签名称 ，它是 select（例如 <select>）并且根本没有 class。

从 select 或字符串中删除 .，它应该会按预期工作：

let selects = document.querySelectorAll('select');
let radioInputs = document.querySelectorAll('input[type=radio]');
let checkbox =  document.querySelectorAll('input[type=checkbox]');

请注意，单选按钮 <input type="radio"> 和复选框 <input type="checkbox"> 都是具有不同 `type 属性的 input 标签。所以对于 select 那些你必须使用不同的查询。

Answer 3

添加@Alex Wayne 的精彩回答：

'radio' 的选择器将是 input[type=radio]
'checkbox' 的选择器将是 input[type=checkbox]

因此：

let selects = document.querySelectorAll('select');
let radioInputs = document.querySelectorAll('input[type=radio]');
let checkbox =  document.querySelectorAll('input[type=checkbox]');

如果我理解正确，您只是想确保某些元素存在于您的 DOM 中，然后再应用进一步的命令（避免在没有单选框或复选框的情况下出现错误消息）。

也许，您可以将以下验证添加到您的 输入控制文件 ，首先检查 DOM 元素的类型是否存在：

let selects = document.querySelectorAll('select');
let radioInputs = document.querySelectorAll('input[type=radio]');
let checkbox =  document.querySelectorAll('input[type=checkbox]');

console.log('selects: ' + selects.length);
console.log('radioInputs: ' + radioInputs.length);
console.log('checkbox: ' + checkbox.length);

if (selects.length > 0)  {
  // do something now, as <select> exist
}
if (radioInputs.length > 0)  {
  // do something now, as <input type='radio'> exist
}
if (checkbox.length > 0)  {
  // do something now, as <input type='checkbox'> exist
}

<select name="select">
  <option value="value1">Apple</option>
  <option value="value2">Banana</option>
  <option value="value3">Grape</option>
</select>

<select name="select">
    <option value="value3">Bread</option>
    <option value="value4">Water</option>
    <option value="value5">Wine</option>
</select>

为什么我调用 querySelectorAll('.select') return 为空？

Why does my call to querySelectorAll('.select') return null?

html

javascript

events