Use date or class to query DOM elements

Asked

Viewed 139 times

5

Here I am needing a little help to get a broader view on this subject.

As a rule I usually avoid using class to query elements in HTML, I end up using a custom data property.

in many cases I end up with duplicates in html:

<div data-content="" class="content" />

where my CSS would be something like this: 

.content { ... }

And to consult this element in JS would do something like this:

var content = document.querySelectorAll("[data-content]");

My purpose here is to keep the presentation layer separate from the behavior layer, so that a change in the layout of the page does not affect the scripts and vice versa.

So would you like to hear the positive and negative points of this approach? I even accept a Jsperf comparing querySelectorAll with the getElementsByNameClass

javascript css
  • 2

    Are you assuming that class only refers to the corresponding CSS class? In fact no, the classes serve to complement the semantics of the elements, and group them into sets with common characteristics. Starting from this concept, it is totally valid to use classes as selectors also in JS.

  • By no means is it more a matter of style of convenience than of limitation.

  • Just to complement, the W3C specification itself makes it clear that class is not limited to style only, I just find it inconvenient to mix 'style' with 'behavior'. Note: Assigning classes to an element affects class matching in selectors in CSS, the getElementsByClassName() method in the DOM, and other such Features. There are no Additional Restrictions on the tokens Authors can use in the class attribute, but Authors are encouraged to use values that describe the Nature of the content, rather than values that describe the desired Presentation of the content.

2 answers

1


Assuming that we are searching for an attribute, I believe that this is slower, because it will check all the elements of the page, which may have this attribute.

So, search for tag or make a seletor maybe it’ll get faster.

Lately I’m using custom data property. for dynamic attributes, this actually makes it much easier to manipulate the elements independently of the behavior.

But I believe a performance test can help clear that doubt for sure.

  • Luan, actually a search for Id is virtually 10x faster than by classname, which in turn is faster a Queryselectorall, but even the latter is able to perform 7,000 operations per second, then this would be a problem only on very large pages with very broad queries.

1

Conceptually the answer doesn’t have to be long.

If you use classe or even custom data property, the interpreter searches element by element until he finds all that match his selector. That is to say, all elements of your document are analyzed.

In the case of custom data property the situation is more sluggish as well as analyzing the elements, the interpreter also analyzes all the estates of these elements.

If you have a certain behavior to a group and elements, believe in terms of performance, utilise class is the most appropriate. In terms of readability agree that the property is much more robust to the eyes.

If your document isn’t so great I believe it’s worth sacrificing a bit of performance and use property. It won’t affect you any more than a few milliseconds that will not result in anything very noticeable to your end user.

  • Not necessarily all elements, it is possible to reduce the scope of the search by performing a pre-query before, for example: 'var container = Document.getElementById("container"); container.querySelectorAll("[data-content]");'

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.