誰かがこのコードスニペットが何をしているのか説明できますか？

Question

イム（このスニペットはちょうどので、機能の一部がない閉じ括弧で）誰かがこのコードのスニペットでは何が起こっているかを説明することができれば、私は思っていた、現時点ではいくつかのコードをトレースすることにより、JavaScriptを学ぼう：

document.addEventListener("keydown",function(e){ 

     for(i=0;i < keys.length; i++) { 

      if(e.keyCode == keys[i]){ 

      var tri = document.getElementById("foo").childNodes[i]; 

      if(i==0){ 
       var tri = document.getElementById("foo").childNodes[1]; 
      } 

      if(i==1){ 
       var tri = document.getElementById("foo").childNodes[3]; 
      } 

      if(i > 1) { 
       var tri = document.getElementById("foo").childNodes[(i*2)+1]; 
      } 

ここで最も混乱しているのは、childNodes []とif（i）文です。

Answer 1

// Bind an event handler to keydown on the entire document 
document.addEventListener("keydown",function(e){ 

    // Everything in here happens on keydown 

    // keys must be an array declared somewhere earlier in the code 
    // This loops through that array 
    for(i=0;i < keys.length; i++) { 

     // If the current key we are looking at in the array 
     // is the key that was pressed 
     if(e.keyCode == keys[i]){ 

      // Get the (i+1)th childnode of foo 
      var tri = document.getElementById("foo").childNodes[i]; 

      // If i = 0 get the second element (not the first) 
      if(i==0){ 
       var tri = document.getElementById("foo").childNodes[1]; 
      } 

      // If i == 1 get the fourth element (not the second) 
      if(i==1){ 
       var tri = document.getElementById("foo").childNodes[3]; 
      } 

      // Otherwise get the (i*2+2)th element. 
      if(i > 1) { 
       var tri = document.getElementById("foo").childNodes[(i*2)+1]; 
      } 

      // Here we are still in an if-statement, in a loop, in a function, 
      // so there is probably more code here, at least some closing }'s 

注意が上書きされます。

はまたi = 0、(i*2)+1 = 1とi = 1、(i*2)+1 = 3ので、if文、それらの他の2つは、同様役に立たないとき第三は、すべてのケースをカバーし、たとえ句内にある必要はありませんので注意してください。上記のコードに100％と等価である：iはkeysという配列を反復処理するために使用される変数であり、選択されたノードがiに依存するので

document.addEventListener("keydown",function(e){ 

    for(i=0;i < keys.length; i++) { 

     if(e.keyCode == keys[i]){ 

      var tri = document.getElementById("foo").childNodes[(i*2)+1]; 

      ... 

。 keysは、珍しい目的の配列でなければなりません。これはkeyCodeの配列で、配列内のkeyCodeの位置によって、そのキーが押されたときにどのノードを選択してtriに格納するかを決定します。

Answer 2

キーを押したときに異なるDOM要素を取得します。

Answer 3

Childnodesは、DOM要素の子孫のコレクション（実質的には配列）です。

など。いくつかのマークアップを考慮します。このシナリオで

<div id='div1'> 
    <p id='p1'> 
     <span id='s1'>Span one</span> 
     <span id='s2'>Span two</span> 
     <span id='s3'>Span three</span> 
    </p> 
</div> 

、のdocument.getElementById（P1 'を'）のchildNodes [0] ID = 'S1' とスパンを返し、のchildNodes [1] ID =でスパンを戻します」 s2 'などとなる。

http://www.w3schools.com/Dom/prop_element_childnodes.asp

もっと詳しく：https://developer.mozilla.org/En/DOM/Node.childNodes

人々はw3schools.comへのリンクに文句を言うだろうが、私見それは概念への迅速なイントロには十分です。文は常に成功し、triれる場合iは、次の3つのいずれかの負にすることはできませんのでvar tri = document.getElementById("foo").childNodes[i];は、役に立たないラインであることを