js 选择子级元素

Question

先上 代码 <div id="d">
<span>1
<span>**
<span>**
<span>**</span>
</span>
</span>
</span>
<span>2
<span>**
<span>**
<span>**</span>
</span>
</span>
</span>
</div>                           // jquery
$('#d span').css('color','red')  //这样 所有span都有style="color:red"
$('#d > span').css('color','red') //这样 仅仅是 第一级（儿子）才有style="color:red"
我想问 怎样用js原生方法来 实现 选择 #d 的儿子元素。

Answer 1

搜索   js dom 操作

Answer 2

var nodeList = document.getElementById("d").childNodes

Answer 3

Array.prototype.appendList=function(arr){
for(var i=0;i<arr.length;i++){
this.push(arr[i]);
}
return this;
};
var Mit=mit=window.Mit=window.mit=__$$__=__$_$__={
inArray : function(arr,obj){
for(var i=0;i<arr.length;i++){
if(arr[i]==obj) return true;
}
return false;
},
_parseIdString : function(val){
var tems=[];
var arr=val.split("");
var _tv="";var L=arr.length;
for(var i=0;i<L;i++){
if(_tv==""){
_tv=arr[i];
if(i+1==L) tems.push({"val" : _tv, "type" : "e"});
}else if(/^[\s>+]$/.test(arr[i])){
if(/^\s$/.test(arr[i])) arr[i]="n";
if(!/^\s+$/.test(_tv)) tems.push({"val" : _tv, "type" : arr[i]});
_tv="";
}else{
_tv+=arr[i];
if(i+1==L) tems.push({"val" : _tv, "type" : "e"});
}
}
return tems;
},
_$ : function(id,doc){
if(typeof(id)!="string") return id;
if(doc==undefined) doc=document;
var rts=[];
if(/^[\w-]+$/.test(id)){//id="tagname"
rts=doc.getElementsByTagName(id);
}else if(/^#[\w-]+$/.test(id)){
rts.push(doc.getElementById(id.replace("#","")));//id="#id"
}else if(/^\.[\w-]+$/.test(id)){
rts=doc.getElementsByName(id.replace(".",""));//id=".name"
}else if(/^[\.#\w]?\w+\[.+?\]$/.test(id)){
var sidx=id.indexOf("["),tidx=id.indexOf("="),eidx=id.indexOf("]");
var nodes=__$_$__._$(id.substr(0,sidx),doc);
var t=id.substr(sidx+1,tidx-sidx-1).toLowerCase();
var v=id.substr(tidx+1).replace(/['"\]]/g,"").toLowerCase();
var tl=t.substr(t.length-1);
if(tl=="~" || tl=="!" || tl=="|") t=t.substr(0,t.length-1);
else tl="=";
if(t=="class") t="className";
for(var k=0;k<nodes.length;k++){
var att=eval("nodes[k]."+t);
if(att!=undefined){
att=att.toLowerCase();
if(att==v && tl=="="){
rts.push(nodes[k]);
}else if(att!=v && tl=="!"){
rts.push(nodes[k]);
}else if(tl=="~"){
att=" " + att + " ";
if(att.indexOf(" " + v + " ")>=0)
rts.push(nodes[k]);
}else if(tl=="|"){
att="-" + att + "-";
if(att.indexOf("-" + v)>=0)
rts.push(nodes[k]);
}
}
}
}
return rts;
},
$ : function(id,doc){
id=id.replace(/\s+/g," ").replace(/\s*([>+,])\s*/g,"$1");
if(typeof(id)!="string") return id;
if(doc==undefined) doc=document;
if(/^#[\w-]+$/.test(id)) return doc.getElementById(id.replace("#",""));
var rts=[];
var arr=id.split(",");
for(var i=0;i<arr.length;i++){
var r=/[\s>\+]/;
if(!r.test(arr[i])){
rts=rts.appendList(__$_$__._$(arr[i]));
}else{
var tems=__$_$__._parseIdString(arr[i]);
var ds=[];
for(var k=0;k<tems.length;k++){
if(k==0){
ds=ds.appendList(__$_$__._$(tems[k].val));
}else{
var _tems=[];
for(var kk=0;kk<ds.length;kk++){
if(tems[k-1].type=="n"){
_tems=_tems.appendList(__$_$__._$(tems[k].val,ds[kk]));
}else if(tems[k-1].type==">"){
var ns=__$_$__._$(tems[k].val,ds[kk]);
for(var kkk=0;kkk<ns.length;kkk++){
if(ns[kkk].parentNode==ds[kk]) _tems.push(ns[kkk]);
}
}else if(tems[k-1].type=="+"){
var _nodes=__$_$__._$(tems[k].val,ds[kk].parentNode);
var _chs=ds[kk].parentNode.childNodes;//inArray
var l=_chs.length;
var isIn=false;
for(var j=0;j<l;j++){
if(_chs[j]==ds[kk]){
isIn=true;
}
if(isIn && j+1<l){
if(_chs[j+1].tagName==undefined){
continue;
}else{
if(__$_$__.inArray(_nodes,_chs[j+1]))_tems.push(_chs[j+1]);
}
}
}
}
}
ds=_tems;
}
}
rts=rts.appendList(ds);
}
}
return rts;
}
};alert(Mit.$('#d > span').length)//试试
alert(Mit.$('#d span').length)//试试
1)根据id获取标签(id选择)，返回的是唯一标签
<div id="id">获取这个标签</div>
var obj=Mit.$("#id");//注意id前必须加#
2)根据name获取标签(name选择，注：只有input标签可以使用此方式获取)，返回的是标签集合
<input type='text' id='id1' name='name' value='获取这个标签'/>
<input type='text' id='id2' name='name' value='获取这个标签'/>
var inputs=Mit.$(".name");//注意name值前必须加.
//这里得到的是id1、id2两个标签，inputs[0]=id1、inputs[1]=id2;
3)根据标签名获取标签(tagname选择)，返回的是标签集合
var divs=Mit.$("div");//获取所有div标签
var lis=Mit.$("li");//获取所有li标签
4)根据标签的属性获取标签(属性选择)，返回标签集合
var nodes=Mit.$("div[class='css']")//获取class="css"的所有div标签，Mit.$("div[class=css]")、Mit.$('div[class="css"]')效果同等
var nodes=Mit.$("div[class!='css']")//获取class不等于css的所有div标签
var nodes=Mit.$("div[class~='css']")//获取所有class属性具有多个空格分隔的值、其中一个值等于“css”的E元素
//如<div class="css abc"/><div class="my css"
var nodes=Mit.$("div[class|='css']")//匹配所有class属性具有多个连字号分隔(hyphen-separated)的值
//其中一个值以"css"开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等
注意：
对于a标签，如果是根据href属性进行选择，那么写法如下
var url=window.location.href + "#";//获取href="#"的超链接
var nodes=Mit.$("div a[href='" + url + "']");5)多元素选择，返回的是标签集合，多元素选择使用逗号(,)隔开
<div id="id1">获取这个标签</div>
<div id="id2">同时获取这个标签</div>
var nodes=Mit.$("#id1,#id2");
说明：不同规则之间使用半角逗号(,)隔开
6)子元素选择，返回的是标签集合(只返回第一代子元素，子元素的子元素不返回),子元素选择使用大于号(>)隔开
<div id="id">
<div>获取这个标签</div>
<div>获取这个标签</div>
<div>获取这个标签
<div>不获取子标签的子标签</div>
</div>
<p>不获取这个标签</p>
</div>
var childNodes=Mit.$("#id>div");
7)后代元素选择(包括后代的后代)，返回标签集合，后代选择使用空格隔开
<div id="id">
<div>获取这个标签</div>
<div>获取这个标签</div>
<div>获取这个标签
<div>包括这个标签</div>
</div>
<p>不获取这个标签</p>
</div>
var childNodes=Mit.$("#id div");
8)相邻选择，返回标签集合(通常这个集合只包含一个元素)，相邻选择使用加号(+)隔开
<div id="id">获取这个标签的相邻元素</div>
<p>获取这个标签</p>
<p>不获取这个标签</p>
var nodes=Mit.$("#id+p");
注意：这里的相邻元素一定是紧挨着的元素，以下情况将不满足匹配条件
<div id="id">获取这个标签的相邻元素</div>
<div>有一个元素隔开</div>
<p>无法获取这里的表情</p>
<p>不获取这个标签</p>
Mit.$("#id+p")将返回0个元素的集合注：id选择、name选择、tagname(标签名)选择、子元素选择、后代选择、多元素选择、相邻选择等可以组合使用
例如：
Mit.$("#first+div[class=title]")
Mit.$("#first,#first+div[class=title]")