js获取网页中指定元素或所有图片img、div、input、button

在网页前端设计过程中，获取网页中的所有图片或 input 是常有的事，有的时候稍微变化一下获取指定元素的所有图片、div、input、button、radio、A 等，这些操作都大同小异。

用js获取一个指定元素用 document.getElementById，而获取一类元素则用 document.getElementsByTagName，从字面意可以看出是通过标签名来获取一类元素，如若标签为 img，则获取网页中的所有图片，若标签名为 input，则获取所有 input 元素，不管类型是文本输入框还是button一概获取。

一、js获取网页中所有图片img和指定元素的img

1、js获取网页中所有图片img

javascript获取网页中所有图片img有两种方法：

方法一：

var arrImg = document.images;

arrImg 是一个数组，每一张图片作为数组的一个元素保存在数组内，取元素或遍历按数组来操作即可。

方法二：

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

通过图片标签 img 来获取，把取到的所有图片也保存到数组 arrImg 中。

2、js获取网页中指定元素的所有图片img

假如有：

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

获取方法跟上面一样，代码如下：

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

二、js获取网页中所有div和指定元素的div

1、js获取网页中所有div

获取方法跟获取图片是一样的，都使用 getElementsByTagName 方法，具体代码如下：

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

2、js获取网页中指定元素的div

假如有指定元素如下：

<div id="divId"><div>js获取网页中指定元素的div</div><div>javascript获取一类元素方法</div></div>

js 代码：

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

三、js获取网页中所有input（button）和指定元素的input（button）

1、获取网页中所有input，具体代码如下：

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

2、获取网页中指定元素的input（button）

假如有指定元素如下：

<dl id="dlId">
    <dt>产品名称：</dt><dd><input type="text" name="productName" /></dd>
    <dt></dt><dd><input type="button" name="btn" value="提交" /></dd>
  </dl>

js 代码：

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

这样既获取到了文本框又获取了按钮，在实际应用中还要根据类型来判断是文本框还是按钮，判断方法如下：

for(var i = 0; i < arrInput.length; i++){
    if (arrInput[i].type == "button") {
      //当前元素为button
    }
  }

3、获取网页中所有和选择的 radio

html 代码：

<input type="radio" name="sex" checked="checked" />男
  <input type="radio" name="sex" />女

（1）获取网页中所有 radio

js 代码：

<script type="text/javascript">
    function GetAllRadios() {
      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 = GetAllRadios();//调用
  </script>

（2）获取网页中选择的 radio

js 代码：

function GetAllSelectRadios() {
    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 = GetAllSelectRadios();//调用

四、js获取网页中所有和指定链接 a

1、js获取网页中所有链接 a

获取方法也使用 getElementsByTagName 方法，代码如下：

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

2、js获取网页中指定链接 a

假如有指定元素如下：

<ul id="ulId">
    <li><a href="/article/29350637.htm">js获取网页中所有链接 a</a></li>
    <li><a href="/article/8239545.htm">js获取网页中指定链接 a</a></li>
  </ul>

js 代码：

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