时间戳

首页 > 解决方案 > 替换 document.getElementById("demoID").style.color = "blue"; 是否安全 使用 demoID.style.color = "blue";

javascript - 替换 document.getElementById("demoID").style.color = "blue"; 是否安全 使用 demoID.style.color = "blue";

问题描述

考虑这里的 JavaScript 代码（在浏览器 JavaScript 中）：

  var x = document.getElementById("demoID");
  x.style.color = "blue";
  1. 用这个工作代码替换它是否安全：
 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>
  1. 与 相比，性能（速度）如何document.getElementById？

编辑：
我做了一个微基准测试，速度提高了document.getElementById3.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

在此先感谢您的帮助。

标签： javascripthtmlcss

解决方案

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

首先，这是可行的，因为所有id的 ' 都添加到了 window 对象中。所以JS将继续向上遍历父级的范围，直到它碰到窗口。

虽然我认为这会影响可读性。目前尚不清楚在哪里demo引用或初始化。因为您将寻找一个variable您永远找不到的声明。

从 HTML 规范：

窗口[名称]

返回指定的元素或元素集合。

作为一般规则，依赖于此会导致代码脆弱。例如，随着新功能被添加到 Web 平台，哪些 ID 最终映射到此 API 可能会有所不同。取而代之的是，使用 document.getElementById() 或 document.querySelector()。

推荐阅读