2017-05-18 24 views
1

私は要素内の要素を本質的に選択しようとしています。IDまたはクラスのない要素を選択するにはどうすればよいですか?

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]; 

どちらの作業、方法はそうと、私はこのようになります一つの方法を、試してみました

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

:HTMLは次のようになります時代遅れになる私はjQueryをこのままにしたいと思いますが、他の解決策がない場合は受け入れられます。

あなたは間違いなく

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>

... CSSセレクタを活用するためにquerySelectorを使用する必要があります。しかし、明らかに、あなたもこのより古典的な溶液を使用することができます

+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

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>

関連する問題