发表新帖
发表新帖

Opinion: in HTML, Possible Duplicate IDs or Non-Standard Attributes?

后端 未结
关注
10 1955
说谎
说谎 2020-12-17 22:49

It seems pretty common to want to let your javascript know a particular dom node corresponds to a record in the database. So, how do you do it?

One way I\'ve seen t

相关标签:
10条回答
  • 终归单人心
    2020-12-17 23:04

    Considering the fact that you can have multiple classes per element, couldn't you create a unique identifier as an additional class per element? That way, there could be more than one element with the same "id" without HTML ID attribute collisions.

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

    It would be easy to then find these nodes, and find their corresponding DB record with a little string manipulation.

    0 讨论(0)
  • 花落未央
    2020-12-17 23:10

    IDs should be unique according to the standards and whilst most browsers don't barf when handed duplicate IDs it would not be a good idea to rely on that always being the case.

    Making the ID unique by adding a type name to the ID would work but you need to ask why you need it. Giving an element an id is very useful when the element needs to be found, getElementById is very fast. The reason its fast it that most browsers will build an index of IDs as its loads the DOM. However if you have zillions of IDs that you never actually need to use in something like getElementById then you've incurred a cost that is never paid back.

    I think you may find most of the time you want the object ID in an event fired by the element or one of its children. In which case I would use an additional attribute on the element and not the ID attribute.

    I would leave class attribute to do what its meant to do and not overload it with identification duties.

    0 讨论(0)
  • 深忆病人
    2020-12-17 23:13 
    <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];
    0 讨论(0)
  • 醉酒成梦
    2020-12-17 23:15

    In HTML5, you could do it like this:

    
<!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>
    0 讨论(0)
  • 遥遥无期
    2020-12-17 23:19

    Keeping track of your data via the DOM seems shaky to me; remember, those IDs are global variables, so if there's any chance somebody else's script can find its way onto your page, it's vulnerable. For best results, load your data into an object within an anonymous function and write the table (or the big nested list of DIVs) afterwards.

    0 讨论(0)
  • 既然无缘
    2020-12-17 23:20

    Note that an ID cannot start with a digit, so:

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

    is invalid HTML. See What are valid values for the id attribute in HTML?

    In your case, I would use ID's like thing5 or thing.5.

    0 讨论(0)
 看不清?
提交回复
热议问题