Class vs ID?

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

51 Replies - 3636 Views - Last Post: 20 May 2014 - 05:07 PM

#1 Eoiser   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 05-April 14

Class vs ID?

Posted 06 May 2014 - 12:30 PM

I've learned that i should use a spesific ID only once per page, and rather use class when i want to target multiple elements. I have accepted that, but i never really understood why. Would anyone care to explain it to me?
Is This A Good Question/Topic? 0
  • +

Replies To: Class vs ID?

#2 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 3062
  • View blog
  • Posts: 11,753
  • Joined: 03-December 12

Re: Class vs ID?

Posted 06 May 2014 - 01:04 PM

It is for easier referance. Think of it like calling someone by their fullname, id, or their firstname where everyone turns their head, class.

Technically the only difference is the calling method.

This post has been edited by astonecipher: 06 May 2014 - 01:05 PM

Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2490
  • View blog
  • Posts: 7,543
  • Joined: 15-January 14

Re: Class vs ID?

Posted 06 May 2014 - 02:17 PM

There needs to be a way to refer uniquely to a specific element on the page, and ID is the way we do that.
Was This Post Helpful? 0
  • +
  • -

#4 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 3062
  • View blog
  • Posts: 11,753
  • Joined: 03-December 12

Re: Class vs ID?

Posted 06 May 2014 - 02:25 PM

Better explanation than I gave Artificial.

Classes are used when you want to refer to a group of elements. ID's are used to refer to a specific element.

Now that I am thinking again.
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2490
  • View blog
  • Posts: 7,543
  • Joined: 15-January 14

Re: Class vs ID?

Posted 06 May 2014 - 02:32 PM

Quote

Classes are used when you want to refer to a group of elements. ID's are used to refer to a specific element.

Right. Eoiser, some people might try to convince you that IDs can be re-used on a page, but those people are wrong. The entire purpose of an ID is to uniquely refer to a specific element, regardless of how well web browsers will handle broken code that reuses IDs.
Was This Post Helpful? 0
  • +
  • -

#6 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 140
  • View blog
  • Posts: 620
  • Joined: 15-March 14

Re: Class vs ID?

Posted 06 May 2014 - 03:13 PM

The reason is because ID is mapped into the global Javascript scope. Its one of those attributes that the browser developers, W3C, web developers, and every other man and his dog got them selves in a huff about and nobody is exactly sure what its real role is anymore.

W3C don't say much about it in the spec apart from the fact that it has to be unique. They don't give a reason why.

Each browser treats it differently, lord knows why. FireFox handles it differently than Chrome and IE floats in-between unsure what to do with it.

Every time I bring up the fact that getElementById is inherently flawed in all the browser implementations I get my threads blocked and people getting angry at me. Yet they can not give me a good reason why.

Here is the ideal. ID is a unique identifier for an element, its functionality and that of associated javascript objects and functions rely on the fact that there should only ever be one ID. It is used to reference that element, either directly from in javascript global scope, or indirectly via the DOM selector, getElementById. Any page with the same ID twice or more is broken and should report that error.
<html>
   <head></head>
   <body>
      <span id="myID"></span>
      <script>
         //indirect access
         var element = document.getElementById("myID").textContent;
         // direct method
         myID.textContent = "hi";
      </script>
   </body>
</html>



That all make sense and works just fine, well almost. The problem is that anyone can create web pages, and they dont have to have a computer science degree to do so. They do not know the rules, nor do they care that much. This presents a dilemma for the browsers. A page that has two identical ID's is broken. It should not be displayed. Browser authors will not do that, its in their best interest to try and show any page no matter how messed up it is. So they deal with it the best they can, and each one deals with it differently.

W3C refuses to change the rules regarding ID so each browser implements their own solution. So we are all forced to use indirect access via getElementById which negates the purpose of the direct access. They have all added their own rule. getElementById returns the first element in the DOM tree with the requested ID. There is no way of knowing from that request if there are other element with the same ID (with out walking all the element checking for copies)

Because web sites are considered public space it has become a real problem regarding ID's. Any third party content could have an element with the same ID, that element could come before the one you have, and be selected instead of yours, so to be sure you must also check other attributes of the selected ID. If it is not your, you are somewhat stuck as there is no agreed upon solution.

Chrome does it best. Don't use getElementById (no matter how much the script monkeys complain) access it by its id directly in javascript.

<span id="one"></span>
... script ...
one.innetHTML = "I am just one."; 
// easy simple


// but
<span id="one"></span>
<span id="one"></span>
<span id="one"></span>
<span id="one"></span>

.. script ...
// Firefox. Refuses to accept that there is more that one and happily puts
one.innetHTML = "I am just one."; // in the first one
// it does not even complain (someone tell me why thats right??????)

// chrome..This is how it should be done.
if(typeof one === "array"){
   one.foreach(function(o){0.innerHTML = "we are all one"};
}else{
   one.innerHTML = "I am one";
}


So you get the concept. The standard says it has to be one thing, but the reality does not conform to the standards. Browsers dare not report the page as broken, so they ignore the standard. Everyone uses getElementbyId even though it should throw an error if there is more than one ID. And the intend purpose of ID is left high and dry in the dreams of old timers like me.

Just my pet hate.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4246
  • View blog
  • Posts: 13,461
  • Joined: 08-June 10

Re: Class vs ID?

Posted 07 May 2014 - 01:01 AM

Quote

W3C don't say much about it in the spec apart from the fact that it has to be unique. They don't give a reason why.

they donít need to. IDs are defined in the SGML standard (and AFAIK if you validate a multiple ID document against a DTD, it will fail because of that).

Quote

The reason is because ID is mapped into the global Javascript scope.

IDs existed long before IE mapped them to the global scope, and as a matter of compatibility and laziness other browsers followed.
Was This Post Helpful? 0
  • +
  • -

#8 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 140
  • View blog
  • Posts: 620
  • Joined: 15-March 14

Re: Class vs ID?

Posted 07 May 2014 - 10:00 PM

Dormilich in post: #7 said:

they donít need to.

Yes they do if they want to be taken seriously. They don't have a good reason because it has been demonstrated that there is no logical reason. They should drop the requirement as NO browser conforms, and drop getElementById (well leave it for legacy) in favor of getElementsById

I still ask. Why must "id" be unique? Give me a proof, one example that makes a page unworkable!

As for SGML. That does not apply to HTML5 as it (HTML5) does not conform to the criteria required to be a generalized markup language. Are you all going to drop HTML5, don't think so.
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4246
  • View blog
  • Posts: 13,461
  • Joined: 08-June 10

Re: Class vs ID?

Posted 08 May 2014 - 12:08 AM

Quote

As for SGML. That does not apply to HTML5 as it (HTML5) does not conform to the criteria required to be a generalized markup language.

HTML5 wasnít an idea of the W3C to begin with. besides that there are pages out there that are not HTML5 and thus are SGML documents.


Quote

I still ask. Why must "id" be unique? Give me a proof, one example that makes a page unworkable!

use an XHTML 1.0/1.1 document with the application/xml+xhtml content-type header.
Was This Post Helpful? 0
  • +
  • -

#10 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 140
  • View blog
  • Posts: 620
  • Joined: 15-March 14

Re: Class vs ID?

Posted 08 May 2014 - 01:56 AM

Dormilich in post: #9 said:

use an XHTML 1.0/1.1 document with the application/xml+xhtml content-type header.


That does not mean the page does not work. It means that you as the page author verify that you have complied to the standards. As for browsers they don't give two hoots and happily parse the page whether it is standard or not. Try it for your self, create a XHTML 1.0/1.1 document with the application/xml+xhtml content-type header on your server. Add a few divs with the same ID, open up a browser (any browser will do, well has to be one that accepts that type of doc) and see for your self.

You will notice that the browser does not care at all, does not spit even a warning. They all treat the duplicated ID's as they normally do.

That is not proof, that is just saying, I comply to the standard, well I promise I do.

Dormilich in post: #9 said:

HTML5 wasnít an idea of the W3C to begin with.

And thus we wash our hands.
Was This Post Helpful? 0
  • +
  • -

#11 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2490
  • View blog
  • Posts: 7,543
  • Joined: 15-January 14

Re: Class vs ID?

Posted 08 May 2014 - 09:39 AM

Quote

Why must "id" be unique?

There needs to be a way to reference a specific element uniquely. It's not some big mystery. IDs are the way elements are made unique. It could be any other attribute, but they chose "ID" (you know, because it is an identifier; it identifies a single element).

Seriously, just get over it and move on. You obviously don't want to be convinced of anything, you just want to argue that your flawed reasoning is correct.

I'm reminded of a saying. Don't wrestle with a pig, because you'll both end up covered in shit and the pig will enjoy it.
Was This Post Helpful? 0
  • +
  • -

#12 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 140
  • View blog
  • Posts: 620
  • Joined: 15-March 14

Re: Class vs ID?

Posted 09 May 2014 - 10:21 PM

ArtificialSoldier in post: #11 said:

There needs to be a way to reference a specific element uniquely. It's not some big mystery. IDs are the way elements are made unique. It could be any other attribute, but they chose "ID" (you know, because it is an identifier; it identifies a single element).

Yes there is a need to define a uniqueness to an element. I do not contest that at all, all I am saying is that the behavior of getElementById is ambiguous in the public domain. If you code by the rules how do you know if the element you have got a handle to is the one your after. You may have done your best to ensure that all your element have a unique ID but a third party could have added a element with the same id. As Ids are very often assigned meaningful names the odds are very high that this will happens in a public HTML page. Using Firefox the only way to ensure that you have the correct element is to traverse the DOM tree and see.

I do not understand why you don't see this as a major flaw. IE and Chrome see the flaw, Firefox does not. The browser should report the error as a minimum so that the code can adapt. Burying your head in the sand is not going to change the fact that it is broken.

This post has been edited by Atli: 10 May 2014 - 02:26 AM

Was This Post Helpful? 0
  • +
  • -

#13 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Class vs ID?

Posted 10 May 2014 - 02:43 AM

View PostBlindman67, on 10 May 2014 - 05:21 AM, said:

ArtificialSoldier in post: #11 said:

There needs to be a way to reference a specific element uniquely. It's not some big mystery. IDs are the way elements are made unique. It could be any other attribute, but they chose "ID" (you know, because it is an identifier; it identifies a single element).

Yes there is a need to define a uniqueness to an element. I do not contest that at all, all I am saying is that the behavior of getElementById is ambiguous in the public domain. If you code by the rules how do you know if the element you have got a handle to is the one your after. You may have done your best to ensure that all your element have a unique ID but a third party could have added a element with the same id. As Ids are very often assigned meaningful names the odds are very high that this will happens in a public HTML page.

This is an issue that is very common in the programming world, and has already got acceptable solutions; solutions that do not require a redefinition of the concept of unique identifiers.

Consider common programming languages like C#, Java and PHP. In PHP, for example, all of the built-in classes are defined in the global scope. So we have a class called \PDO for database access. Now if I want to define my own version of this class, what do I do? Do I try to define another class in the global scope with that same name, and then expect PHP to give me a way to access both classes based on a conflicting identifier? Of course not. That's ludacris.

What we do - as I'm sure you know - is define our own code inside our own namespaces. The tradition in most languages is to do something along the lines of DIC\ExampleProject\PDO. This solves the issue of conflicting identifiers nicely. Now my class can share a common name, without it actually conflicting or being ambiguous at all.

This concept also works just fine in the HTML scene. Instead of naming a element, in code you know you can't control a 100%, something generic like main-header, you name it something like dicexp_main-header. The "namespace" there would be something you'd use to uniquely ID your elements, as opposed to whatever generic IDs the third-party code would use. - It's of course still possible that 3rd party code will conflict with this, but the likelihood is extremely remote; no more likely than importing a 3rd party PHP library would conflict with your own namespaces.

The main point here is that you don't solve problems that arise from poor coding practices by applying nonsensical changes to the languages. An ID is suppose to be unique. This is not a complicated concept. We should be finding ways to make sure people get that and don't reuse them, not changing the browser to allow them to be reused. - I'd get behind the ID of making browsers throw errors on conflicting IDs 100%. Adding a getElementsById function, on the other hand, I could not be more against.
Was This Post Helpful? 1
  • +
  • -

#14 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 140
  • View blog
  • Posts: 620
  • Joined: 15-March 14

Re: Class vs ID?

Posted 10 May 2014 - 05:15 AM

Atli in post: #13 said:

I'd get behind the ID of making browsers throw errors on conflicting IDs 100%.

Ahh someone that see's some sense in addressing the problem. We all know that the global namespace of Javascript is a big issues and take action to mitigate the problems, yet I have never seen (apart form my own code) anyone check to see if the ID's are indeed what they are supposed to be.

I write extensions for my own benefit and the first time I came across this problem was when I injected HTML into a popular web site. It stopped working, WTF. I investigated and found out that I had inserted a ID that was already used and the script on the page was grabbing my element instead of its. I was not given any warning or error by DOM. I now make it a point to check ID before I insert any of my own. I also generate IDs via a GetUID class that makes a unique ID for me and stores it as a human readable name object contain in the class. My IDs are 16 character random ids and close enough to Global unique identifiers to make me sleep at night.

The fact is that every element in the DOM already has a unique ID. Its reference or DOM id. Why do we have to duplicate it, It just does not make any sense at all. You can attach your own attribute to ensure uniqueness in your name space if you want. But to say something should be unique and then ignore conflicts it just bad design
Was This Post Helpful? 0
  • +
  • -

#15 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Class vs ID?

Posted 10 May 2014 - 05:34 AM

With the web full of sites written by amateurs/idiots, I can see the business sense in ignoring errors rather than all out failing to render things. It's a reasonable thing, from the browser maker's point of view. - Not saying I like it, just that I understand it.

Quote

The fact is that every element in the DOM already has a unique ID. Its reference or DOM id. Why do we have to duplicate it, It just does not make any sense at all.

That would be more of an internal browser thing though. The ID attributes lets you define an ID; something you know and can relate to.

Honestly, I don't see the need for a GUID-like value for IDs. If you just prepend a namespace keyword to the actual ID, like I did before, then it's highly unlikely it will conflict with anything else. Of course, that depends on the namespace, but it's not difficult to choose a non-conflict namespace. Some combination of the company/person making the code and the project name.
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »