Question

我正在开发一个将在国外网站上运行的组件。如何判断特定ID是否在页面上出现多次？我需要知道这一点，以确保“从外部”提供给我的元素在这个意义上是独一无二的。

我已经尝试使用document.getElementById和document.querySelector来识别它，但两者似乎都返回了具有非唯一ID的第一个元素，而不是两者。 jQuery和Sizzle也没有帮助，因为他们使用那些相同的方法。

Answer 1

使用jQuery，您可以使用属性选择器而不是id选择器：

$("[id='someId']")

应该返回具有该Id

的所有元素

工作示例：http://jsfiddle.net/hunter/VvX7r/

Answer 2

除了查询整个元素页面外，您还可以执行以下操作：

function isUniqueId( selector ) {
var elm = $(selector).get(0),
    prevId = elm.id,
    isUnique;

elm.id = "temp"+(+new Date);

isUnique = !$(selector).length;

    if( prevId ) {
    elm.id = prevId;
    }


return isUnique;
}

如果您将其附加到任何人的页面，性能应该是一个问题。

Answer 3

ID应该是唯一的，因此您找不到很多可以帮助您的工具。

您是否尝试过递归迭代DOM中的每个元素并检查id？

Answer 4

我不能为Sizzle说，但是因为Jquery在其方法中使用CSS选择器来返回Dom对象。就其本质而言，元素的id应该是唯一的。所以在这个实现中，JQuery只返回它找到的第一个结果是正确的，因为只应该有一个。

但是我看到你的问题在于你无法控制从外部来源放入页面的内容。

在这种情况下，如果没有解析每个HTML元素以检查重复项，我看不到任何其他选项。

Answer 5

前一段时间我得到了这个片段形式，我不记得在哪里？它适用于FF firebug console。你或许可以适应它。

(function () {
var elms = document.getElementsByTagName("*"), i, len, ids = {}, id;
for (i = 0, len = elms.length; i < len; i += 1) {
    id = elms[i].id || null;
    if (id) {
        ids[id] =  ids.hasOwnProperty(id) ? ids[id] +=1 : 0;
    }
}
for (id in ids) {
    if (ids.hasOwnProperty(id)) {
        if (ids[id]) {
            console.warn("Multiple IDs #" + id);
        }
    }
}
}());

Answer 6

    var id =  "test1",
    elems = [];

 while ( d = document.getElementById(id) ) {
    elems.push( d );
    d.removeAttribute("id")
}

for ( i in elems ) {
    elems[i].setAttribute("id",id);
}

console.log (elems);

但setAttribute和removeAttribute不是crossbrowser。最简单的方法是使用属性[]的jQuery选择器，如hunter的答案

Answer 7

请注意，querySelector只会返回第一个匹配项。试试querySelectorAll：

document.querySelectorAll('#id');

如何判断同一页面上的两个元素是否具有相同的ID？

7 个答案: