Javascript get all input elements in form and all img tags, divs, a tags, buttons and radio buttons

In the front-end design process of a web page, it is common to get all the images or inputs in the web page. Sometimes, a little change to get all the images, divs, inputs, buttons, a tags, buttons and radio buttons, etc in the specified elements, these operations are similar.

Get a specified element using document.getElementById in javascript, and get a class of elements use document.getElementsByTagName, which can be seen literally by tag name to get a class of elements. If the tag is img, then get all images tags in the page; if the tag name is input, all input elements are got, regardless of whether the type is text input box or button.

I. Get all img tags javascript

1. Get all img tags in the web page in javascript

Method 1:

var arrImg = document.images;

The "arrImg" is an array, and each image is stored in the array as an element of the array, and the elements can be fetched or traversed according to the array.

Method 2:

var arrImg = document.getElementsByTagName("img");

Get it through the image tag img, and save all the pictures to the array "arrImg".

2. Get all img tags in the specified elements in javascript

If there are:

<ul id="ulId"><li><img src="test1.jpg" /></li><li><img src="test2.jpg" /></li></ul>

The got method is the same as above, the code is as follows:

var ul = document.getElementById("ulId");
       var arrImg1 = ul.getElementsByTagName("img");

II. Get all divs javascript

1. Get all divs in the web page in javascript

The method of getting is the same as that of getting images, both use the getElementsByTagName method, the specific code is as follows:

var arrDiv = document.getElementsByTagName("div");

2. Get all divs in the specified elements in javascript

If there are specified elements as follows:

<div id="divId"><div>Get all divs in the specified elements in javascript</div><div>Javascript get a class of element method</div></div>

Javascript code:

var div = document.getElementById("divId");
       var arrDiv = div.getElementsByTagName("div");

III. Javascript get all input elements in form

1. Javascript get all input elements in form in the web page, the specific code is as follows:

var arrInput = document.getElementsByTagName("input");

2. Get the input (button) of the specified element in the web page

If there are specified elements as follows:

<dl id="dlId">
              <dt>Product name:</dt><dd><input type="text" name="productName" /></dd>
              <dt></dt><dd><input type="button" name="btn" value="submit" /></dd>
       </dl>

Javascript code:

var dl= document.getElementById("dlId");
       var arrInput = div.getElementsByTagName("input");

In this way, both the text box and the button are got. In actual application, it is necessary to determine whether it is a text box or a button according to the type. The method of judgment is as follows:

for(var i = 0; i < arrInput.length; i++){
              if (arrInput[i].type == "button") {
                     // The current element is button
              }
       }

3. How to get all radio buttons in javascript

Html code:

<input type="radio" name="sex" checked="checked" />Male
       <input type="radio" name="sex" />Female

(1) How to get all radio buttons in the web page in javascript

Javascript code:

<script type="text/javascript">
              function GetAllRadioButtons() {
                     var arrInput = document.getElementsByTagName("input"), arrRadio = new Array();
                     var j = 0;
                     for (var i = 0; i < arrInput.length; i++) {
                            if (arrInput[i].type == "radio") {
                                   arrRadio[j] = arrInput[i];
                                   j++;
                            }
                     }
                     return arrRadio;
              }
              var arr = GetAllRadioButtons(); // Call
       </script>

(2) Get all selected radio buttons javascript

Javascript code:

function GetAllSelectRadioButtons() {
              var arrInput = document.getElementsByTagName("input"), arrRadio = [];
              var j = 0;
              for (var i = 0; i < arrInput.length; i++) {
                     if (arrInput[i].type == "radio" && arrInput[i].checked) {
                            arrRadio[j] = arrInput[i];
                            j++;
                     }
              }
              return arrRadio;
       }
       var arr = GetAllSelectRadioButtons(); // Call

IV. Get all a tags javascript

1. Get all a link tags in the web page in javascript

The get method also uses getElementsByTagName method, the code is as follows:

var arrA = document.getElementsByTagName("a");

2. Get all a link tags in the specified elements in javascript

If there are specified elements as follows:

<ul id="ulId">
              <li><a href="/2355677.htm">Get all a tags javascript</a></li>
              <li><a href="/8956572.htm">Get all a link tags in the specified elements in javascript</a></li>
       </ul>

Javascript code:

var ul = document.getElementById("ulId");
       var arrA = ul.getElementsByTagName("a");