getElementById()返回现有对象的空值

Question

在绘制数据驱动网格的页面底部附近，网格包有以下代码.

<script type="text/javascript">
    (function(window, document, undefined) {
      "use strict";
      var gridColSortTypes = 
          ["string", "string", "number", "number", "number", "number", "number", "number", "number", "number"],
          gridColAlign = [];
      var onColumnSort = function( newIndexOrder, columnIndex, lastColumnIndex ) {
        var doc = document;
        var offset = (this.options.allowSelections && this.options.showSelectionColumn)?1:0;
        if( columnIndex !== lastColumnIndex ) {
          if( lastColumnIndex > -1 ) {
            doc.getElementById("stockHdr" + (lastColumnIndex-offset)).parentNode.style.backgroundColor = "";
          }
          doc.getElementById("stockHdr" + (columnIndex-offset)).parentNode.style.backgroundColor = "#f7f7f7";
        }
      };
      ...
})(this, this.document);

在调查指定的排序列颜色更改失败的原因时，我发现尽管getElementById()查询的对象存在并在页面中运行，但是在这个函数中，这些getElementById()调用返回空。实际上，从这个函数发出的所有getElementById()调用都返回Null。

为什么？

Answer 1

我将假设当您试图访问DOM内容时，DOM内容还没有准备好/可访问，请尝试用window.onload包装代码

window.onload = function(){
  (function(window, doc, undefined) {
      "use strict";
      var gridColSortTypes = 
          ["string", "string", "number", "number", "number", "number", "number", "number", "number", "number"],
          gridColAlign = [];
      var onColumnSort = function( newIndexOrder, columnIndex, lastColumnIndex ) {
        var offset = (this.options.allowSelections && this.options.showSelectionColumn)?1:0;
        if( columnIndex !== lastColumnIndex ) {
          if( lastColumnIndex > -1 ) {
            doc.getElementById("stockHdr" + (lastColumnIndex-offset)).parentNode.style.backgroundColor = "";
          }
          doc.getElementById("stockHdr" + (columnIndex-offset)).parentNode.style.backgroundColor = "#f7f7f7";
        }
      };
      ...
   })(this, this.document);
};