Question

想让你的javascript知道特定的dom节点对应于数据库中的记录似乎很常见。那么，你是怎么做到的？

我见过的一种常见方法是使用类的类和id的id：

<div class="thing" id="5">
<script> myThing = select(".thing#5") </script>

这有一个轻微的HTML标准问题 - 如果您在页面上有多种类型的记录，您可能最终会复制ID。但这没有什么坏处，是吗？

另一种方法是使用数据属性：

<div data-thing-id="5">
<script> myThing = select("[data-thing-id=5]") </script>

这解决了重复的ID问题，但它确实意味着您必须处理属性而不是ID，这有时会更加困难。你们觉得怎么样？

Answer 1

请注意，ID不能以数字开头，因此：

<div class="thing" id="5">

是无效的HTML。见What are valid values for the id attribute in HTML?

在您的情况下，我会使用ID thing5或thing.5。

Answer 2

<div class="thing" id="myapp-thing-5"/>

// Get thing on the page for a particular ID
var myThing = select("#myapp-thing-5");

// Get ID for the first thing on the page
var thing_id = /myapp-thing-(\d+)/.exec ($('.thing')[0].id)[1];

Answer 3

您将放弃对DOM的控制

没错，什么都不会爆炸，但这是不好的做法。如果您在页面上放置重复的ID，那么当您尝试通过其ID访问元素时，您基本上无法确定您获得的内容。

var whoKnows = document.getElementById('duplicateId');

行为实际上是不同的，具体取决于浏览器。在任何情况下，您都可以将classNames用于重复值，并且完全避免问题。

浏览器会尝试忽略标记中的错误，但事情变得凌乱且更难。最好的办法是保持标记有效。您可以在className中描述元素的类型及其唯一的数据库ID。您甚至可以使用多个classNames 来区分它们。有很多有效的可能性：

<div class="friend04"/>
<div class="featuredFriend04" />

或

<div class="friend friend04" />
<div class="featuredFriend friend04" />

或

<div class="friend objectId04" />
<div class="groupMember objectId04" />

或

<div class="friend objectId04" />
<div class="friend objectId04" id="featured" />

这些都是完全合法的。有效的XHTML片段。请注意，在最后一个片段中，我仍然有一个id为我工作，这很好。通过他们的id访问元素非常快速和简单，所以你绝对希望能够尽可能地利用它。

您已经在javascript中花费了足够的时间确保您拥有正确的值和类型。在页面上放置重复的ID会让事情变得更难。如果您能找到编写符合标准的标记的方法，那么它有很多实用的好处。

Answer 4

根据标准，ID应该是唯一的，虽然大多数浏览器在递交重复ID时不会进行barf，但依赖于那种情况并不是一个好主意。

通过向ID添加类型名称来使ID唯一可用，但您需要询问为什么需要它。当需要找到元素时，赋予元素id是非常有用的，getElementById非常快。大多数浏览器在加载DOM时会构建ID索引的原因很快。但是，如果你有数以万计的ID，你实际上不需要在像getElementById这样的东西中使用，那么你已经承担了从未支付过的费用。

我认为在元素或其子元素触发的事件中，您可能会发现大部分时间都需要对象ID。在这种情况下，我会在元素上使用其他属性而不是ID属性。

我会留下class属性去做它的意图，而不是用识别职责重载它。

Answer 5

考虑到每个元素可以有多个类，你不能创建一个唯一的标识符作为每个元素的附加类吗？这样，可能有多个具有相同“id”的元素没有HTML ID属性冲突。

<div class="thing myapp-thing-5" />
<div class="thing myapp-thing-668" />
<div class="thing myapp-thing-5" />

然后很容易找到这些节点，并通过一些字符串操作找到它们对应的DB记录。

Answer 6

在HTML5中，您可以这样做：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var thing5 = document.evaluate('//*[@data-thing="5"]', 
                document, null, XPathResult.FIRST_ORDERED_NODE_TYPE ,null);
                alert(thing5.singleNodeValue.textContent);
            }, false);
        </script>
    </head>
    <body>
        <div data-thing="5">test</div>
    </body>
</html>

Answer 7

如果您设置非标准属性，请确保以编程方式设置它们（因为一切都是合法的）或者经历修改dtd的麻烦！ - ）

但是我会使用一个带有一个有意义的单词的ID，然后使用.getElementById，因为每个必要的信息就在眼前......

Answer 8

非标准属性很好，如果您正在使用XHTML并花时间扩展您用来覆盖新属性的DTD。就个人而言，我只是使用一个更独特的ID，就像其他一些人所建议的那样。

Answer 9

我不喜欢John Millikin's解决方案。这对大型数据集来说将是性能密集型的。

对他的代码进行优化可能是通过调用substring()来替换正则表达式，因为id-property的前几个字符是常量。

我会选择匹配class，然后选择特定的id。

Answer 10

通过DOM跟踪您的数据对我来说似乎不稳定;请记住，这些ID是全局变量，因此如果其他人的脚本有可能在您的页面上找到它的方式，那么它很容易受到攻击。为获得最佳结果，请将数据加载到匿名函数中的对象中，然后编写表（或DIV的大嵌套列表）。

意见：在HTML中，可能是重复ID还是非标准属性？

10 个答案: