获取文档元素

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之前的版本并不支持这个方法, 因而需要基于现有的技术模拟实现. 下面提供一个<<JavaScript设计模式>>作者实现的版本:

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