8

当 HTML DOM 中存在具有重复 ID 的元素时，有人可以阐明 javascript getElementById() 的行为吗？

4

5 回答 5

12

虽然没有定义标准行为，但通常它会返回找到的第一个元素。

演示：http: //jsfiddle.net/ruNKK/

于 2012-07-17T18:38:04.800 回答
9

如果您有多个具有相同 id 的元素，则可以使用

document.querySelectorAll("[id='myid']")

但是，如果您可以控制它，您应该只修复 HTML。

于 2012-07-17T18:46:39.017 回答
8

是的，行为未定义。

标记无效，并且没有标准定义浏览器在这种情况下应该做什么。

每个浏览器都会尝试做一些合理的事情，通常返回第一个元素。其他可能的处理方式是返回最后一个元素，根本没有元素（null），或者抛出错误。

于 2012-07-17T18:49:16.457 回答
4

拥有多个具有相同 ID 的对象是非法的。因为它不应该被允许，getElementById()所以规范中没有指定存在多个匹配项的行为。事实上，规范明确指出：“如果多个元素具有此 ID，则未定义行为。”。

在我尝试过的几个浏览器中，它返回第一个，但显然你不应该依赖它。

如果要查找所有匹配项，则必须设计一个查询来查看所有标签的 ID 并收集与您匹配的标签。

在普通的 javascript 中，你可以这样做：

function getAllElementsById(id) {
    var all = document.getElementsByTagName("*");
    var results = [], elem;
    for (var i = 0; i < all.length; i++) {
        elem = all[i];
        if (elem.id && elem.id === id) {
            results.push(elem);
        }
    }
    return(results);
}
于 2012-07-17T18:44:54.950 回答
1

是的。它会回到第一个。我们不能使用相同的ID作为HTML属性
1. *查看plaincopy到clipboardprint？

* {  
 margin: 0;  
 padding: 0;  
}

在我们进入更高级的选择器之前，让我们先为初学者敲掉明显的选择器。

星号将针对页面上的每个元素。许多开发人员将使用此技巧将边距和填充归零。虽然这对于快速测试当然很好，但我建议您永远不要在生产代码中使用它。它给浏览器增加了太多的重量，而且是不必要的。

* 也可以与子选择器一起使用。查看plaincopy到剪贴板打印？

#container * {  
 border: 1px solid black;  
}

这将针对作为#container div 的子元素的每个元素。同样，尽量不要使用这种技术，如果有的话。

X

查看plaincopy到剪贴板打印？

#container {  
   width: 960px;  
   margin: auto;  
}

为选择器添加哈希符号前缀允许我们按 id 定位。这很容易成为最常见的用法，但是在使用 id 选择器时要小心。

于 2012-07-17T18:43:09.503 回答