Javascript 替换document.getElementById（"；demoID"；）.style.color="；是否安全；“蓝色”；；使用demoID.style.color="；“蓝色”；；_Javascript_Html_Css

Javascript 替换document.getElementById（"；demoID"；）.style.color="；是否安全；“蓝色”；；使用demoID.style.color="；“蓝色”；；

javascript html css

Javascript 替换document.getElementById（"；demoID"；）.style.color="；是否安全；“蓝色”；；使用demoID.style.color="；“蓝色”；；,javascript,html,css,Javascript,Html,Css,考虑以下JavaScript代码（在浏览器JavaScript中）：用以下工作代码替换是否安全： 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&g

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

用以下工作代码替换是否安全：

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>

JavaScript:

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

    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=checkboxSigned.checked的结果
369ms to 398ms

提前感谢您的帮助。
安全吗。。对可读。。没有
首先，这是因为所有id
都被添加到窗口对象中。因此，JS
将继续遍历父对象的范围，直到它到达窗口
虽然我认为这会影响可读性。不清楚demo
在何处引用或初始化。因为您将寻找一个永远找不到的变量
声明
来自HTML规范：
窗口[名称]
返回指定的元素或元素集合
一般来说，依赖这一点会导致代码脆弱。随着时间的推移，最终映射到此API的ID可能会有所不同，例如，随着新功能添加到Web平台。使用document.getElementById（）或document.querySelector（）代替此选项
安全吗。。对可读。。没有
首先，这是因为所有id
都被添加到窗口对象中。因此，JS
将继续遍历父对象的范围，直到它到达窗口
虽然我认为这会影响可读性。不清楚demo
在何处引用或初始化。因为您将寻找一个永远找不到的变量
声明
来自HTML规范：
窗口[名称]
返回指定的元素或元素集合
一般来说，依赖这一点会导致代码脆弱。随着时间的推移，最终映射到此API的ID可能会有所不同，例如，随着新功能添加到Web平台。使用document.getElementById（）或document.querySelector（）代替此选项
你怎么能称之为“工作代码”？你试过了吗？是的，它可以在我的Chrome、Firefox和Opera上运行。我现在不能尝试，但如果它能运行，我会感到惊讶，我猜“demo”是未定义的，它在那一行失败。@it'sBritneybitch代码在那一行没有失败。如果id在文档中是唯一的，则由id属性值命名的新变量将自动创建到全局范围。您如何将其称为“工作代码”？你试过了吗？是的，它可以在我的Chrome、Firefox和Opera上运行。我现在不能尝试，但如果它能运行，我会感到惊讶，我猜“demo”是未定义的，它在那一行失败。@it'sBritneybitch代码在那一行没有失败。如果id在文档中是唯一的，则会自动将以id属性值命名的新变量创建到全局范围。此外，如果此信息正确，则不太安全：是的，我在安全上下文中读到“安全”谢谢您的回答，性能（速度）如何与document.getElementById相比，是否会有显著的性能差异。我会认为这是一个宏观性能问题，如果可以的话，请参阅新的EddEdt，如果这个信息是正确的，那不是真的安全：真的，我在安全上下文中读到了“安全”的答案，与文档相比，性能（速度）怎么样？我会考虑这是一个宏观性能问题，如果可以的话：看看新的编辑
    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";

88ms to 116ms

369ms to 398ms