有人可以解释这段代码在做什么吗？

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

请注意， var tri = document.getElementById("foo").childNodes[i]; 是一条无用的行，因为i不能为负，所以接下来的三个if语句之一将始终成功并且tri将被覆盖。

另请注意，当i = 0 ， (i*2)+1 = 1而当i = 1 ， (i*2)+1 = 3 ，因此其他两个if语句也无用，因为第三个覆盖所有情况，并且甚至不需要在if子句中。 上面的代码100％等效于：

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

            ...

由于i是用于遍历称为keys的数组的变量，因此选择的节点取决于i 。 keys必须是具有非正常用途的数组。 它是一个keyCodes数组，其中keyCode在数组中的位置决定了按下该键时应选择哪个节点并将其存储在tri 。

Answer 2

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的链接，但是恕我直言，它足以快速介绍概念。

Answer 3

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