本文讲解如何通过原生 JavaScript 正确获取 <input type="search"> 元素的用户输入内容，并将其用于动态构建 Google 搜索 URL，避免常见错误（如获取元素对象而非其值）。
本文讲解如何通过原生 javascript 正确获取 `` 元素的用户输入内容，并将其用于动态构建 google 搜索 url，避免常见错误（如获取元素对象而非其值）。
在 Web 开发中，常需读取用户在搜索框中输入的内容并触发相应操作（例如跳转至 Google 搜索结果页）。但初学者容易混淆「获取 DOM 元素」与「获取该元素的当前值」——前者返回一个 HTMLInputElement 对象，后者才返回实际输入的字符串。
你使用的代码：
var query = document.getElementById("bar");仅获取了 ID 为 bar 的 <input> 元素本身，而非它的内容。因此 query 是一个对象，直接用于字符串拼接时会转为 "[object HTMLInputElement]"，或在某些上下文中表现为 "undefined"。
✅ 正确做法是访问该元素的 .value 属性：
立即学习“Java免费学习笔记（深入）”；
const query = document.getElementById("bar").value;⚠️ 注意：.value 只在用户已输入内容时返回非空字符串；若输入框为空，将得到空字符串 ""。建议添加基础校验：
const input = document.getElementById("bar");
const query = input.value.trim(); // 去除首尾空白
if (query) {
const url = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
window.open(url, "_blank");
} else {
alert("请输入搜索关键词！");
}? 关键要点：
- 使用 element.value 获取输入框当前文本值；
- 使用 encodeURIComponent() 对查询字符串编码，确保空格、中文、特殊符号（如 #, &）安全传输；
- 推荐用模板字符串（Template Literals）提升可读性与维护性，替代 + 拼接；
- 避免直接拼接未编码的用户输入到 URL 中，防止 URL 解析错误或潜在安全风险。
完整示例（含事件绑定）：
<input id="bar" type="search" placeholder="搜索 Google...">
<button onclick="performSearch()">搜索</button>
<script>
function performSearch() {
const query = document.getElementById("bar").value.trim();
if (!query) return;
const encodedQuery = encodeURIComponent(query);
const url = `https://www.google.com/search?q=${encodedQuery}`;
window.open(url, "_blank");
}
</script>这样即可稳定、安全、专业地实现搜索跳转功能。
