更改 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;

这行代码并没有设置id与类元素changeme。getElementsByClassName返回一个NodeList包含元素。要设置一个id对物业NodeList。显然，这并没有反映在列表中的元素上。

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

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作品，这是因为NodeList调用getElementsByClassName. 从规范：

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