Question

getelementbytagname("div")方法可以获取所有的DIV元素，但是获取到集合后，如何进一步获取class属性为特

特定的元素?

Answer 1

原生JS有3种方式来获取元素:
getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=document.getElementsByTagName(tagName||"*"); for(var i=0;i<all.length;i++){ if(all[i].className==className){ ele[ele.length]=all[i]; } } return ele; } console.log(getElementsByClassName("entry")); console.log(getElementsByClassName("entry","div"));
实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的
tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..
上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?
明显通过className==是不行了
所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数
function getElementsByClassName(className,tagName){ var ele=[],all=document.getElementsByTagName(tagName||"*"); for(var i=0;i<all.length;i++){ if(all[i].className.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[ele.length]=all[i]; } } return ele; }
这样就能处理一个元素含有多个classname的情况了

Answer 2

$(‘div span’) 可以选取DIV里所有的SPAN，是一个集合 $(‘div > span’) 可以选取DIV元素下标签名为span的元素，是一个集合看这样一段代码：<div>父节点 <p class="one">子节点DIV <span>孙节点</span> </p> <span>子节点SPAN</span></div>小提示！这里有一个需要注意的地方，很多人对以上这两者区别有些混淆，只有空格的选择器是把DIV下所有的SPAN元素都返回，无论是子节点还是孙节点，对于以上HTML代码来说，找到的就是2个元素，一个是”孙节点“，一个是”子节点SPAN“；而后者有个“>”符号的选择器，只是把DIV子节点中的SPAN元素返回，对于以上HTML代码来说就是1个元素，即“子节点SPAN”。