Can someone explain what this snippet of code is doing?

Question

Im trying to learn javascript by tracing through some code at the moment, I was wondering if someone could explain what is happening in this snippet of code (this snippet is just part of a function hence no closing brace):

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

The part im confused about most in this is the childNodes[] and the if(i) statements?

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

Note that var tri = document.getElementById("foo").childNodes[i]; is a useless line, because i cannot be negative, one of the next three if statements will always succeed and tri will be overwritten.

Also note that when i = 0 , (i*2)+1 = 1 and when i = 1 , (i*2)+1 = 3 , so those other two if statements are useless as well because the third covers all cases and doesn't need to even be in an if clause. The above code is 100% equivalent to:

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

            ...

Since i is the variable used to iterate through the array called keys , and the node selected depends on i . keys must be an array with an unusual purpose. It is an array of keyCodes, where the position of the keyCode in the array determines which node should be selected and stored in tri when that key is pressed.

Answer 2

Childnodes is the collection (array, effectively) of descendents of a DOM element.

Eg consider some markup:

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

in this scenario, document.getElementById('p1').childnodes[0] will return span with id='s1', childnodes[1] will return the span with id='s2' and so on.

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

More detail: https://developer.mozilla.org/En/DOM/Node.childNodes

People will complain about a link to w3schools.com, but imho it is adequate for quick intros to concepts.

Answer 3

根据所按下的键，它会获得不同的DOM元素。