外部JS中defaultOpen.click()无效，内嵌body正常的标签页问题

问题重现 #

我用外部JS实现HTML标签页功能，把默认激活的document.getElementById("defaultOpen").click()放到外部JS里就失效，页面无内容显示，但把这段代码移到body内的script标签里就正常。相关代码如下：

HTML代码 #

<!DOCTYPE html>
<head></head>
<body>
<div class="tab">
    <button class="tablinks" onclick="openSection(event, 'idNo1')" id="defaultOpen">NO1</button>
    <button class="tablinks" onclick="openSection(event, 'idNo2')">NO2</button>
    <button class="tablinks" onclick="openSection(event, 'idNo3')">NO3</button>
</div>

<section id="idNo1" class="tabcontent">
    <div>guheheheheh</div>
</section>
<section id="idNo2" class="tabcontent">
    <div>mwehehehehehe</div>
</section>
<section id="idNo3" class="tabcontent">
    <div>nyehehehehe</div>
</section>

<script src="vscript.js"></script>
</body>
</html>

外部JS（vscript.js） #

function openSection(evt, docName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i=0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    
    document.getElementById(docName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click(); // 此处代码失效

问题原因 #

核心是外部JS执行时，页面DOM元素还未完全加载完成，导致document.getElementById("defaultOpen")找不到目标按钮元素，自然无法触发点击事件。虽然script标签放在了body末尾，但浏览器渲染与JS执行的时机可能存在微小偏差，导致元素未就绪。

修复方案 #

方案一：等待DOM加载完成再执行 #

把默认点击的代码包裹在DOMContentLoaded事件监听里，确保所有DOM元素加载完毕后再执行：

function openSection(evt, docName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i=0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    
    document.getElementById(docName).style.display = "block";
    evt.currentTarget.className += " active";
}

// 等待DOM完全加载后触发默认点击
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("defaultOpen").click();
});

方案二：添加初始CSS优化体验 #

给所有tabcontent标签设置默认隐藏，避免默认点击失效时页面同时显示所有内容：

.tabcontent {
    display: none;
}

额外检查点 #

确认外部JS文件中没有使用HTML转义字符（比如"），所有引号使用正常的双引号"或单引号'，语法错误会直接导致代码完全失效。

内容的提问来源于stack exchange，提问作者suckest man