javascript基础学习系列四百零六:Document 类型(定位元素)

使用 DOM 最常见的情形可能就是获取某个或某组元素的引用，然后对它们执行某些操作。
document 对象上暴露了一些方法，可以实现这些操作。getElementById()和 getElementsByTagName()就是 Document 类型提供的两个方法。
getElementById()方法接收一个参数，即要获取元素的 ID，如果找到了则返回这个元素，如果没找到则返回 null。参数 ID 必须跟元素在页面中的 id 属性值完全匹配，包括大小写。比如页面中有
以下元素：

可以使用如下代码取得这个元素：

但参数大小写不匹配会返回 null：

如果页面中存在多个具有相同 ID 的元素，则 getElementById()返回在文档中出现的第一个元素。
getElementsByTagName()是另一个常用来获取元素引用的方法。这个方法接收一个参数，即要获取元素的标签名，返回包含零个或多个元素的 NodeList。在 HTML 文档中，这个方法返回一个
HTMLCollection 对象。考虑到二者都是“实时”列表，HTMLCollection 与 NodeList 是很相似的。
例如，下面的代码会取得页面中所有的元素并返回包含它们的 HTMLCollection：

这里把返回的 HTMLCollection 对象保存在了变量 images 中。与 NodeList 对象一样，也可以使用中括号或 item()方法从 HTMLCollection 取得特定的元素。而取得元素的数量同样可以通过length 属性得知，如下所示：

alert(images[0].src); // 第一张图片的 src 属性
alert(images.item(0).src); // 同上

HTMLCollection 对象还有一个额外的方法 namedItem()，可通过标签的 name 属性取得某一项的引用。例如，假设页面中包含如下的元素：

那么也可以像这样从 images 中取得对这个元素的引用：

这样，HTMLCollection 就提供了除索引之外的另一种获取列表项的方式，从而为取得元素提供了便利。对于 name 属性的元素，还可以直接使用中括号来获取，如下面的例子所示：

对 HTMLCollection 对象而言，中括号既可以接收数值索引，也可以接收字符串索引。而在后台，数值索引会调用 item()，字符串索引会调用 namedItem()。
要取得文档中的所有元素，可以给 getElementsByTagName()传入*。在 JavaScript 和 CSS 中，*一般被认为是匹配一切的字符。来看下面的例子：

这行代码可以返回包含页面中所有元素的 HTMLCollection 对象，顺序就是它们在页面中出现的顺序。因此第一项是元素，第二项是元素，以此类推。
HTMLDocument 类型上定义的获取元素的第三个方法是 getElementsByName()。顾名思义，这个方法会返回具有给定 name 属性的所有元素。getElementsByName()方法最常用于单选按钮，因为同一字段的单选按钮必须具有相同的 name 属性才能确保把正确的值发送给服务器，比如下面的例子：

 <legend>Which color do you prefer?</legend> 
 <ul> 
 <li> 
 <input type="radio" value="red" name="color" id="colorRed"> 
 <label for="colorRed">Red</label> 
 </li> 
 <li> 
 <input type="radio" value="green" name="color" id="colorGreen"> 
 <label for="colorGreen">Green</label> 
 </li> 
 <li> 
 <input type="radio" value="blue" name="color" id="colorBlue">
 <label for="colorBlue">Blue</label> 
 </li> 
 </ul> 
</fieldset> 

这里所有的单选按钮都有名为"color"的 name 属性，但它们的 ID 都不一样。这是因为 ID 是为了匹配对应的元素，而 name 相同是为了保证只将三个中的一个值发送给服务器。然后就可以像
下面这样取得所有单选按钮：

与 getElementsByTagName()一样，getElementsByName()方法也返回 HTMLCollection。不过在这种情况下，namedItem()方法只会取得第一项（因为所有项的 name 属性都一样）。
特殊集合
document 对象上还暴露了几个特殊集合，这些集合也都是 HTMLCollection 的实例。这些集合是访问文档中公共部分的快捷方式，列举如下。
 document.anchors 包含文档中所有带 name 属性的元素。
 document.applets 包含文档中所有元素（因为元素已经不建议使用，所以这个集合已经废弃）。
 document.forms 包含文档中所有元素（与 document.getElementsByTagName (“form”)
返回的结果相同）。
 document.images 包含文档中所有元素（与 document.getElementsByTagName (“img”)
返回的结果相同）。
 document.links 包含文档中所有带 href 属性的元素。
这些特殊集合始终存在于 HTMLDocument 对象上，而且与所有 HTMLCollection 对象一样，其内容也会实时更新以符合当前文档的内容。