document.getElementById("#id")根据id属性来选择
document.getElementsByClassName根据class属性来选择,注意这里class可能有多个的,所以要加s,可是这个好像具有兼容性呢,在ie8及其以下浏览器中,不能使用。解决:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法。用下面这个方法来解决兼容性问题吧。
var divs = getClassNames('tabs_div' , 'div');
function getClassNames(classStr,tagName){
if (document.getElementsByClassName) {
return document.getElementsByClassName(classStr)
}else {
var nodes = document.getElementsByTagName(tagName),ret = [];
for(i = 0; i < nodes.length; i++) {
if(hasClass(nodes[i],classStr)){
ret.push(nodes[i])
}
}
return ret;
}
}
function hasClass(tagStr,classStr){
var arr=tagStr.className.split(/\s+/ ); //这个正则表达式是因为class可以有多个,判断是否包含
for (var i=0;i<arr.length;i++){
if (arr[i]==classStr){
return true ;
}
}
return false ;
}
document.getElementsByTagName根据标签名来选择,标签就是html里面的那些div a p等等等啦,注意到这里加s了。它得到的是一个数组。所以有时看到document.getElementsByTagName("p")[0]是取得第一个p标签。但是也有兼容性。呼,心累啊,怎么就不能友好的玩耍呢?
解决方法
var getElementsByName = function(tag,name){
var returns = document.getElementsByName(name);
if(returns.length > 0)
return returns;
returns = new Array();
var e = document.getElementsByTagName(tag);
for(var i = 0; i < e.length; i++){
if(e[i].getAttribute("name") == name){
returns[returns.length] = e[i];
}
}
return returns;
}
在来说说jquery的一些了两个选择器
querySelector()这个里面可以是class,也可以是id属性。querySeletor(".classname")/querySeletor("$id")
querySelectorAll()和上面的区别就是,上面的只能选择一个,就是最开始的一个,而这个有了all就可以选择所有符合条件的
而且它更加灵活
document.querySelector('input[type='text']')或者document.querySelector('div>li:first-child')