Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Book said don't use CSS IDs, use class instead but what about when Javascript?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 8, 2014 at 5:49 pm #182296
    TC
    Participant

    Hi.
    Book said don’t use CSS IDs, use class instead but what about when using Javascript to target specific elements?

    Maybe I missed a way to use Javascript to target classes instead of using Ids?

    For example, the code below works using Ids and Javascript:

    
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

    But I tried to change id to class in both places and it didn’t work:

    
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {document.getElementByClass("demo").innerHTML = "Paragraph changed.";}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p class="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

    The book on CSS does not cover Javascript.
    Just searched and read something on the internet saying don’t use class with JS but I’ll leave this post up so someone more experienced can comment :)

    Thanks for your help.

    September 8, 2014 at 6:26 pm #182297
    __
    Participant

    Take the time to do some research and find out what functions javascript provides for this sort of thing. MDN is a good resource for this. There is no such thing as document.getElementByClass, but there is document.getElementsByClassName, which does what you describe.*

    * nb; in contrast to getElementById, getElementsByClassName returns a list of elements (since there might be any number of elements with the specified class name —hence the plural form).

    September 8, 2014 at 6:26 pm #182298
    Alen
    Participant

    This might help: http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native

    September 9, 2014 at 4:34 am #182326
    Senff
    Participant

    The book (which book?) probably meant that it’s OK to give IDs to elements, and to target them with JavaScript, but to not use IDs for styling. In other words, avoid calling any ID in your CSS file because of their high specificity weight.

    Other than that, the use of IDs are fine, and it’s OK to call them in your JavaScript files because specificity is not an issue there.

    September 9, 2014 at 8:02 am #182346
    shaneisme
    Participant

    Yeah @Senff, but reusability goes right down the toilet.

    I much prefer classes, and JS specific ones at that.

    div class="headline js-accordion-parent" would be an element that the classjs-accordion-parent does not appear in the stylesheets at all… this way they’re not connected and you can change one without affecting the other.

    September 9, 2014 at 8:07 am #182348
    Senff
    Participant

    Yeah @Senff, but reusability goes right down the toilet.

    Well, that’s a bit much…but I know what you mean.

    September 9, 2014 at 8:54 am #182351
    TC
    Participant

    Hi guys, and thanks to all of you : __, Alen, Senff, and shaneisme :)

    __ you scored a direct hit, lol.

    You guys are right I need to read / learn more. I should of known about document.getElementsByClassName.

    The problem isn’t that I’m lazy but I’ve got something wrong with my eyes where I can only be on a computer screen or digital screen for a little while before my eyes get pressurized, hurt, bloodshot, etc. I think it’s because I have an astigmatism. I may need to get reading glasses.
    The problem gets so bad that I’m woken up in the middle of the night from pressurized eyes / eye pain and my eyes are totally red.

    Have any of you heard about these problems? If so any solutions you can suggest?
    You guys must put in long hours on the computer. These eye problems are ruining my life!
    I’m taking eye vitamins, trying eye exercises, but still can’t handle the computer / tv screen.

    CSS3: The Missing Manual by David Sawyer McFarland.
    It covers a lot of CSS which is great but I don’t like the author’s writing style.

    For Javascript I’m reading : A smarter way to learn Javascript by Mark Myers. This is a great book and a great way to learn Javascript.

    I have the kindle (small screen) versions of them and it’s probably a little more difficult to read on than having actual books. Love my kindle for it’s portability but I find when learning coding I’m wanting actual books.

    The book (which book?) probably meant that it’s OK to give IDs to elements, and to target them with JavaScript, but to not use IDs for styling. In other words, avoid calling any ID in your CSS file because of their high specificity weight.

    Senff I think you nailed it.

    You guys are awesome, thank you very much !

    September 9, 2014 at 9:38 am #182352
    shaneisme
    Participant

    If you really do have astigmatism, you should get a prescribed pair of glasses. Reading glasses from the drug store won’t help at all. I have a mild astigmatism as well, I got my first pair of glasses at age 27 and it changed my life.

    September 9, 2014 at 9:58 am #182353
    nixnerd
    Participant

    If I’m totally honest, I probably under-use IDs. I think I read somewhere that IDs perform slightly better in terms of speed. BUT… with classes you get re-usability and you’re able to add multiple classes to one element. The former, you shouldn’t do with IDs and correct me if I’m wrong but the latter won’t even work with IDs.

    September 9, 2014 at 11:41 am #182364
    __
    Participant

    Classes vs. IDs: I generally have very few IDs on a page, if any. About the only thing I use them for is document hashes (i.e., to be able to link to a specific item on the page). I use class names as styling hooks, and either class names or data-* attributes as JS hooks.

    September 9, 2014 at 11:48 am #182365
    Paulie_D
    Member

    Classes vs. IDs: I generally have very few IDs on a page, if any. I use class names as styling hooks, and either class names or data-* attributes as JS hooks.

    I’ve found this to be true more and more.

    How often is it that you need to target a single object…and even if you did, you’d want the JS to be re-usable.

    That’s the inherent problem with IDs…they’re unique…and modern web development processes are all about flexibility and extendability.

    If I can write (in my poor way) a JS/JQ function with an ID..it just makes sense to use a data attribute instead and it’s instantly re-usable.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.