javascript基础从小白到高手系列一百一十二：定位元素

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

Some text

可以使用如下代码取得这个元素： let div = document.getElementById("myDiv"); // 取得对这个

元素的引用 但参数大小写不匹配会返回null： let div = document.getElementById("mydiv"); // null 如果页面中存在多个具有相同ID 的元素，则getElementById()返回在文档中出现的第一个元素。 getElementsByTagName()是另一个常用来获取元素引用的方法。这个方法接收一个参数，即要 获取元素的标签名，返回包含零个或多个元素的NodeList。在HTML 文档中，这个方法返回一个 HTMLCollection 对象。考虑到二者都是“实时”列表，HTMLCollection 与NodeList 是很相似的。 例如，下面的代码会取得页面中所有的 元素并返回包含它们的HTMLCollection： let images = document.getElementsByTagName("img"); 这里把返回的HTMLCollection 对象保存在了变量images 中。与NodeList 对象一样，也可以 使用中括号或item()方法从HTMLCollection 取得特定的元素。而取得元素的数量同样可以通过 length 属性得知，如下所示： alert(images.length); // 图片数量 alert(images[0].src); // 第一张图片的src 属性 alert(images.item(0).src); // 同上 HTMLCollection 对象还有一个额外的方法namedItem()，可通过标签的name 属性取得某一项 的引用。例如，假设页面中包含如下的 元素： 那么也可以像这样从images 中取得对这个 元素的引用： let myImage = images.namedItem("myImage"); 这样，HTMLCollection 就提供了除索引之外的另一种获取列表项的方式，从而为取得元素提供了 便利。对于name 属性的元素，还可以直接使用中括号来获取，如下面的例子所示： let myImage = images["myImage"]; 对HTMLCollection 对象而言，中括号既可以接收数值索引，也可以接收字符串索引。而在后台， 数值索引会调用item()，字符串索引会调用namedItem()。 要取得文档中的所有元素，可以给getElementsByTagName()传入*。在JavaScript 和CSS 中，* 一般被认为是匹配一切的字符。来看下面的例子： let allElements = document.getElementsByTagName("*"); 这行代码可以返回包含页面中所有元素的HTMLCollection 对象，顺序就是它们在页面中出现的 顺序。因此第一项是元素，第二项是元素，以此类推。 HTMLDocument 类型上定义的获取元素的第三个方法是getElementsByName()。顾名思义，这个 方法会返回具有给定name 属性的所有元素。getElementsByName()方法最常用于单选按钮，因为同 一字段的单选按钮必须具有相同的name 属性才能确保把正确的值发送给服务器，比如下面的例子： Which color do you prefer?

• Red
• Green
• Blue

这里所有的单选按钮都有名为"color"的name 属性，但它们的ID 都不一样。这是因为ID 是为了 匹配对应的 元素，而name 相同是为了保证只将三个中的一个值发送给服务器。然后就可以像 下面这样取得所有单选按钮： let radios = document.getElementsByName("color"); 与getElementsByTagName()一样，getElementsByName()方法也返回HTMLCollection。不 过在这种情况下，namedItem()方法只会取得第一项（因为所有项的name 属性都一样）。