我可以直接在.getElementById 中使用 HTML 名称文件还是必须始终使用文档

Question

当您想从特定的 HTML 获取元素时，您可以使用 document.getElementById，但是否可以使用 HTML 文件的实际名称而不是使用“文档”？ 我问这个的原因是我有两个不同的 HTML 文件链接到同一个 JS 文件，所以我不能运行我的 JS 文件，因为在同一个 function 中我有两个来自两个不同 Z4C4AD5FCA2E7A3F74DBB1CED084 文件的变量从 HTML 文件之一它无法检测到另一个文件。

这是我在 JavaScript 中的 function。

    var config = parseInt(document.getElementById('enc_porta').getAttribute("config"));     
    if(config == 2 && resetError) { ILCPhoenixWrite(null, 'config', 11, 0); }
    
    if (lcd == 1){
    var elements = document.getElementById("numpad_p1").getElementsByClassName("selected");
    while (elements.length > 0) { elements[0].classList.remove("selected"); }
    usercode = "";
    }
    
    else if (lcd == 2){
    var elements = document.getElementById("numpad_p2").getElementsByClassName("selected");
    while (elements.length > 0) { elements[0].classList.remove("selected"); }
    usercode = "";
    }
    
    var elements = document.getElementById("numpad_config").getElementsByClassName("selected");
    while (elements.length > 0) { elements[0].classList.remove("selected"); }
    usercode = "";
    
    document.getElementById('enc_porta').setAttribute("numpad_p1", (hidePad ? 0 : 1)); /* '?' true ':'false */

    document.getElementById('enc_porta').setAttribute("numpad_p2", (hidePad ? 0 : 1));

    document.getElementById('enc_porta').setAttribute("numpad_config", (hidePad ? 0 : 1)); 
    
}

这是我的 HTML 文件 Porta1.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <script src="js/custom.js"></script>
    </head>
    <body>
        <div id="enc_porta" recon=0 config=0 pad=0 bt_emergency=0 bt_entry=0 numpad_p1=0 numpad_config=0 lock=0 > 
            <div id="config" class="bt sqr66x66 blur" onclick="ILCPhoenixWrite(this, 'config', 2, 0);KeyPadOpen(this);"></div>
            <div id="back" class="bt sqr66x66" onclick="ILCPhoenixWrite(this, 'config', 3, 0);"></div>  
            <div id="recon" class="bt sqr20x20 blur"></div>
            <div id="lockscreen1" class="lock"></div>
            <div id="bt_entry_1" class="bt_entry">
                <span id="circle_1" class="circle_1"></span>
                <span id="circle_2" class="circle_2"></span>
            </div>
            <div id="blackback1" class="blackback"></div>

            <div id="bt_emergency" class="bt sqr300x250 blur" onclick="ILCPhoenixWrite(this, 'bt_emergency', 5, 0);"></div>
            <div id="numpad_p1" class="numpad"> 
                <div id="num1" class="padbt sqr86x86" onclick="KeyPadClick(this, 1, 1);">1</div><div id="num2" class="padbt sqr86x86" onclick="KeyPadClick(this, 2, 1);">2</div><div id="num3" class="padbt sqr86x86" onclick="KeyPadClick(this, 3, 1);">3</div>
                <div id="num4" class="padbt sqr86x86" onclick="KeyPadClick(this, 4, 1);">4</div><div id="num5" class="padbt sqr86x86" onclick="KeyPadClick(this, 5, 1);">5</div><div id="num6" class="padbt sqr86x86" onclick="KeyPadClick(this, 6, 1);">6</div>
                <div id="num7" class="padbt sqr86x86" onclick="KeyPadClick(this, 7, 1);">7</div><div id="num8" class="padbt sqr86x86" onclick="KeyPadClick(this, 8, 1);">8</div><div id="num9" class="padbt sqr86x86" onclick="KeyPadClick(this, 9, 1);">9</div>
                <div id="pdBk" class="padbt sqr86x86" onclick="KeyPadClick(this, -1, 1);">&#8592;</div><div id="num0" class="padbt sqr86x86" onclick="KeyPadClick(this, 0, 1);">0</div><div id="pdOk" class="padbt sqr86x86" onclick="KeyPadClick(this, 10, 1);">&#10003;</div> 
            </div>
            <b id="numpad_config" class="numpad_config">
                <div id="num1" class="padbt sqr26x26" onclick="KeyPadClick(this, 1, 1);">1</div><div id="num2" class="padbt sqr26x26" onclick="KeyPadClick(this, 2, 1);">2</div><div id="num3" class="padbt sqr26x26" onclick="KeyPadClick(this, 3, 1);">3</div>
                <div id="num4" class="padbt sqr26x26" onclick="KeyPadClick(this, 4, 1);">4</div><div id="num5" class="padbt sqr26x26" onclick="KeyPadClick(this, 5, 1);">5</div><div id="num6" class="padbt sqr26x26" onclick="KeyPadClick(this, 6, 1);">6</div>
                <div id="num7" class="padbt sqr26x26" onclick="KeyPadClick(this, 7, 1);">7</div><div id="num8" class="padbt sqr26x26" onclick="KeyPadClick(this, 8, 1);">8</div><div id="num9" class="padbt sqr26x26" onclick="KeyPadClick(this, 9, 1);">9</div>
                <div id="pdBk" class="padbt sqr26x26" onclick="KeyPadClick(this, -1, 1);">&#8592;</div><div id="num0" class="padbt sqr26x26" onclick="KeyPadClick(this, 0, 1);">0</div><div id="pdOk" class="padbt sqr26x26" onclick="KeyPadClick(this, 10, 1);">&#10003;</div> 
            </b>        
        </div>
    </body>
</html>

第二个 HTML 文件是相同的，但我有 numpad_p2 而不是 numpad_p1。

Answer 1

我认为您对客户端（即在浏览器中）的工作方式有些误解。

当浏览器加载 HTML 时，如果有任何脚本标签，它会加载脚本并对其进行处理，根据脚本的指示更改 DOM。

因此，如果您加载 Porta1.html，那么它将加载脚本文件“custom.js”。 如果您加载其他页面，并且它具有相同的脚本标签，那么“custom.js”也将被加载。

每个页面加载的“custom.js”实例是独立的，彼此不知道。

我可以直接在.getElementById 中使用 HTML 名称文件还是必须始终使用文档

问题描述

1 个解决方案

解决方案1
0 2022-09-16 10:06:41

我可以直接在.getElementById 中使用 HTML 名称文件还是必须始终使用文档

问题描述

1 个解决方案

解决方案1 0 2022-09-16 10:06:41

解决方案1
0 2022-09-16 10:06:41