无法 getElementById（HTMLDOM 对象应该为空）。我在哪里搞砸了？答案

【问题标题】：Can't getElementById (HTMLDOM object is supposedly null). Where am I messing up?无法 getElementById（HTMLDOM 对象应该为空）。我在哪里搞砸了？
【发布时间】：2016-06-07 06:31:45
【问题描述】：

所以我已经被困了一段时间......
我有一个带有 div 元素和内联框架 (iframe) 的 HTML 页面：

<!DOCTYPE html>
<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="/GLS_DBSearchProject/resources/css/GLS_DBSearchMainStyle.css"></head>

<div id="DebugOutput">DEBUG-OUTPUT</div>
<body align="center">
    <div class="PWContainer"><iframe class="ProgramWindow" src="index.php"></iframe></div> 
</body>


<?php

当我熟悉 JavaScript 时，div 只是作为一个用于测试的框。 iframe 包含一个单独的 .php 页面“index.php”。 “index.php”的 HTML 完全由这个 php 代码中的函数生成：

class UserInterface {
var $ParentAppInstance;

function __construct($AppInstance){
    $this->ParentAppInstance = $AppInstance;
    $this->DrawPageHTML();
    $this->DrawDBSetDropdown();
    $this->DrawAdvancedSearchBar();
}

//Override this function to change the HTML and PHP of the UI page.
protected function DrawPageHTML(){

    echo '
    <!----Header-HTML--------------------->
    <div align="center">
      <table width="980" height="207" border="0">
        <tr>
          <td width="411"><img src="resources/logo.png" alt="" width="491" height="145" align="middle" /></td>
          <td width="411"><img src="resources/Logo2.png" width="462" height="171" alt="Logo" /></td>
        </tr>
      </table>
    </div>
    <!------------------------------------>



    <body>
        <script src=/GLS_DBSearchProject/JavaScript/UserInterface.js>
        </script>
    </body>




    ';

    echo '$AppInstanceData: ' . '<br>';
    echo '--CurrentDBSet_Str: ' . $this->ParentAppInstance->CurrentDBSet_Str;
}

protected function DrawDBSetDropdown(){
    echo '<div align="right">';
        echo '<select onchange="SwitchDatabaseSet(this.ownerDocument)" name="DBSetList" form="DBSetSelector">';
        $i = 0;
        foreach ($this->ParentAppInstance->DBSets_Arr as $DBSet){
            if($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
            else{
                $i++;
                echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
            }
        }
        echo '</select>';
    echo '</div>';

}

在 UserInterface 类的 DrawDBSetDropdown() 函数中，我正在绘制一个带有可变选项的选择框。每当用户更改此选择器的状态时，我都会使用“index.php”的 HTML DOM 对象调用 SwitchDatabaseSet() javascript 函数。

到目前为止，一切似乎都运行良好。这就是事情变得奇怪的地方：

function JSTEST(){
window.alert("JS Called Successfully!!");
}

function SwitchDatabaseSet(MainPageDoc){
    window.alert(null === MainPageDoc);//1. 
    window.alert(MainPageDoc.domain);//2. 
    MainPageDoc.getElementById("DebugOutput").innerHTML = "Test";//3.
 }

结果：错误。 MainPageDoc 不为空。
结果：本地主机。正如预期的那样，该页面正在本地主机上运行。值得注意的是，MainPageDoc != null。
突然 MainPageDoc 应该等于 null；当我收到以下错误时：

未捕获的类型错误：无法将属性“innerHTML”设置为 null

*document.getElementById() 产生相同的结果。

我正在尝试更改 DebugOutput <div> 的文本，但由于上述问题，它无法正常工作。
在 1. 和 2. 中都表明 MainPageDoc 不为空，那么为什么我会在 3. 处收到错误消息？我在这里做错了什么？

【问题讨论】：

Uncaught TypeError: Cannot set property 'innerHTML' of null 不会告诉您MainPageDoc 是null，但是当您调用getElementById("DebugOutput") 时，DOM 中没有ID 为DebugOutput 的元素。 getElementById 如果未找到请求的元素，则返回 null。如果MainPageDoc 为null，则错误为Uncaught TypeError: Cannot read property 'getElementById' of null。
@t.niese 谢谢。这就说得通了。但我似乎无法弄清楚为什么它不会检测到我的 div。即使我使用 document.getElementById()。 “文档”应该引用在其中声明脚本的 HTML 文档..（在这种情况下是 HTML 文档...想通了。谢谢

标签： javascript php html

【解决方案1】：

~~我认为这实际上是不可能的，我可能错了，但原因如下：~~ 这是可能的，请参阅第二次编辑。

index.php 生成一个 html 网页（我们称之为“index_html”）

实现 UserInterface.js 的 <script src="UserInterface.js"></script> 标签在“index_html”中实现。

因此：document.getElementById("DebugOutput") 和 MainPageDoc.getElementByID("DebugOutput") 实际上是相同的，它们返回 null，因为它们都在寻找 id="DebugOutput" 的元素。

这个<div> 是在我提供的第一段HTML 代码中实现的，而不是index_html。因此，两个语句都返回 null，如 here 所述。

编辑：我认为不可能从包含在 iframe 中的 JavaScript 编辑父 HTML 文档中的 HTML 元素。我会在深入研究后报告。

编辑：This 几乎总结了这个问题，一旦我知道我在寻找什么，就很容易找到。

【讨论】：