更改Class为X的元素的ID

Question

我正在尝试通过Ajax更改div的ID。

因为ID有一个动态值，所以我在div中添加了一个类。

我的php代码：

    echo '<div id="pagemenu">
            <ul id="tabpanel">';
$tel = 0;
while($totaalklanten > -4)
{
    $tel++;
    echo '<li><a href="#'.$tel.'" name="'.$tel.'" onclick="listklant(\'klant.php\',this.name)">'.$tel.'</a></li>';
    $totaalklanten = $totaalklanten - 5;
}
echo '</ul>';
echo '<div class="changeme" id="default">';
//Lots of query of php stuff here to execute
echo '</div>

带有类“changeme”的div是受害者。

到目前为止我的Ajax代码如下：

xmlhttp = new XMLHttpRequest();

function listklant(serverPage, pagenum)
{
    xmlhttp.open("GET", serverPage);



    document.getElementsByClassName('changeme').id = pagenum;
    alert(document.getElementById(pagenum));
    alert(document.getElementsByClassName('changeme').id);


    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

第一个警告给我'null‘:(...

然而，第二个警告给了我正确的值，所以成功地应用了'pagenum‘。

我做错了什么？以及如何修复它？

(如果还有其他我可以改进的地方，请大声说出来)

Answer 1

document.getElementsByClassName('changeme').id = pagenum;

这行代码不是，而是用changeme类设置元素的id。getElementsByClassName返回一个包含元素的NodeList。您正在NodeList上设置id属性。显然，这不会反映在列表中的元素上。

为此，需要对元素本身进行处理。如果类只有一个元素，那就很简单了：

document.getElementsByClassName('changeme')[0].id = pagenum;

如果你有更多的元素，你需要一个循环：

var els = document.getElementsByClassName('changeme');
for (var i = 0; i < els.length; i++ ) {
    els[i].id = pagenum;
}

但是，更改元素的id可能不是一个好主意。在这里使用一个类可能是一个更好的主意。

编辑解释为什么您的第二个alert可以工作，这是因为调用getElementsByClassName返回了相同的NodeList。来自the spec

当使用相同的参数再次对HTMLElement对象调用方法getElementsByClassName时，用户代理可能会返回与先前调用返回的对象相同的对象。