How to access your DOM from Javascript

Or how to stop using CSS classes

a tree supposed to be representing your DOM…

Until some years ago JQuery was the frontend framework, and today we are still heavily using it in many projects, even if real frontend framework are now around.

The problem that I’ll describe here is related to a bad behaviour I encountered too often during my work and I’d like people to avoid from now on.

Let me show you this simple piece of HTML:

<input type="text" class="search"/>
<div class="results">
<div class="element">Hello</div>
<div class="element">World</div>
<div class="element">Everyone</div>
</div>

Our designer, decided to do some refactorings to our pages and to the CSS, and decided to change some classes:

<input type="text" class="search-input"/>
<div class="results">
<div class="result-element">Hello</div>
<div class="result-element">World</div>
<div class="result-element">Everyone</div>
</div>

Nice and simple when you look at it, the new design looks very nice and the designer is very happy.

Unfortunately this HTML code hides a secret and, unless the page is properly tested, the designer just destroyed our application completely.

In a javascript file, included somewhere in our application, we can find this:

let list = $('.results');
let list_item = list.find('.result-element');

let input = $('.search-input');
let filter = input.val().toUpperCase();

list_item.each((index, element)=> {
$(element).toggle($(element).html().toUpperCase().indexOf(filter) > -1);
});

This JS filters out the element of the list, depending on the text written in the input. Your evil colleague just did what many others would have done: access element of the page through their CSS class:

  1. because the CSS class is there
  2. because it can be reused
  3. because “how do I access it otherwise?”

The problems here are multiple:

  1. reading the HTML code we do not know that some JS is attached to it
  2. we cannot change our styles freely without changing the JS
  3. we are using CSS (which is meant to define style) to define behaviour

The data- attributes to the rescue

When you need to add JS behaviour, from now on, start using data- attributes:

<input type="text" class="search" data-search-input/>
<div class="results" data-results>
<div class="element" data-result-element>Hello</div>
<div class="element" data-result-element>World</div>
<div class="element" data-result-element>Everyone</div>
</div>
let list = $('[data-results]');
let list_item = list.find('[data-result-element]');

let input = $('[data-search-input]');
let filter = input.val().toUpperCase();

list_item.each((index, element)=> {
$(element).toggle($(element).html().toUpperCase().indexOf(filter) > -1);
});
  1. Your colleagues will understand immediately that something is going on with that piece of code → JS is attached to it
  2. You designer can change the CSS classes freely
  3. It’s reusable

I hope this article will save you some headaches, and make your code maintenance easier for the future. Feel free to share this article with your evil colleague that uses CSS classes in JS.