2017-05-18 63 views
1

我试图从本质上选择元素内的元素。该HTML看起来是这样的:如何选择没有标识或类的元素?

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
    <div class="first"> 
     <div></div> 
     <div><!-- the element I want to select --></div> 
    </div> 
    </body> 
</html> 

我已经尝试了一个方法,它看起来像这样:

function findFirstDescendant(parent, tagname) { 
    parent = document.getElementsByClassName(parent)[0]; 
    var descendants = parent.getElementsByTagName(tagname); 
    if (descendants.length) 
    return descendants[0]; 
    return null; 
} 

而且这样的:

document.getElementsByClassName("first")[0].getElementsByTagName("div")[1]; 

无论是工作,方法似乎过时。我想保留jQuery,但如果没有其他解决方案,这是可以接受的。

+0

你的第二次尝试表现为预期为我工作Chrome浏览器:https://jsfiddle.net/Obsidian_Age/ay4a990L/ –

+0

这似乎是一个浏览器兼容性问题。你正在使用哪种浏览器? – shaochuancs

+0

@shaochuancs我在Chrome上使用了tampermonkey扩展。 – DaFudgeWizzad

回答

0

对不起浪费任何人的时间。我觉得有点愚蠢,因为没有早点想到这一点。我通过向脚本添加250ms延迟来解决问题,因为它在页面完全加载之前正在执行。我的代码是与此类似:

setTimeout(function() { 
    var a = document.getElementsByClassName("card-player")[0].getElementsByTagName("div")[0]; 
    console.log(a); 
}, 250); 

你也可以添加更多的变量,如果你想调试或日志的详细信息如下:

setTimeout(function() { 
    var a = document.getElementsByClassName("first")[0]; 
    var b = a.getElementsByTagName("div")[1]; 
    var c = b.getElementsByTagName("div")[1]; 
    var d = b.getElementsByTagName("div")[2]; 
}, 250); 
+0

您应该将'javascript'代码放在页面底部或代码放在'document.onload = function(){/ * code here * /}'中,而不是使用延迟。 –

+0

'setTimeout'是一个非常糟糕的解决方案。使用IIFE,'window.onload'或'DOMContentLoaded'。 – Badacadabra

0

你一定要使用querySelector利用CSS选择器...

var el = document.querySelector('.first > div:nth-child(2)'); 
 
console.log(el);
<!DOCTYPE html> 
 
<html> 
 
    <head></head> 
 
    <body> 
 
    <div class="first"> 
 
     <div></div> 
 
     <div>Hello!</div> 
 
    </div> 
 
    </body> 
 
</html>

但很明显,你可以用这个也比较经典的解决方案:

var el = document.getElementsByClassName('first')[0].getElementsByTagName('div')[1]; 
 
console.log(el);
<!DOCTYPE html> 
 
<html> 
 
    <head></head> 
 
    <body> 
 
    <div class="first"> 
 
     <div></div> 
 
     <div>Hello!</div> 
 
    </div> 
 
    </body> 
 
</html>

相关问题