標準のjavascriptメソッドを使用してノードの配列を選択する方法

Question

リストから取得したい要素の配列があり、要素を変更できません。通常はjQueryを使用し、呼び出しは次のようになります。

$("//div/ol/li/h3/a"); 

は、しかし、私はこれが行われるべきか、jqueryのか、そのことについては、別のセレクタフレームワークを訴えることができません。

Answer 1

注：//div/ol/li/h3/aは、私の知る限りのjQueryによってもはやサポートされていないXPath式、であるようです。ターゲットブラウザがそれをサポートしている場合

、あなたは単にquerySelectorAll^[MDN]を使用することができます。

var links = document.querySelectorAll('div > ol > li > h3 > a'); 

そうでない場合は、直接変換は次のようになります。

// root is the element you start with, e.g. `document.body` 
var selector = ['ol', 'li', 'h3', 'a'], 
    set = root.getElementsByTagName('div'); 

for(var i = 0, len = selector.length; i < len; i++) { 
    var tag = selector[i], 
     new_set = []; 

    for(var j = 0, lenj = set.length; j < lenj; j++) { 
     for(var child = set[j].firstChild; child; child.nextSibling) { 
      if(child.nodeName.toLowerCase() === tag) { 
       new_set.append(child); 
      } 
     } 
    } 

    set = new_set; 
} 

終わりに、setは、すべてのリンクが含まれます。また、HTML構造に関する詳細情報があれば、再帰関数を書くか、コードを単純化することもできます。

Answer 2

私はあなたの質問を理解してから、すべてのdiv、ol、li、h3または任意のjavascriptフレームワークに依存せずに単一の配列でドキュメントから要素を取得します。

私はこのような何かをするだろうと思います。

http://jsfiddle.net/UP3nH/

---

UPDATE

@FelixクリングはOPが問題の使用のXPathセレクタしようとしていることを指摘しています。 あなたがこれを行うことがXPathクエリ//div/ol/li/h3/aにマッチした要素の配列を作成するには

（これはjQueryのの最近のバージョンでは廃止されました）。

var tags = ['ol', 'li', 'h3', 'a']; 
var result = []; 
var leafs = document.getElementsByTagName(tags[tags.length - 1]); 

for (var i = 0; i < leafs.length; i++) { 
    var a = leafs[i], 
     j = (tags.length - 1); 
    while (a && a.nodeName.toLowerCase() == tags[j].toLowerCase()) { 
     j--; 
     a = a.parentNode; 
     if (j < 0) { 
      result.push(leafs[i]); 
      break; 
     } 
    } 
} 

console.log(result);​