3

我有一个 javascript 脚本，当我点击一个按钮时，它会在我的页面中添加元素。我想使用这些新元素，调用它们。

var e = document.getElementsByName('group');

当我在添加名为“组”的元素之前和之后执行该操作时（在源代码中检查），我有相同数量的元素..

e.length /* before : return 2 */
e.length /* after... 2 :/ */

我认为文件。没有更新，是真的吗，有解决办法吗？

编辑 ：

function newgroup() {
        var e = document.getElementsByName('group');
        var nb = e.length + 1;
        div = document.createElement("div");
        div.id = 'group'+nb;
        div.className = 'panel_drop';
        div.setAttribute('name', 'group');
        div.innerHTML = '<h5>Group '+nb+'</h5>';
        div.innerHTML += '<div class=\'drop_zone\'></div>';
        document.getElementById('groups').appendChild(div);
    }

我使用属性name来计算组的数量，然后用它们的 id 选择它们。但是数字没有更新^^

编辑 2：

这是一个错误，我在使用 Chrome 开发工具时遇到了断点问题。

4

3 回答 3

3

getElementsByName返回一个 live NodeList，这意味着结果会在您对 DOM 进行更改时自动更新。据我所知，这不是跨浏览器问题的问题。所以你看到的问题可能是无关的。从规格：

getElementsByName(name) 方法接受一个字符串名称，并且必须返回一个活动的 NodeList，其中包含该文档中的所有 HTML 元素，这些元素的值等于 name 参数（以区分大小写的方式），按树顺序. 当使用相同的参数再次在 Document 对象上调用该方法时，用户代理可能会返回与先前调用返回的对象相同的值。在其他情况下，必须返回一个新的 NodeList 对象。

示例：

http://jsfiddle.net/hhdPB/

var e = document.getElementsByName('group');

console.log(e.length); // 0

var el = document.createElement('span');
el.setAttribute('name', 'group');

document.body.appendChild(el);

console.log(e.length); // 1

document.body.appendChild(el.cloneNode(false));

console.log(e.length); // 2

此外，您发布的代码似乎工作正常：

http://jsfiddle.net/GyTBw/1

function newgroup() {
    var e = document.getElementsByName('group');
    var nb = e.length + 1;
    console.log(nb);
    div = document.createElement("div");
    div.id = 'group' + nb;
    div.className = 'panel_drop';
    div.setAttribute('name', 'group');
    div.innerHTML = '<h5>Group ' + nb + '</h5>';
    div.innerHTML += '<div class=\'drop_zone\'></div>';
    document.getElementById('groups').appendChild(div);
}

for (var i = 0; i != 5; i++) {
    newgroup(); // 1 2 3 4 5
}
于 2012-07-29T15:37:07.183 回答
0

这是我对 chrome 开发人员工具的操作出错，有中断.. 谢谢和抱歉

于 2012-07-29T17:41:06.533 回答
-3

您应该使用 JQuery 和 Classes 而不是 ElementNames。

例如：

<div class="MyDivs">abc</div>
<div class="MyDivs">def</div>
<div class="MyDivs">ghi</div>

将由以下人员选择：

var Divs = $(".MyDivs");
于 2012-07-29T15:37:58.773 回答