如何将变量作为getElementById的选择ID？调用后返回null求排查

嘿，我来帮你排查下为啥你的代码里getElementById会返回null！仔细看了你的代码，发现两个关键问题：

• 标签闭合错误：你代码里的</body少了一个右尖括号，正确的写法应该是</body>。这个小失误会让浏览器的DOM解析出现异常，导致id为test的<p>元素没有被正确识别，自然就找不到它了。
• 全局变量名与DOM元素id冲突：在浏览器的全局作用域里，只要页面上存在一个id为test的元素，浏览器就会自动把这个元素挂载到window.test上。而你又声明了一个全局变量var test = "test"，这时候就会出现变量覆盖的问题——有些浏览器中DOM元素的优先级更高，导致test变量实际指向的是那个<p>元素，而非你赋值的字符串"test"。用DOM元素作为getElementById的参数，当然找不到对应的元素啦！

给你修正后的代码，解决了这两个问题：

<html>
<head>
</head>
<body>
    <p id="test">hi</p>
    <script>
        // 换个变量名避免和元素id冲突
        var targetId = "test";
        document.getElementById(targetId).innerHTML = "complete";
    </script>
</body>
</html>

如果你不想换变量名，也可以把代码放在局部作用域里，避免全局变量冲突，比如：

<html>
<head>
</head>
<body>
    <p id="test">hi</p>
    <script>
        (function() {
            var test = "test";
            document.getElementById(test).innerHTML = "complete";
        })();
    </script>
</body>
</html>

这样局部作用域里的test变量就不会和全局的window.test（DOM元素）冲突啦！

内容的提问来源于stack exchange，提问作者Dylan Ong