HOWTO · JavaScript
如何在 JavaScript 中获取输入值
了解如何使用 getElementById、getElementsByClassName 和 querySelector 在 JavaScript 中读取输入值。
本页内容
若要在 JavaScript 中获取输入值，请选择输入元素并读取其 value 属性。您可以直接这样做；输入不需要被包裹在表单中。请根据输入的识别方式选择查询方法：ID、共享类或 CSS 选择器。以下示例使用一个小型、类似浏览器的 fixture，因此选择和读取值的步骤在所提供的运行时中也能产生可见的结果。在页面中，请对 document 使用相同的 DOM 方法；将脚本放在其输入标记之后，或在页面加载后再运行它。
使用 document.getElementById() 获取输入值
为输入提供一个唯一的 id，然后将该 ID 传递给 document.getElementById()。该方法会返回匹配的元素，因此其 value 属性会读取该输入当前持有的文本。该代码片段会创建一个输入、分配其 ID 和值，并显示所选的值。所提供运行时中的案例产生了 Ada。当页面为某个字段提供稳定且唯一的 ID（例如姓名或电子邮件输入）时，这种方法很合适。ID 在文档中应该是唯一的；如果两个元素共享一个 ID，查询将无法表达您指的是哪一个。对于由框架稍后渲染的字段，或在脚本运行后才插入的字段，请仅在该元素存在后才执行查询。返回的对象就是输入本身，.value 会读取其当前内容。它不会将附近的标签或元素的 HTML 属性作为单独的来源来读取。
const doc = globalThis.document ?? (() => {
const elements = [];
return {
createElement: () => ({ id: "", value: "" }),
body: {
append: (...nodes) => elements.push(...nodes),
set textContent(value) { console.log(value); }
},
getElementById: id => elements.find(element => element.id === id) ?? null
};
})();
const input = doc.createElement("input");
input.id = "name";
input.value = "Ada";
doc.body.append(input);
const currentValue = doc.getElementById("name").value;
doc.body.textContent = currentValue;
Ada
使用 document.getElementsByClassName() 按类获取输入值
当多个输入共享一个类时，请使用 document.getElementsByClassName()。在浏览器中，它会返回一个已建立索引的 HTMLCollection，而不是数组。按位置读取所需的输入，从索引 0 开始，然后访问 .value。请使该位置与页面中匹配元素的顺序保持一致。以下代码在浏览器外运行时会使用一个小型 fixture；在这个示例中，其结果是一个已建立索引的列表。所提供运行时中的案例选择了第二个输入，并产生了 Grace。当页面重复相同类型的控件时，类很有用，但索引取决于文档的顺序。如果页面添加、删除或重新排列匹配的输入，同一个索引可能指的是不同的字段。在可能的情况下，请将类与更具体的容器配对，或为某个已知字段选择一个 ID。HTMLCollection 类似数组并支持数值索引，但它不是数组；.map() 等数组方法无法直接在它上面使用。如果您需要处理每个匹配项，请使用循环，或使用 Array.from() 转换该集合。
const doc = globalThis.document ?? (() => {
const elements = [];
return {
createElement: () => ({ className: "", value: "" }),
body: {
append: (...nodes) => elements.push(...nodes),
set textContent(value) { console.log(value); }
},
getElementsByClassName: className => elements.filter(element => element.className.split(/\s+/).includes(className))
};
})();
const firstInput = doc.createElement("input");
firstInput.className = "contact";
firstInput.value = "Ada";
const secondInput = doc.createElement("input");
secondInput.className = "contact";
secondInput.value = "Grace";
doc.body.append(firstInput, secondInput);
const currentValue = doc.getElementsByClassName("contact")[1].value;
doc.body.textContent = currentValue;
Grace
使用 document.querySelector() 获取输入值
document.querySelector() 接受一个 CSS 选择器并返回第一个匹配的元素。ID 使用 #name，类使用 .contact，标签使用 input，name 属性使用 [name="email"]。将 .value 应用到所选择的输入。如果选择器与多个元素匹配，这个方法只会读取第一个；若要处理所有匹配项，请使用 querySelectorAll()。与任何元素都不匹配的选择器会返回 null，因此在读取其值之前，请确认该选择器与一个输入匹配。示例按其 name 属性选择一个输入。所提供运行时中的案例产生了 ada@example.com。请使用能表达最稳定识别细节的选择器，并使其与页面标记保持一致。例如，当输入恰好具有那个 name 属性时，[name="email"] 就有效；将标记改为 name="contactEmail" 就需要同时更改选择器。由于 querySelector() 只返回一个元素，因此当页面应该提供一个预期的匹配项时，它很简洁。当每个匹配的输入都很重要时，querySelectorAll() 会返回一个您可以逐一处理的集合。
读取一个值并不会提交表单，也不会更改输入。它只是将当前输入的文本提供给您的脚本，您可以验证它，或在事件处理程序中使用它。如果您将该文本再次显示在页面上，请使用 textContent 来分配它，让浏览器将其视为文本而非标记。在真正的表单中，也请决定何时读取该值：事件处理程序可以在用户输入或提交后捕获它，而仅在页面加载时运行一次的代码，则会读取当时的值。这三种方法的主要差异在于它们如何找到元素；一旦您取得输入元素，要读取的都是同一个 .value 属性。
const doc = globalThis.document ?? (() => {
const elements = [];
return {
createElement: () => ({ name: "", value: "" }),
body: {
append: (...nodes) => elements.push(...nodes),
set textContent(value) { console.log(value); }
},
querySelector: selector => {
const match = selector.match(/^\[name=["'](.+)["']\]$/);
return match ? elements.find(element => element.name === match[1]) ?? null : null;
}
};
})();
const input = doc.createElement("input");
input.name = "email";
input.value = "ada@example.com";
doc.body.append(input);
const currentValue = doc.querySelector('[name="email"]').value;
doc.body.textContent = currentValue;
ada@example.com