使用getElementsByTagName()和namedItem()获取特定元素

getElementsByTagName接受一个参数，即要取得元素的标签名，返回值是包含零个或多个元素的NodeLIst。

注意：getElementsByTagName接受的标签名不区分大小写，除XML，XHTML之外

document对象还有一些特定方法，用来获取特殊的元素集合
比如：
document.images == document.getElementsByTagName(‘img’)
document.forms == document.getElementsByTagName(‘form’)
document.anchors：包含文档中所有带name特性的< a >元素
document.links：包含文档中所有带href特性的< a >元素
……

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');
......

var images = document.images;

//获取图片的的数量
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>

需求：现在想获取name值为sel2的select标签:

方法1：使用namedItem()

var selects = document.getElementsByTagName('select');
var s = selects.namedItem('sel2');

或者

var selects = document.getElementsByTagName('*');
var s = selects.namedItem('sel2');

方法2：使用方括号[]

方括号[]中可以传递2种参数，数值型或者字符串型，如果传入的是数值索引，就会等同于调用item()，如果是字符串索引，就会等同于调用namedItem()，所以也可以像下面这么写：

var selects = document.getElementsByTagName('select');
var s = selects['sel2'];

3.namedItem()的注意事项

如果存在多个name值相同，namedItem()只会取得第一项。

<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>