CODEWITHSUNDEEP
javascriptjquery
Unknown developer
Unknown developer

Reputation: 5920

Best practice in finding a DOM element

I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:

  1. Find the element according to its class name, e.g $('.my-content')

  2. Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()

However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?

Upvotes: 4

Views: 1664

Answers (4)

pumpkinzzz
pumpkinzzz

Reputation: 2967

A very good practice is to decouple HTML, CSS and JS.

When binding javascript to DOM elements you should use javascript selectors. Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).

So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector

HTML

<div class="my-content js-toggle-element"></div>

JS

$('.js-toggle-element')

CSS

.my-content{ ... }

Plus, using Javascript Selectors:

  • makes HTML highly readable: you can easily find out what will happen to that element with that js class

  • allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all

    <div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>

Upvotes: 4

Bhuwan
Bhuwan

Reputation: 177

If the class or the position of the element in DOM is changing then you can try selecting it with the inner text

$("button:contains('buttontextgoeshere')")

Upvotes: 0

Nitesh Goyal
Nitesh Goyal

Reputation: 586

Using jQuery will be much easiest way. Like this -

$( ".target" ).toggle();

The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Reference - jQuery Toggle

Upvotes: 0

FvB
FvB

Reputation: 723

  1. If it's a specific element, supply it with an Id value and use that to find it.
  2. If it's a TYPE of element, use a class name.

Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.

Upvotes: 3

Related Questions