如何使用JavaScript获取点击元素ID？当前代码返回null求助

你的代码返回null的核心原因是找错了目标元素：你尝试获取<html>标签的ID（这个标签本身没有设置id属性），而不是你真正想要的<h1 id="Test">元素。

错误代码分析 #

这段代码里，e.currentTarget是绑定事件的window对象，window.document.documentElement指向的是页面根节点<html>，该节点没有id，所以getAttribute("id")自然返回null。

let text = e.currentTarget.document.documentElement.getAttribute("id");

修正方案 #

根据需求，提供两种常见实现方式：

方式1：点击目标h1时获取其ID #

如果需要点击h1元素时弹出它的ID，可以直接给h1绑定点击事件，或者在全局点击事件里判断点击对象：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1 id="Test">Just for test purposes</h1>
        <script>
        // 直接给h1绑定点击事件
        document.getElementById('Test').addEventListener('click', (e) => {
            alert(e.target.id); // 用.id属性直接获取ID，比getAttribute更简洁
        });

        // 或者全局点击事件中判断目标元素
        // window.addEventListener('click', (e) => {
        //     if (e.target.id === 'Test') {
        //         alert(e.target.id);
        //     }
        // });
        </script>
    </body>
</html>

方式2：页面加载后直接获取h1的ID #

如果不需要点击触发，只是想获取该元素的ID，可直接在脚本中获取：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1 id="Test">Just for test purposes</h1>
        <script>
        const testHeading = document.getElementById('Test');
        alert(testHeading.id);
        </script>
    </body>
</html>

关键提示 #

• 获取元素ID优先使用.id属性，比getAttribute("id")更高效、语义化。
• 定位元素时，要明确目标节点的位置，避免误操作其他节点。

内容的提问来源于stack exchange，提问作者Khld Z.