获取文档元素

摘要：提供了很多方式获取文档元素可以很方便的查询文档中一个或者多个元素一组元素集合有以下几种方式通过指定的元素属性通过指定的属性通过指定的标签名通过指定的名通过匹配的选择器检查对应的元素是否于参数选择器匹配一些特殊集合通过属性获取元素

DOM提供了很多方式获取文档元素, 可以很方便的查询文档中一个或者多个元素[一组元素集合], 有以下几种方式:

通过指定的元素id属性(attribute) - [getElementById]

通过指定的name属性 - [getElementsByName]

通过指定的标签名 - [getElementsByTagName]

通过指定的CSS Class名 - [getElementsByClassName]

通过匹配的CSS选择器 - [querySelector/querySelectorAll]

检查对应的HTML元素是否于参数选择器匹配 - [matchesSelector]

一些特殊集合

通过id属性获取元素
任何HTML元素都可以定义id属性, 但是通常它在文档中是唯一的. 因而我们通常使用id获取到的只是一个独立的唯一的元素对象. 我们可以使用Document对象的getElementById()方法获取指定的id的元素对象.

document.getElementById("id");
如果在匹配的过程中不存在参数中传递的相应的id元素, 则getElementById()方法返回null. id参数的匹配过程中区分大小写, 但是在IE8之前的版本中getElementById()方法并不区分ID的大小写, 并且如果页面中存在多个同名的ID元素, 这个方法只会返回匹配第一个元素对象.

使用getElementById()方法获取到的是一个元素对象, 因而这个对象也有属性和方法. 便可以使用结果对象的相关属性和方法进行其他操作. 如:

var dom = document.getElementById("id");
dom.style.backgroundColor = "#FFF";
注意: 在IE8之前的版本中, getElementById()方法会匹配name属性与id同名的表单元素. 因而如果需要确保不会获取到表单元素, 需要在页面中保证不会出现name值与id名相同的表单元素.

通过name属性获取元素
getElementsByName()方法是只有HTMLDocument类型才有的方法, 因而它只对HTML文档可用. 它用于返回具有指定name特性的所有元素, 即一个NodeList对象(相当于一个包含一组Element对象的只读数组). 注意这里name属性不一定是单个的元素, 可能是一组元素的集合(HTMLCollection). 例如具有相同name属性值的一组表单元素(单选或者复选框).

document.getElementsByName("name");
getElementsByName()方法返回的NodeList对象也有很多属性和方法, 同样可以利用它的属性和方法进行其他操作.

注意: 在某些版本的IE中getElmentsByName()方法会匹配具有同名id属性值的元素. 因而需要小心的避免.

通过HTML标签名获取元素
Document对象有一个getElementsByTagName()方法, 它接受一个HTML标签名作为参数, 并取得匹配所有的匹配的标签名的元素, 它也返回一个NodeList对象. 返回的元素集合按照这些元素在文档中的顺序排列.

document.getElementsByTagName("div"); // 获取文档中的所有div元素
document.getElementsByTagName("p"); // 获取文档中的所有p元素
document.getElementsByTagName("*"); // 获取文档中的所有元素

getElementsByTagName()不仅可用于Document对象, 它还可以基于现有的Element对象, 获取其后代元素.

var firstDiv = document.getElementsByTagName("div")[0];
var spans = firstDiv.getElementsByTagName("span"); // 获取文档中第一个div中的所有span元素

同样的, 使用getElementsByTagName()方法获取的NodeList也有很多属性和方法, 可以利用相关的属性和方法进行其他操作. 下面展示了几个常见的属性和方法.

var div = document.getElementsByTagName("div");
div.length; // 获取文档中div的数量
div[0].id; // 获取文档中第一个div的id属性值, 如果它存在
div.item(0).id; // 通过NodeList的item方法获取文档中第一个div的id属性值

var images = document.getElementsByTagName("img");
images.nameItem("name"); // 获取images集合中具有name属性值的元素

注意:

getElememtsByTagName();不区分HTML标签的大小写.

在早期版本的IE中, 由于注释被实现为元素, 因而document.getElementsByTagName("*");也会返回所有的注释节点.

通过ClassName获取元素
HTML5中添加了一个getElementsByClassName()方法用于获取指定className(class在JavaScript中是关键字, 因而在DOM操作中使用className替代)值的元素. 这个方法可以通过Document对象或者现有的元素对象调用. 它接受一个或多个[空格分割]className值(顺序无关), 返回匹配的NodeList对象(它返回的是后代元素).

var items = document.getElementsByClassName("item"); // 获取文档中所有className为"item"的元素
var doms = document.getElementsByClassName("a b"); // 获取文档中所有同时具有className为a和b的元素

var users = document.getElementById("list").getElementsByClassName("user"); // 获取文档中id为list的元素下所有className为user的元素

使用getElementsByClassName()不在局限于使用id或者标签名的方式获取元素. 但注意它返回的是NodeList对象, 一个只读形式的类数组对象. 在使用过程需要避免直接对NodeList进行操作.

注意: 在"怪异模式中"getElementsByClassName()方法在匹配className时不区分大小写.

由于IE9之前的版本并不支持这个方法, 因而需要基于现有的技术模拟实现. 下面提供一个<>作者实现的版本:

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null ){
        node = document;
    }
    if ( tag == null ){
        tag = "*";
    }

    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");

    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
                j++;
        }
    }

    return classElements;

}

扩展阅读: document.getElementsByClassName理想实现

querySelector()方法
W3C标准的Selector API Level1中提供了两个核心的方法querySelector()和querySelectorAll(), 可以通过Document对象或者基于现有的元素, 以及在文档片段(DocumentFragment)中调用这两个方法获取匹配的元素.

querySelector()方法接受一个CSS选择符字符串, 返回与这个选择符模式匹配的第一个元素. 如果没有匹配则返回null.

var body = document.querySelector("body"); // 获取body元素
var firstLi = document.querySelector("#list li:first-child"); // 获取id为list的元素中第一个li元素

var dom = document.getElementById("id");
var lastLi = dom.querySelector("li:last-child");
// 获取文档中id为id的元素下最后一个li元素, 通过现有的元素调用querySelector方法获取

注意:

规范中并没有规定要求querySelector()支持CSS3选择器

querySelector()方法并不能应用于类似:first-line/:visited等匹配文本节点的伪元素或者匹配元素状态的伪类中.

兼容性:

Chrome FireFox Safari Opera IE
1 3.5 3.2 10 8