代码之家 › 专栏 › 技术社区 › Nick Retallack

意见:在HTML中,可能存在重复ID或非标准属性?

database html javascript

Nick Retallack · 技术社区 · 16 年前

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

<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,这有时会更困难。你们觉得怎么样?

10 回复 | 直到 15 年前

Community Jaime Torres 7 年前

请注意,ID不能以数字开头,因此:

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

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

thing5 或 thing.5 .

John Millikin 16 年前

<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];

keparo 16 年前

您将放弃对DOM的一些控制

没错,没有什么会爆炸,但这是一种坏习惯。如果你在页面上放置了重复的ID,你基本上会失去 确定你得到了什么

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

完全避免这个问题 .

浏览器会试图忽略标记中的错误,但情况会变得更糟 乱七八糟 多个类名 区分它们。有一个 许多有效的可能性 :

<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" />

您将在javascript中花费足够的时间 确保您拥有正确的值和类型 实际效益 .

AnthonyWJones 16 年前

根据标准,ID应该是唯一的,虽然大多数浏览器在收到重复的ID时不会呕吐,但依赖这种情况并不是一个好主意。

通过在ID中添加类型名来使ID唯一是可行的,但您需要询问为什么需要它。当需要查找元素时,为元素指定id非常有用,getElementById非常快。它之所以快,是因为大多数浏览器在加载DOM时都会建立ID索引。然而,如果你有无数的ID,而这些ID在像getElementById这样的东西中从来都不需要使用,那么你所付出的代价就永远不会得到回报。

我认为,在大多数情况下,您可能会在元素或其子元素触发的事件中找到想要的对象ID。在这种情况下,我将在元素上使用一个附加属性,而不是ID属性。

我会让class属性去做它想做的事情,而不是让它承担过多的标识任务。

Zack The Human Kunal 16 年前

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

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

Shadow2531 16 年前

在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>

roenving 16 年前

如果设置了非标准属性,请确保以编程方式设置它们(因为这样做一切都是合法的),或者麻烦地修改dtd!-)

但是我会使用一个ID,在DB ID前面加上一个有意义的单词,然后使用.getElementById,因为所有必要的信息都在手边。。。

Matthew Scharley 16 年前

Community Jaime Torres 7 年前

John Millikin's 解决方案在大型数据集上,这将是性能密集型的。

对他的代码进行优化可以用调用 substring() 因为id属性的前几个字符是常量。

class 然后是一个特定的 id

Kent Brewster 16 年前