我正在尝试获取具有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')并循环遍历,直到找到第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;
}
}
使用querySelector和querySelectorAll
var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');
IE9及更高版本
;)
接受的答案仅检查直系子女。通常,我们正在寻找具有该类名称的任何后代。
另外,有时我们希望任何包含className的孩子。
例如:<div class="img square"></div>
应该匹配对className“ img”的搜索,即使确切的className不是“ img”。
这是针对这两个问题的解决方案:
使用该类查找后代元素的第一个实例 className
function findFirstChildByClass(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;
}
使用element.querySelector()。假设:“ myElement”是您已经拥有的父元素。“ sonClassName”是您要查找的孩子的班级。
let child = myElement.querySelector('.sonClassName');
有关更多信息,请访问:https : //developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelector
您可以尝试:
notes = doc.querySelectorAll('.4');
要么
notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) {
if (notes[i].getAttribute('class') == '4') {
}
}
在我看来,您似乎想要第四个跨度。如果是这样,您可以这样做:
document.getElementById("test").childNodes[3]
要么
document.getElementById("test").getElementsByTagName("span")[3]
最后一个确保没有任何隐藏的节点可能将其弄乱。
现代解决方案
const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');
但请注意,旧的浏览器不支持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),连字符(“-”)和下划线(“ _”)
ID的名称前应加getElementById
,没有#
符号。然后,您可以span
使用来获得子节点getElementsByTagName
,并遍历它们以找到具有正确类的子节点:
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/
我认为,每次可以使用Array及其方法。它们要快得多,然后遍历整个DOM /包装器,或将内容推入空数组。此处介绍的大多数解决方案都可以按照此处所述(朴素的文章btw)进行调用:
https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc
我的解决方案:(在Codepen上进行实时预览:https://codepen.io/Nikolaus91/pen/wEGEYe )
const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children
const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
if(item.classList.contains('four')) // we place a test where we determine our choice
item.classList.add('the-chosen-one') // your code here
})
您可以通过添加以下行来获取父类。如果您有一个ID,使用会更容易getElementById
。尽管如此,
var parentNode = document.getElementsByClassName("progress__container")[0];
然后,您可以querySelectorAll
在父对象<div>
上使用来获取所有div
与类匹配的s.progress__marker
var progressNodes = progressContainer.querySelectorAll('.progress__marker');
querySelectorAll
将获取div
与progress__marker
我将使用jquery做到这一点的方式是这样的。
vartargetedchild = $(“#test”)。children()。find(“ span.four”);
这是一个相对简单的递归解决方案。我认为在此进行广度优先搜索是合适的。这将返回与找到的类匹配的第一个元素。
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;
}
2018年6月更新到ES6
const doc = document.getElementById('test');
let notes = null;
for (const value of doc) {
if (value.className === '4') {
notes = value;
break;
}
}
我知道这个问题已有几年历史,并且对此有一些答案,但是我认为我会添加我的解决方案,以防万一它对任何人都有帮助。它与user2795540给出的答案相同,并且涉及数组迭代器。
如果您只想获得第一个具有four
该类的孩子,则可以使用find
数组迭代器。您的浏览器将需要能够支持ES6,或者您可以使用Babel将JS编译为所有浏览器都将支持的东西。如果没有polyfill,IE将不支持此功能。
使用您在问题中提供的相同详细信息,它看起来可能像这样:
const parentNode = document.getElementById('test');
const childNode = Array.from(parentNode.childNodes).find(({ className }) => className === 'four');
上面的解决方案将返回您要定位的节点并将其存储在childNode
变量中。
您可以find
在https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find中找到有关数组迭代器的更多信息。
YUI2具有的跨浏览器实现getElementsByClassName
。
这是我使用YUI选择器的方法。感谢汉克·盖伊的建议。
notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');
其中四个=类别名称,span =元素类型/标签名称,而test =父ID。
YAHOO.util.Dom.getElementsByClassName()
从这里使用。
文章标签:javascript , yui
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!