是什么导致了这个意外的 Javascript 错误？

Question

此代码旨在将样式“display: none”添加到不具有“ShowThis”类或具有该类的后代的每个元素：

var x = document.getElementsByTagName('*');
for(var i = x.length; i--;){
    x[i].style.display = 'none';
    if((' '+x[i].className+' ').indexOf(' ShowThis ') >= 0){
        var y = x[i];
        while(y){
            if(y.nodeType === 1){
                console.log(y.style.cssText);    // Outputs: "display: none;"
                console.log(y.style.display);    // Outputs: "none"
                y.style.display = 'block';
                console.log(y.style.display);    // Outputs: "block"
                console.log(y.style.cssText);    // Outputs: "display: block;"

                // ERROR here:
                    // Outputs the elements HTML (Chrome Console),
                    // But the style attribute isn't changed
                    // EX. <div style="display: none;">...</div>
                console.log(y);
            }
            y = y.parentNode;
        }
    }
}

这是一个 JSFiddle： http://jsfiddle.net/Paulpro/wEq8X/

如果注释掉 if(y.nodeType === 则效果很好1){ 和匹配的 } (http://jsfiddle .net/Paulpro/wEq8X/1/），或者如果我将 if 语句更改为 if(y.nodeType) 或 if(true) ，这不会对我来说根本没有任何意义因为程序流无论如何都会输入该 if 语句（所有 console.log 都被执行）。

我尝试将 if 语句更改为 if(typeof y.style !== 'undefined') 并且它的行为也不正确。 （完全相同的问题）

我需要测试 nodeType 或 style 以防止在尝试访问文档的 style 属性时出现错误，但是测试它们中的任何一个都会给我带来这种奇怪的行为。

我可以在 Chrome、Firefox 和 IE 中重现这一点。

Answer 1

您的代码将包含块设置为“display: none”。之后，内部的

是“display: block”就没关系了。

你们倾倒元素的诊断技术是有缺陷的。如果您使用 Chrome 调试器或 Firebug 等工具，您会看到“ShowThis”元素的“style”属性中确实有“display: block”。但是，它不会显示，因为它的所有父元素（包括 标记）仍然是“display: none”。

编辑我认为问题可能源于页面元素在“getElementsByTagName()”结果中出现的顺序。如果您在子元素之后到达父元素，那么它们将在在设置为“display: block”之后设置为“display: none”。

再次编辑 - 已确认。从“getElementsByTagName()”返回的元素以它们在 HTML 中出现的相反顺序出现。因此，您的代码在外循环中看到的最后一个元素是“ShowThis”

的容器

。

再次编辑哦，我明白了 - 你在倒退！杜尔。如果您继续浏览节点列表，它应该可以工作。

Answer 2

您的问题是，隐藏所有内容的外循环将在您设置为 display='block' 后隐藏 'showthis' 节点的父节点。如果将隐藏和显示分成两个步骤，效果很好。

var y, x = document.getElementsByTagName('*');
for(var i = 0, len = x.length; i < len; i++){
    x[i].style.display = 'none';
}
x = document.getElementsByClassName('ShowThis');
for(var i = 0, len = x.length; i < len; i++) {
    y = x[i];
    while(y){
        if(y.nodeType === 1){
            y.style.display = 'block';
        }
        y = y.parentNode;
    }
}

另外，郑重声明一下，这种类型的事情正是 jQuery 的厉害之处。

jQuery('*').hide();
jQuery('.ShowThis').show().parents().show();