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之選擇器。