javascript - 更改 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);
}

第一个警报给了我“空”:(...
然而第二个警报给了我正确的值，因此成功应用了“pagenum”。
我究竟做错了什么？以及如何修复它？
(如果还有什么可以改进的地方，请大家留言)

Answer 1

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

这行代码不设置changeme类元素的id。 getElementsByClassName 返回包含元素的 NodeList。您正在 NodeList 上设置一个 id 属性。显然，这并没有反射(reflect)在列表中的元素上。

为此，请处理元素本身。如果类中有一个元素，那很简单:

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 :

When the method [getElementsByClassName] is invoked on an HTMLElement object again with the same argument, the user agent may return the same object as the object returned by the earlier call.