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元素的后代的集合（数组，有效）。

E.g。考虑一些标记：

<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'的span，childnodes [1]将返回带有id ='s2'的span，依此类推。

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

更多细节：https://developer.mozilla.org/En/DOM/Node.childNodes

人们会抱怨与w3schools.com的链接，但是这对于快速介绍概念是足够的。

Answer 3

根据按下的键获取不同的DOM元素。

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

3 个答案: