1. Parameter transfer through function

Take the text box as an example, the access methods of other components are roughly the same.
For example:

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

2. Native js

First, let's talk about how native JS can get elements in DOM.

1. By unique id

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

Note: the in the parentheses of getElementById() does not need to be preceded by "#", because the method determines that the value in the parentheses is the id value of an element. This method returns a DOM object.

1. Get through class

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

Note: the in getElementsByClassName() brackets do not need to be preceded by ".", Because the method determines that the value in parentheses is the class value of an element. This method returns a collection. You cannot directly bind events to a collection. You need to get an element in the collection and then bind events for the element.

1. By tag name

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

1. Get through the name attribute

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

Note: only elements (form elements) containing the name attribute can be obtained through the name attribute

1. Get through querySelector

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

Note: the value in the bracket of querySelector() method is the selector of the element, so the "#" symbol is added in front, and the id selector is used. This method returns the DOM object itself directly.

1. Get through 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>

Note: the values in the brackets of queryselector () and queryselectorall () methods are selectors, but we can see from the figure that the two methods are different. When there are multiple elements with the same class, only the first element with mydiv class can be obtained by using querySelector() method, while querySelectorAll() obtains the collection of all elements with mydiv class.

How to get the contents of the text box.

1. Through document getElementById(“id”). Value value.
2. Through document Getelementbyid ("name") [index] value; Value.
3. Through document GetElementsByTagName ("tag name") [index] value; Value.
4. Through document Getelementsbyclassname ("class name") [index] value; Value.
5. Through document Queryselector ("# + id name") value; Remember to add #, before the id name.
6. Through document Queryselectorall (". + class name") [0] value; Remember to add.

3. In the form

1. You can use document Forms [index] Component name value
   The value from[0] is the first form under this text.

2. Use the elements method document Form name Elements [index] value elements can get all the tags in the form

3. document. Form name Component name value;

Concluding remarks

Finally, the drop-down boxes, radio boxes and check boxes in the form need to be processed. Because there are many associated elements, the objects are collected when they are obtained. If you only want to obtain the selected ones, you only need to take values according to selected and checked during filtering.

Article on js value of radio box
Article on js value of drop-down box