如何按类名得到子元素？
我试图得到具有class = 4的子跨度。下面是一个示例元素：
<div id="test"> <span class="one"></span> <span class="two"></span> <span class="three"></span> <span class="four"></span> </div> 我有可用的工具是JS和YUI2。 我可以做这样的事情：
doc = document.getElementById('test'); notes = doc.getElementsByClassName('four'); //or doc = YAHOO.util.Dom.get('#test'); notes = doc.getElementsByClassName('four');
这些在IE中不起作用。 我得到一个错误，对象（doc）不支持这个方法或属性（getElementsByClassName）。 我已经尝试了一些getElementsByClassName的跨浏览器实现的例子，但我无法让他们工作，仍然有这个错误。
我想我需要的是跨浏览器getElementsByClassName或我需要使用doc.getElementsByTagName（'span'）并循环直到我find类4.我不知道如何做到这一点，虽然。
使用doc.childNodes遍历每个span ，然后过滤className等于4那个：
var doc = document.getElementById("test"); var notes = null; for (var i = 0; i < doc.childNodes.length; i++) { if (doc.childNodes[i].className == "4") { notes = doc.childNodes[i]; break; } }
被接受的答案是这个问题的一个可怕的普遍答案。 它只检查直接的孩子。 很多时候，我们正在寻找任何有这个class名的孩子：
function findClass(element, className) { var foundElement = null, found; function recurse(element, className, found) { for (var i = 0; i < element.childNodes.length && !found; i++) { var el = element.childNodes[i]; var classes = el.className != undefined? el.className.split(" ") : []; for (var j = 0, jl = classes.length; j < jl; j++) { if (classes[j] == className) { found = true; foundElement = element.childNodes[i]; break; } } if(found) break; recurse(element.childNodes[i], className, found); } } recurse(element, className, false); return foundElement; }
对我来说，好像你想要第四个跨度。 如果是这样，你可以这样做：
document.getElementById("test").childNodes[3]
要么
document.getElementById("test").getElementsByTagName("span")[3]
这最后一个确保没有任何隐藏的节点可以搞砸了。
但请注意，旧的浏览器不支持getElementsByClassName 。
那么，你可以做
function getElementsByClassName(c,el){ if(typeof el=='string'){el=document.getElementById(el);} if(!el){el=document;} if(el.getElementsByClassName){return el.getElementsByClassName(c);} var arr=[], allEls=el.getElementsByTagName('*'); for(var i=0;i<allEls.length;i++){ if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])} } return arr; } getElementsByClassName('4','test')[0];
它似乎有效，但要注意一个HTML类
- 必须以字母：AZ或az开头
- 可以跟随字母（A-Za-z），数字（0-9），连字符（“ – ”）和下划线（“_”）
你可以尝试：
notes = doc.querySelectorAll('.4');
要么
notes = doc.getElementsByTagName('*'); for (var i = 0; i < notes.length; i++) { if (notes[i].getAttribute('class') == '4') { } }
使用带有getElementById的id的名称，前面没有#号。 然后，您可以使用getElementsByTagName获取span子节点，并循环遍历它们以find具有正确类的节点：
var doc = document.getElementById('test'); var c = doc.getElementsByTagName('span'); var e = null; for (var i = 0; i < c.length; i++) { if (c[i].className == '4') { e = c[i]; break; } } if (e != null) { alert(e.innerHTML); }
演示： http : //jsfiddle.net/Guffa/xB62U/
我将这样做使用jQuery的方式是这样的..
var targetedchild = $（“＃test”）。children（）。find（“span.four”）;
这是一个相对简单的recursion解决scheme。 我认为这是一个宽度优先的search。 这将返回匹配find的类的第一个元素。
function getDescendantWithClass(element, clName) { var children = element.childNodes; for (var i = 0; i < children.length; i++) { if (children[i].className && children[i].className.split(' ').indexOf(clName) >= 0) { return children[i]; } } for (var i = 0; i < children.length; i++) { var match = getDescendantWithClass(children[i], clName); if (match !== null) { return match; } } return null; }
以前的答案升级到ES6
<div id="test"> <span class="es5">es5</span><span class="es6">es6</span> </div> let className = "es6" let elemArray = Array.from(document.getElementById("test").childNodes) elemArray .filter(childNode => typeof childNode.className !== 'undefined') .filter(childNode => childNode.className.includes(className) )
YUI2有一个getElementsByClassName的跨浏览器实现 。
这是我如何使用YUIselect器。 感谢汉克·盖伊的build议。
notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');
其中four = classname，span =元素types/标签名称，test =父级id。
从这里使用YAHOO.util.Dom.getElementsByClassName() 。
