From表单中各个组件如何通过原生js来访问value

1.通过函数传参的方式

以文本框为例，其他组件的访问方式大致都一样。
例如:

<input type="text" id="mytext"/>
<button onclick="load(mytext.value)"></button>

2.原生js

首先先来谈谈原生JS有哪几种方式获取DOM中的元素中。

1. 通过唯一的id

<div id="mydiv"></div>
<script>
    var mydiv= document.getElementById("mydiv");
</script>

注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2. 通过class获取

  <div class="mydiv1"></div>
  <div class="mydiv1"></div>
  <script>
    var mydiv1= document.getElementsByClassName("mydiv1")[0];
    var mydiv2= document.getElementsByClassName("mydiv1")[1];
  </script>

注意：getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。

3. 通过标签名

   <div class="mydiv">
      <span>这是span1</span>
      <span>这是span2</span>
      <span>这是span3</span>
      <span>这是span4</span>
      <span>这是span5</span>
   </div>
   <script>
    let spanCollection= document.getElementsByTagName("span");
   </script>

4. 通过name属性获取

 <div id="mydiv">
    <input type="text" name="user" />
 </div>
 <script>
    var userInput= document.getElementsByName("user")[0];
 </script>

注意：只有含有name属性的元素(表单元素)才能通过name属性获取

5. 通过querySelector获取

<div id="mydiv"></div>
<script>
    var box= document.querySelector("#mydiv");
</script>

注意：querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身。

6. 通过querySelectorAll获取

<div class="mydiv">mydiv1</div>
<div class="mydiv">mydiv2</div>
<div class="mydiv">mydiv3</div>
<div class="mydiv">mydiv4</div>
<div class="mydiv">mydiv5</div>
<script>
    var mydiv1= document.querySelector(".mydiv");
    var mydivs= document.querySelectorAll(".mydiv");
</script>

注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但从图中我们可以看出，两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为mydiv的元素，而querySelectorAll()获取到了所有class为mydiv的元素集合。

如何取到文本框的内容。

1. 通过 document.getElementById(“id”).value 取值。
2. 通过 document.getElementById(“name”)[index(索引)].value;取值。
3. 通过 document.getElementsByTagName(“标签名”)[index(索引)].value;取值。
4. 通过 document.getElementsByClassName(“类名”)[index(索引)].value;取值。
5. 通过 document.querySelector("#+ID名").value;取值 切记id名前要加#。
6. 通过 document.querySelectorAll(".+类名")[0].value;取值 切记类名前要加.。

3.在form表单中

1. 可以采用document.forms[索引].组件name名.value
   from[0]值该文本下第一个form表单。

2. 利用elements方法 document.表单name名.elements[索引].value elements可以获取表单内所有标签

3. document.表单name名.组件name名.value;

结束语

最后form中的下拉框，单选框和复选框需还要做一些处理由于关联元素多再获取对象时都集合，如果只想获取选中的，只要在筛选时只需要根据selected和checked来取值，就ok了。

关于单选框用js取值的文章
关于下拉框用js取值的文章