如何用JavaScript获取HTML元素值？

在网页开发中,获取HTML元素的值是基础且关键的操作，常用于表单提交、动态内容更新和用户交互处理，以下是详细方法及示例：

原生JavaScript方法

1. 通过ID获取
   使用getElementById直接定位元素：

   let element = document.getElementById("username");
   let value = element.value; // 获取输入框的值

2. 通过选择器获取
   用querySelector获取首个匹配元素：

   let email = document.querySelector("#email").value; // ID选择器
   let firstButton = document.querySelector("button").textContent; // 标签选择器

3. 通过类名或标签名批量获取
   使用getElementsByClassName或getElementsByTagName：

   

   let items = document.getElementsByClassName("list-item");
   for (let item of items) {
     console.log(item.textContent); // 遍历输出文本
   }

4. 表单元素特殊取值
   单选/复选框需检查checked属性：

   let isChecked = document.querySelector("#agree").checked; // 返回true/false

jQuery方法（适用于旧项目）

$("#username").val();       // 获取输入值
$(".price").text();         // 获取文本内容
$("#banner").attr("src");   // 获取属性值

现代框架中的操作

1. React
   使用useRef钩子或事件对象：

   function MyComponent() {
     const inputRef = useRef(null);
     const handleClick = () => alert(inputRef.current.value);
     return <input ref={inputRef} onChange={(e) => console.log(e.target.value)} />;
   }

2. Vue
   通过v-model双向绑定：

   

   <template>
     <input v-model="message" /> <!-- 值自动绑定到message变量 -->
   </template>
   <script>
   export default {
     data() { return { message: "" }; }
   }
   </script>

注意事项

1. 执行时机
   确保DOM加载完成后再操作元素，否则会报错：

   window.addEventListener("DOMContentLoaded", () => {
     // 在此处操作元素
   });

2. 安全性与验证

   • 始终验证从元素获取的数据（如用正则表达式检查邮箱格式）
   • 防止XSS攻击：对用户输入内容进行转义

3. 性能优化

   • 避免频繁查询DOM,可将元素引用保存在变量中复用
   • 批量操作时使用documentFragment减少重绘

4. 兼容性

   

   • querySelector兼容IE8+，现代项目可放心使用
   • 需支持旧浏览器时优先用getElementById

根据需求选择合适方法：

• 简单页面：原生JavaScript（getElementById或querySelector）
• 遗留项目：jQuery简化操作
• 复杂应用：Vue/React的数据绑定机制

引用说明：本文内容参考MDN Web文档的DOM操作指南、W3C DOM规范及Google Web Fundamentals最佳实践，确保方法权威可靠，具体技术细节可查阅MDN元素取值文档或React官方Refs指南。