Geek asks and answers

HTML DOM, identifiers and without identifiers?

If you have a div container with hundreds of very simple children, for example:

<div id="stuffContainer" class="item-container">
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    [...]
</div>

Inclusion of a unique identifier for each individual element of harmful (client) execution in any (significant) way, be it rendering, javascript or memory?

Why I ask: I may need from time to time to refer to certain elements, and I’m trying to figure out if I need to pre-calculate which elements I need to select by giving them identifiers and leaving or just assigning identifiers to all of them, which will make the process more direct, but I wonder if this could be an overuse.

Bonus points (if I could really give them) if someone can talk about how it is handled by modern browsers, and why this / will not affect the way browsers display and manage the DOM.

+5
source share
5 answers

In the best case, I guess the main are some things that will make the browser must be assigned an identifier as a property to each element when creating a DOM structure, and store identifiers in the hash table to facilitate actions such as the selector #id, document.getElementById()and idref search queries. I do not think that this will cause even a slight dent in observable performance or memory usage, as hash tables and DOM are designed to be very optimized.

, , ; . , , , , .

CSS, :nth-child() . , CSS2. . :

+3

BoltClock, - " !". , : . , , , , ( , , ).

+2

Q / , . . HTML, , , , "stuffContainer".

,

, DOM , . , , , , IMO. , , , -, , , , .

- , , , , innerHTML , js chat, innerHTML , , , . .

IMO, - , HTML- , , - , . - , , JavaScript, ID'd, . .

, . ' Itemid = "0". HTML, , - , , , , .

( ),

, , , , , , "ID" . -item , , . , , - , , HTML , HTML .

-Jquery- ():

var myContainer = document.getElementById('stuffContainer');
//ignore following indent goof

    myContainer.addEventListener('click', function(e){
        var
            singleItem,
            elementOriginallyClicked = singleItem = e.target,
            stuffContainer = this;

        //anything clicked inside myContainer will trigger a click event on myContainer
        //the original element clicked is e.target
        //google 'event bubbling javascript' or 'event delegation javascript' for more info

        //climb parentNodes until we get to a single-item node
        //unless it already single-item that was originally clicked
        while( !singleItem.className.match(/[=\s'"]single-item[\s'"]/g) ){
            singleItem = singleItem.parentNode;
        }

        //You now have a reference to the element you care about

        //If you want the index:

        //Get the singleItem parent childNodes collection and convert to array
        //then use indexOf (MDN has normalizer for IE<=8) to get the index of the single-item

        var childArray = Array.prototype.slice.apply(stuffContainer.childNodes,[0]),
        thisIndex = childArray.indexOf(singleItem);

        doSomethingWithIndex(thisIndex);
        //or 
        //doSomethingWithDOMObject(singleItem);

    } );

JQuery ( ):

$('#someContainer').on('click','.single-item', function(){
    var $_singleItem = $(this), //jq handles the bubble to the interesting node for you
    thisIndex = $_singleItem.index(); //also getting index relative to parent

    doSomethingWithIndex(thisIndex);
    //or
    //doSomethingWithJQObject($_thisItem);
} );
+2

id, . , , , , .

, id . jQuery, , , :

$('.single-item').eq(3);
+1

id . , , , jQuery, , . , , :

$('.single-item').click(function()
{
    var yourClickedDiv = $(this);
    // execute the rest of your code here
});

This is just a small example, but as you can see, you can access each div for everything you need. This will lead to the fact that the html file will be less cluttered due to excessive identification tags, and also reduce the size of your file (not to mention to save the headache from generating each unique identifier).

0
source

More articles:


All Articles