九八云安全获取HTML元素的值（文本/属性）
| 场景 | 方法 | 示例代码 |
|---|---|---|
| 获取输入框的值 | 使用 .value 属性 |
html <input id="myInput" value="Hello"> <script> const val = document.getElementById('myInput').value; console.log(val); // 输出 "Hello" </script> |
| 获取元素的文本内容 | 使用 .innerText 或 .textContent |
html <div id="myDiv">世界</div> <script> const text = document.getElementById('myDiv').innerText; console.log(text); // 输出 "世界" </script> |
| 获取元素的自定义属性 | 使用 .getAttribute() |
html <div id="myDiv" data-name="张三"></div> <script> const name = document.getElementById('myDiv').getAttribute('data-name'); console.log(name); // 输出 "张三" </script> |
获取JavaScript变量的值
| 场景 | 方法 | 示例代码 |
|---|---|---|
| 全局变量 | 直接访问变量名 | html <script> var globalVar = '测试'; </script> <script> console.log(globalVar); // 输出 "测试" </script> |
| 函数内部的局部变量 | 通过闭包或返回值间接获取（无法直接外部访问） | html <script> function test() { const localVar = '内部变量'; return localVar; } console.log(test()); // 输出 "内部变量" </script> |
| 对象属性 | 使用 或 [] 访问 |
html <script> const obj = { name: '李四' }; console.log(obj.name); // 输出 "李四" console.log(obj['name']); // 同上 </script> |
注意事项
- DOM加载顺序：确保脚本在元素加载后执行（建议将
<script>放在元素下方，或使用DOMContentLoaded事件）。 - ：若元素是动态生成的（如通过 AJAX）,需在生成后获取值。
- 类型转换：
.value和.innerText返回字符串，如需数值需手动转换（如parseInt()）。
相关问题与解答
问题1：如何修改HTML元素的值？
解答：
const inputs = document.querySelectorAll('.myClass');
inputs.forEach(input => console.log(input.value));
const values = Array.from(document.getElementsByTagName('input')).map(input => input.value);
console.log(values);
