Question

考虑以下JavaScript代码here（在浏览器JavaScript中）：

  var x = document.getElementById("demoID");
  x.style.color = "blue";

用此工作代码替换它是否安全：

 demoID.style.color = "blue";

HTML5：

<!DOCTYPE html>
<html>
<body>

<p id="demoID">Click the button to change the color of this paragraph.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  // var x = document.getElementById("demoID");
  // x.style.color = "blue";
  demoID.style.color = "blue";
}
</script>

</body>
</html>

与document.getElementById相比，性能（速度）如何？

编辑：
我做了一个微基准测试document.getElementById快了3.7倍：

HTML：

    <input type="checkbox" id="checkboxSigned" onchange="numberBase10changed()">Signed

    <div id="div2"></div>

JavaScript：

    let signed=false;
    let t0 = performance.now();
    for (let i=0; i<1000000; i++){
        // signed = document.getElementById("checkboxSigned").checked; // 88ms to 116ms
        signed = checkboxSigned.checked; // 369ms to 398ms
        g++;
    }
    div2.innerText = g+"interval = " + Math.trunc( performance.now()-t0 ) + "ms";

signed = document.getElementById("checkboxSigned").checked;的结果

88ms to 116ms

signed = checkboxSigned.checked;的结果

369ms to 398ms

预先感谢您的帮助。

Answer 1

安全吗？ ..是的。可读吗？ ..不。

首先，这是有效的，因为所有id都已添加到窗口对象中。因此JS将继续遍历父对象的作用域，直到到达窗口为止。

尽管我认为这会影响可读性。尚不清楚在何处引用或初始化demo。正如您将要寻找的variable声明一样，您将永远找不到。

根据HTML规范：

窗口[名称]

返回所指示的元素或元素集合。

通常，依靠它会导致代码变脆。例如，随着新功能添加到Web平台，最终映射到该API的ID会随时间变化。代替此，使用document.getElementById（）或document.querySelector（）。

替换document.getElementById（“ demoID”）。style.color =“ blue”;是否安全？与demoID.style.color =“ blue”;

1 个答案: