document.getElementById的值是什么？

Question

我是一名经验丰富的程序员，但我正在尝试学习JavaScript，并且通过了解事情的工作方式来学习最佳。我发现一个脚本可以淡化数组中的图像。这是脚本

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); 

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; 

function so_init() { 
if(!d.getElementById || !d.createElement)return; 

css = d.createElement("link"); 
css.setAttribute("href","xfade2.css"); 
css.setAttribute("rel","stylesheet"); 
css.setAttribute("type","text/css"); 
d.getElementsByTagName("head")[0].appendChild(css); 

imgs = d.getElementById("imageContainer").getElementsByTagName("img"); 
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; 
imgs[0].style.display = "block"; 
imgs[0].xOpacity = .99; 

setTimeout(so_xfade,1000); 
} 

function so_xfade() { 
cOpacity = imgs[current].xOpacity; 
nIndex = imgs[current+1]?current+1:0; 

nOpacity = imgs[nIndex].xOpacity; 

cOpacity-=.05; 
nOpacity+=.05; 

imgs[nIndex].style.display = "block"; 
imgs[current].xOpacity = cOpacity; 
imgs[nIndex].xOpacity = nOpacity; 

setOpacity(imgs[current]); 
setOpacity(imgs[nIndex]); 

if(cOpacity<=0) { 
    imgs[current].style.display = "none"; 
    current = nIndex; 
    setTimeout(so_xfade,1000); 
} else { 
    setTimeout(so_xfade,50); 
} 

function setOpacity(obj) { 
    if(obj.xOpacity>.99) { 
     obj.xOpacity = .99; 
     return; 
    } 
    obj.style.opacity = obj.xOpacity; 
    obj.style.MozOpacity = obj.xOpacity; 
    obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; 
} 

} 

我有困难的部分是与这些线路

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); 

和

if(!d.getElementById || !d.createElement)return; 

一切我能找到同时显示了window.addEventListener和d.getElementById是窗口和文档对象的方法分别。那么当他们被调出没有任何参数时，他们的价值是什么？在这些情况下，什么样的条件会使他们真实，什么样的条件会使他们失实。

Answer 1

if(!d.getElementById || !d.createElement)return; 

此行测试以查看所有方法是否存在，即它测试浏览器是否支持这两种方法。处理浏览器兼容性并不好玩，但最好是测试功能而不是浏览器版本。

Answer 2

代码正在检查以查看这些方法是否存在，以及它们是否正在使用替代方法（浏览器兼容性问题）或中止将无法正常工作的函数。

这条线：

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); 

被检查，看是否存在window.addEventListener。如果确实如此，那就叫它。如果它不存在，则调用window.attachEvent。这是为了处理旧版本的IE，它没有addEventListener，但有一个类似的功能叫做attachEvent。大多数理智的程序员会把这个抽象放到一个实用函数或者一个垫片中，你可以用它来抽象出正常的编程。在IE9之前的所有IE版本中仍然需要这种逻辑。

这条线：

if(!d.getElementById || !d.createElement)return; 

被中止函数（与早期返程）如果任一的getElementById或createElement不存在作为对象d属性/方法。此检查不再需要，因为这些方法存在于所有当前使用的浏览器中（添加到5.5中的IE，Firefox，Chrome和Safari中的1.0中）。

Answer 3

在这两种情况下，脚本似乎都在练习渐进式enhancement techniques和优雅的降解技术。看看这篇文章，但总之，它检查浏览器是否支持这些功能。

Answer 4

如果您使用没有括号的函数名称，它不会调用该函数，它会为您提供对函数的引用。一个非常简单的例子：

function f1() { alert("hi"); } 

var f2 = f1; // This doesn't call the f1 function, it takes a reference 
       // to it and assigns it to f2. 
f2();   // Can call f2 since it refers to the same function; alerts "hi" 

你可以从函数名是发生在坚持函数的引用而不是字符串或数字或任何真的只是变量看，这东西或许更明显，如果你定义这样的功能：

var f3 = function() { alert("hello") }; 
f3();   // "hello" 

所以，用这样的背景下这是什么意思是说if (someFunctionName)？在JS中，表达式被认为是“真理”，不仅仅是它是一个布尔真，而且它是一个非空字符串，一个非零数字或任何对象（甚至是一个空对象）。空字符串，零，null，undefined和NaN都是“虚假”。布尔型true与“truthy”之间的区别在JavaScript中非常重要。 JS函数是一种对象。所以：

if (someFunctionName) 
// is testing if someFunctionName is "truthy" and is a shortcut way of saying 
if (someFunctionName != undefined) 
// also equivalent to 
if (typeof someFunctionName != "undefined") 

你问，if(d.getElementById)第二个例子，是一个测试对象d（被设置为document）有一个名为getElementById方法。在一般意义上，这是因为很久以前，并非所有浏览器都支持该方法，所以此代码旨在允许代码在所有浏览器中运行而不会出错。至少在IE5的日子里至少支持document.getElementById()，所以这个测试是多余的。

您询问的第一个示例仍然相关，但因为IE8及更高版本不支持window.addEventListener。因此，代码：

window.addEventListener ? window.addEventListener("load",so_init,false) 
         : window.attachEvent("onload",so_init); 

使用三元运算符? :测试window.addEventListener是否定义。如果是，它会调用它，否则它会调用window.attachEvent（这是旧的IE等效）。所有现代浏览器都支持其中一种。