本文介绍了JavaScript中获取HTML元素值的三种核心方法：getElementById、getElementsByName和getElementsByTagName。通过具体代码示例，详细解析了如何根据ID、Name属性和标签名称定位元素，并演示了如何提取元素的value属性值，帮助开发者掌握DOM操作基础。
JavaScript获取HTML元素值的三种常用方法
在JavaScript开发中，获取HTML元素通常涉及以下三种主要方式：
第一种方式是使用 getElementById() 方法，该方法通过指定的ID属性来定位并获取对应的HTML元素。
第二种方式是使用 getElementsByName() 方法，该方法通过元素的name属性进行查找，其返回结果是一个包含所有匹配元素的数组。
第三种方式是使用 getElementsByTagName() 方法，该方法通过HTML标签名称来查找元素，返回的同样是一个元素数组。
在成功获取元素引用后，若需获取其值，通常使用 value 属性，例如：var x=document.getElementById("id").value;
通过ID获取元素：getElementById
方法一：getElementById() 方法 该方法用于返回文档中第一个拥有指定 ID 属性的对象引用。
语法格式为：document.getElementById(id)
在DOM编程实践中，该方法应用广泛。开发者可以封装一个工具函数，通过更简短的别名来调用 getElementById()，从而简化代码。
function id(x){
if(typeof x == "string"){
return document.getElementById(x);
return x;
}
通过Name属性获取元素：getElementsByName
方法二：getElementsByName()方法 由于文档中 name 属性的值可能重复（例如HTML表单中的单选按钮组通常共享相同的name属性），因此 getElementsByName() 方法返回的是一个元素数组，而非单个元素对象。
例如，以下代码展示了如何获取form表单中第一个name属性为“inputText”的元素：
var myParagragh = document.getElementsByName("inputText")[0].value;
通过标签名称获取元素：getElementsByTagName
方法三：getElementsByTagName()方法 如果开发者对文档结构有清晰了解，也可以利用 getElementsByTagName() 方法来获取文档中特定的元素。
例如，以下代码演示了如何获取文档中第二个段落的值：
var myParagragh = document.getElementsByTagName("p")[1].value;
以上即为本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。