1

Uhm, I've got this script but it does not work.

It's all about this line: document.getElementById('thetest').addClass('superspecial');

As soon as the class should be added (but it isn't) the whole script quits... Does anybody know why?

Ian
  • 50,146
  • 13
  • 101
  • 111
Isaiah
  • 1,852
  • 4
  • 23
  • 48
  • When using jQuery, DO NOT use `document.getElementById()`... use jQuery selectors...`$('#thetest').addClass('superspecial');` – Dom Aug 12 '13 at 20:09

2 Answers2

4

Should be:

jQuery('#thetest').addClass('superspecial');

or

document.getElementById('thetest').className += ' superspecial';

document.getElementById doesn't return a jQuery element.
That's why you get has no method error.

Ricardo Alvaro Lohmann
  • 26,031
  • 7
  • 82
  • 82
  • One of the major advantages of jQuery is allowing you to use CSS selectors to get objects, instead of getElementById. Have a look at http://api.jquery.com/category/selectors/ for more info. – Dave Aug 12 '13 at 20:15
  • @Dave: You can use CSS selectors without jQuery. –  Aug 12 '13 at 20:18
  • 1
    Okay, granted, but you can't just lump them all into one selector and let jQuery figure out which getElement(s) functions to use for you. If you're going to load the library, you may as well take advantage of the things it does best. – Dave Aug 12 '13 at 20:20
  • @Dave: I'm not sure what you mean by lumping them all into one selector. –  Aug 12 '13 at 20:26
  • @CrazyTrain, I'm talking about selectors like $("div.notification .even input[type=text]"). While you can do this using the DOM, you'd have to make multiple calls to getElementsByClassName, a call to getElementsByTagName, multiple checks of how many results were returned, loop through the TagName results to check for the type, etc, etc, etc. – Dave Aug 12 '13 at 20:33
  • `document.querySelectorAll("div.notification .even input[type=text]")` This method is native DOM API. It's what jQuery/Sizzle defaults to in most cases. –  Aug 12 '13 at 20:35
  • @Dave, Have a look at [document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector) and [document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll) – plalx Aug 12 '13 at 20:36
  • @CrazyTrain While that *may* be true, `document.querySelectorAll` is flawed with descendant querying (i.e. `"ancestor descendant"`), so I'm pretty sure jQuery won't pass that whole selector to `querySelectorAll`. Here's a read: http://ejohn.org/blog/thoughts-on-queryselectorall/ . I'm just randomly chiming in, not trying to defend/argue anyone/anything :) – Ian Aug 12 '13 at 20:40
  • @Ian: If that's the blog post where John complains that `.querySelectorAll` didn't arbitrarily change the way selectors work by making them only consider the sub-DOM from which they were called instead of the entire page, then I've read it, and disagree that it's a flaw. –  Aug 12 '13 at 20:42
  • No, that's definitely a flaw. If you start your query at a certain point in the DOM, you shouldn't get results that only matched based on ancestors of the supposed starting point of the query. There's no practical reason to do it that way, and none of the existing helper libraries do it that way, so it's instantly incompatible with existing code. – Dave Aug 12 '13 at 20:54
  • 1
    @CrazyTrain Hey hey, I never said it was a flaw. My only point was that passing a descendant selector to `querySelectorAll` doesn't do the same as in jQuery. – Ian Aug 12 '13 at 20:54
  • And even if all jQuery did was pass the selector to querySelectorAll, it still wraps the result in a nice non-null object with chainable helper functions and null handling, which is very nice. – Dave Aug 12 '13 at 20:55
  • @Ian: *"...document.querySelectorAll is flawed with descendant querying..."* –  Aug 12 '13 at 20:56
  • @Dave: That represents an arbitrary redefinition of how selectors work. Given a selector of `div > p > span`, if one asks one's self does a matched `span` have a parent `p`, which has a parent `div`, the correct answer is *"yes"* irrespective of from where that element was queried. –  Aug 12 '13 at 20:59
  • 1
    @CrazyTrain WTF! Haha sorry, I didn't mean to contradict myself. I think I chose my wording improperly. Maybe "doesn't work as you'd expect" is what I *meant* – Ian Aug 12 '13 at 21:00
  • 1
    @Ian: Happens to the best of us. :) I do think that some sort of pseudo selector addition to the `querySelector/All` syntax that establishes a sub-DOM context would be helpful in some cases, though I don't think it should be the default. –  Aug 12 '13 at 21:02
  • I'd argue that slavish adherence to "how selectors work" is more arbitrary than using a method that is less surprising, especially to developers used to libraries that don't work that way, but now we're just talking opinions, and I have Facebook for that. Thanks for the education. – Dave Aug 12 '13 at 21:06
1

I know this is a bit of an old post by now, but I ran into it myself and I used a method that wasn't named before to solve it.

Instead of using

document.getElementById("name").className+='superspecial';

I used

document.getElementById("name").classList.add('superspecial');

After some research it seems that this is a fairly new way to do it that isn't supported in a lot of browser versions other than the latest. Browser requirements to use this functionality are as described here: https://www.w3schools.com/jsref/prop_element_classlist.asp

I don't know the exact difference between the two solutions, but it seems to me that getting the classList and adding to it with an existing function would be the preferable option. Especially as += is a general method of adding things to eachother that doesn't always have to work the way you expect it to.

Bloddyeye
  • 67
  • 2
  • 9
  • 1
    If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/low-quality-posts/20529982) – Nic3500 Aug 08 '18 at 11:40
  • Good point, I will remove the question part as i don't find it interesting enough to post a seperate question for. I will leave the rest as an alternative answer for those visiting this page. Thanks @Nic3500 – Bloddyeye Aug 09 '18 at 12:11