getElementsByTagName 接受一个参数, 即要取得元素的标签名, 返回值是包含零个或多个元素的 NodeLIst.
注意: getElementsByTagName 接受的标签名不区分大小写, 除 XML,Xhtml 之外
1. 基本使用
假设 HTML 如下:
- <img src="a.png" name="img"/>
- <img src="a.png"/>
使用 JS 获取包含 img 的 NodeList
var images = document.getElementsByTagName('img');
或者
var images = document.getElementsByTagName('IMG');
或者
- var images = document.getElementsByTagName('Img');
- ......
- // 获取图片的的数量
- console.log( images.length ) //2
- // 获取第一个图片的的 src
- console.log( images[0].src )
- // 获取第一个图片的的 src
- console.log( images.item(0).src )
2.namedItem()获取指定 name 属性的元素
如下, HTML 中包含多个标签,
- <img src="a.png" name="img"/>
- <img src="a.png"/>
- <select name="sel">
- <option value=""></option>
- </select>
- <select name="sel2">
- <option value=""></option>
- </select>
- var selects = document.getElementsByTagName('select');
- var s = selects.namedItem('sel2');
- var selects = document.getElementsByTagName('*');
- var s = selects.namedItem('sel2');
- var selects = document.getElementsByTagName('select');
- var s = selects['sel2'];
- <button name="submit">1</button>
- <button name="submit">2</button>
- <button name="submit">3</button>
- var buttons = document.getElementsByTagName('button');
- var btn = buttons.namedItem('submit');
- console.log(btn) //<button name="submit">1</button>
来源: https://www.2cto.com/kf/201806/752553.html