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

我正在编写一些函数，通过使用setAttribute应用名为“hidden”和“visible”的样式类来显示和隐藏页面上的各种div。此函数用于同时隐藏多个div。将被赋予类“hidden”的每个div的ID列在一个数组中

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

函数hideSections（）{
//使用div id初始化数组
var divs=新数组（“表1”、“表2”、“表3”、“表4”、“表5”）；
//循环数组中的div
对于（var count=0；count

出于某种原因，此函数不起作用，尽管它肯定正在被调用

如果放在第[[var divClass=div.getAttribute（“class”）；]行之前，则会显示放置在循环中的警报（）。放在这一行之后，它没有，所以我猜这一行就是问题所在

---

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

我猜您有一些元素没有class属性，因此

divClass

为空-导致第

divClass=divClass.replace行出现错误（“可见的”，“可见的”）。（无法从空值中调用方法）

尝试检查属性：

  // 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");
  }

//使用div id初始化数组
var divs=新数组（“表1”、“表2”、“表3”、“表4”、“表5”）；
//循环数组中的div
对于（var count=0；count

。。。或者您可以签出。
您需要的是用于添加和删除类的实用函数。以下是我使用的一些：

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');

用“名称空间”或任何合适的名称进行包装。
尝试以下方法：

    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' );
        }

    }
}

函数hideSections（）{
//使用div id初始化数组
var divs=[“表1”、“表2”、“表3”、“表4”、“表5”]；
//循环数组中的div
对于（var count=0；count

您也可以从
任何不使用jQuery（）的原因中尝试这一点？@Simon我开始尝试使用jQuery ui，但是选项卡功能被添加到一个页面，该页面需要和旧版本的jQuery才能使其FancyBox正常工作，并且jQuery ui选项卡不能正确显示此站点的现有样式。如果
getElementById（）
未找到元素，它将返回null，这将导致下一行中断。放置
警报（div）和
警报（div.id）在您确定为问题行的行之前，以便您可以确认您正在查找元素。在jQuery上：即使是旧版本也可以执行这种简单的选择元素并更改其类。调用函数的时间可能重复？感谢您的建议，但所有div都指定了class属性，如原始问题中所述。