jQueryなしでJavascriptでセレクタをチェーンする方法

Question

外部サイトのレイアウトを操作しようとしている間、私はしばしばセレクタのチェーンを使用して、必要な特定の要素をターゲットにしなければなりません。これに初めて遭遇したとき、私はjQueryソリューションを提供され、結果を得るのはとても簡単です。私はjQueryに頼らないことを好み、これが標準のJavascriptでどのように実行可能であるかを知りたいと思います。ここでは例としてjQueryの 'チェーン' です -

$('div[id="entry"] > p[class="header"] > span[id="title"] > div[class*="entry"] > p[class="title"] > a[class*="target"]').. etc 

だから、HTMLの構造は、大きく

<div id="entry"> 
    <p class="primary"> 
    <p class="header"> 
     <span class="side"> 
     <span id="title"> 
      <div class="secondary entry"> 
       <p class="return"> 
       <p class="title"> 
        <a class="img"> 
        <a class="mytargetelement"> 

それでは、どのように、これは通常可能ですって？ありがとう。

Answer 1

document.querySelectorAllを入力します。

jQueryがサポートしているブラウザでは、jQueryが内部的に使用するものです。構文は、jQuery（Sizzle）セレクタと同じです（Selectors APIを参照）。

Answer 2

これは..あなたがchildNodesプロパティを経由してその子を得ることができ、それぞれの連鎖/ネストされた要素について

きれいではありません。そして、ループを開始しましょう。 ：/次に、適切に一致する要素が見つかるまで、すべての子と子の子を再帰的にループする必要があります。を更新しました

：あなたはjQueryのを避けるだけで、複雑なCSSセレクタを使用したい場合は、

if (element.className.indexOf('myClass') >= 0) { 
    // found it! 
} 

Answer 3

：

クラス名の一部かどうかを確認するには、このような何かを行うことができますSizzleJS libraryが必要な場合があります。 DOM要素を探すたびに、自分で行うよりもはるかに簡単です！

Answer 4

function selectors(){ 
     var temp= [];  //array for storing multiple id selectors. 
     for(var i = 0;i<arguments.length;i++){ 
     if(typeof arguments[i] === 'string') 
     temp.push(document.getElementById(arguments[i])); 
      } 

      return temp; //for chanining 
     }, 

now call the function as many time as you want like 
selectors('p').selectors('anyid')