Javascript - 尽管页面上存在具有给定 ID 的元素，但 getElementById 返回 null答案

【问题标题】：Javascript - getElementById returning null despite elements with given IDs existing on pageJavascript - 尽管页面上存在具有给定 ID 的元素，但 getElementById 返回 null
【发布时间】：2011-09-02 00:16:07
【问题描述】：

我正在编写许多函数来显示和隐藏页面上的各种 div，方法是使用 setAttribute 应用名为“hidden”和“visible”的样式类。此功能旨在一次隐藏多个 div。被赋予“隐藏”类的每个 div 的 ID 都列在一个数组中。

每个 div 可能有多个类，因此当一个 div 被赋予“隐藏”类时，它的其他类必须保留，除了“可见”类被替换。

function hideSections() {
  // Initialise array with div IDs
  var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");

  // Loop through divs in array
  for (var count = 0; count < divs.length; count++) {

    // Get existing classes
    var div = document.getElementById(divs[count]);
    var divClass = div.getAttribute("class");

    // Remove "visible" class if it exists
    divClass = divClass.replace("visible", "");

    // Append "hidden" class
    div.setAttribute("class", divClass + " hidden");
  }
}

由于某种原因，该函数无法正常工作，尽管它确实被调用了。

如果放置在 [[var divClass = div.getAttribute("class");]] 行之前，则会出现放置在循环内的 alert()。放在这条线之后，它没有，所以我猜这条线是问题所在。

所有的 div 都指定了一个类属性。

【问题讨论】：

有什么理由不使用 jQuery (jquery.com)？
@Simon 我开始尝试使用 jquery ui，但是标签功能正在添加到需要旧版本 jquery 才能使其幻想框工作的页面中，并且 jquery ui 选项卡无法正确显示使用此网站的现有样式。
如果getElementById() 没有找到元素，它将返回null，这将导致下一行中断。将alert(div); 和alert(div.id); 放在您已确定为问题行的行之前，以便您可以确认您正在找到该元素。在 jQuery 上：即使是旧版本也可以执行这种简单的选择元素并更改它们的类。
How can I reliably set the class attr w/JavaScript on IE, FF, Chrome, etc.?的可能重复
函数什么时候被调用？

标签： javascript css setattribute getattribute

【解决方案1】：

我的猜测是您的元素没有类属性，因此divClass 为空 - 导致divClass = divClass.replace("visible", ""); 行出现错误。（不能调用空值的方法）

尝试检查属性：

  // Initialise array with div IDs
  var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");

  // Loop through divs in array
  for (var count = 0; count < divs.length; count++) {

    // Get existing classes
    var div = document.getElementById(divs[count]);
    var divClass = '';
    if(divClass = div.getAttribute("class")) {
        // Remove "visible" class if it exists
        divClass = divClass.replace("visible", "");
    }

    // Append "hidden" class
    div.setAttribute("class", divClass + " hidden");
  }

...或者您可以查看the JSFiddle demo I created。

【讨论】：

感谢您的建议，但所有 div 都指定了类属性，如原始问题所述。

【解决方案2】：

您需要的是用于添加和删除类的实用函数。这是我使用的一些：

var trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

var hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

var addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!hasClassName(el, cName)) {
        el.className = trim(el.className + ' ' + cName);
    }
}

var removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = trim(el.className.replace(re, ''));
    }
}

现在你可以这样做了：

addClass(elementOrId, 'classValue');

包装在“命名空间”或任何适合的东西中。

【讨论】：

【解决方案3】：

试试这样的：

    function hideSections() {
    // Initialise array with div IDs
    var divs = ["tab-1", "tab-2", "tab-3", "tab-4", "tab-5"];

    // Loop through divs in array
    for (var count = 0; count < divs.length; count++) {

        // Get existing classes
        var div = document.getElementById(divs[count]);
        var divClass = div.getAttribute("class");

        // Remove "visible" class if it exists
        var regex = new RegExp( '(?:^|\\s+)' + 'visible' + '(?=\\s|$)', 'i' );
        if ( regex.test( divClass ) ) {
            divClass = divClass.replace( regex, '' ).replace( /^\s+/, '' );

            // Append "hidden" class
            if ( divClass )
                div.setAttribute( 'class', divClass + ' hidden' );
            else
                div.setAttribute( 'class', 'hidden' );
        }

    }
}

你也可以从jsfiddle试试这个

【讨论】：