【JavaScript】 JS中获取HTML元素值的三种方法_js获取html的值

JavaScript中获取HTML元素值的三种方法

JS获取DOM元素的方法（8种）：
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

---

JavaScript中取得元素的方法有三种：分别是：
1、getElementById() 方法：通过id取得HTML元素。
2、getElementsByName()方法：通过name取得元素，是一个数组。
3、getElementsByTagName()方法：通过HTML标签取得元素，是一个数组。

---

如果要取得值可以使用value，如：var x=document.getElementById(“id”).value;

方法一：getElementById() 方法

可返回对拥有指定 ID 的第一个对象的引用。
语法：document.getElementById(id)
在 DOM 程序设计中，它的使用非常常见。您可以定义一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了。

function id(x){
 if(typeof x == "string"){ 
 return document.getElementById(x);
 return x;
}
1
2
3
4
5

方法二：getElementsByName()方法

因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

例如，下面的代码可以获得form中第一个name为“inputText”的元素

var myParagragh = document.getElementsByName(“inputText”)[0].value;

方法三：getElementsByTagName()方法

如果您非常了解文档的结构，也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
例如，下面的代码可以获得文档中的第二个段落的值：

var myParagragh = document.getElementsByTagName(“p”)[1].value;

---

参考资料：

1. https://www.cnblogs.com/diasa-fly/p/7054660.html
2. http://www.jb51.net/article/116460.htm
3. http://blog.csdn.net/ywjatjd/article/details/51345957