JavaScript之选择器

    做为一个前端，利用JavaScript查找DOM元素是很常常的事。jQuery的选择器很强大，可是这并就不意味着咱们不须要掌握原生js查找DOM的方法了。下面总结了一些查找DOM的方法。

    1. 经过ID选取元素（getElementById）

var mydom=document.getElementById('domid');//获取id为domid的元素
function $id(id,fa){
	fa=fa || document;
	return document.getElementById(id);
}

    2. 经过名称name选取元素（getElementsByName）

var dom2=document.getElementsByName('domname');//返回name为domname的元素的集合
//为form、img、iframe、applet、embed、object元素设置name属性时，
//会自动在Document对象中建立以该name属性值命名的属性。因此能够经过document.domName引用相应的dom对象
var testimg=document.testimg;//返回name为testimg的（form表单、表单元素、iframe、img）元素的集合

    3. 经过标签名选取元素（getElementsByTagName）

var domeTag=document.getElementsByTagName('a');//返回全部a元素的集合
var domeTags=document.getElementsByTagName('*');//返回全部元素的集合

    4. 经过类选取元素（getElementsByClassName）

var classDom=document.getElementsByClassName('domclass');//返回全部包含domclass类的元素的集合
//返回全部同时包含有domclass0，domclass1类的元素的集合
var classDomt=document.getElementsByClassName('domclass0 domclass1');
var hasClass = function(element, className) {
	var reg = new RegExp('([ \f\n\r\t\v]|^)' + className + '([ \f\n\r\t\v]|$)');
	return element.className.match(reg);
};
function getByClass(class, fa, tag){
	fa= fa || document;
	tag=tag || '*';
	if (document.getElementsByClassName) {
		return fa.getElementsByClassName(class);
	}else {
		var nodes = fa.getElementsByTagName(tag), ret = [];
		for(i = 0; i < nodes.length; i++) {
			if(hasClass(nodes[i], class)){
				ret.push(nodes[i]);
			}
		}
		return ret;
	}
}

    5.经过CSS选择器选取元素（querySelector，querySelectorAll）

//selector为合法的CSS选择器,返回一个符合选择条件的第一个元素
var queryDom=document.querySelector('selector');
//selector为合法的CSS选择器,返回一个符合选择条件的元素的集合
var queryDoms=document.querySelectorAll('selector');

var queryid=document.querySelector('#news_hot_data');//经过id选择元素，返回符合条件的元素
var queryid=document.querySelectorAll('#news_hot_data');//经过id选择元素，返回符合条件的元素的集合


var querytag=document.querySelector('a');//经过元素名查找元素，返回符合条件的第一个元素
var querytag=document.querySelectorAll('a');//经过元素名查找元素，返回符合条件的元素集合

var queryclass=document.querySelector('.s-news-wrapper');//经过元素的类名查找元素，返回符合条件的第一个元素
var queryclass=document.querySelector('.s-news-wrapper');//经过元素的类名查找元素，返回符合条件的元素集合

更多的css选择器用法请看css之选择器。