What practical problem will i face if i use same #id more than one time on a page , other than validation error “ID is already defined”?

问题

First of all I alwyas use one #ID. just asking this question to know deep reason behind it.

Is it only a matter of W3C validation? or more than that.

Will i face any practical problem or it's just a logic for validation?

see this example http://jsbin.com/aniqi it's working on all browsers. just validation giving error

update : I think all browser supports more than one #ID so it's just a recommendation but supported by browsers.

only validation give error : ID is already defined.

and if we use javascript to select #ID, other wise it's not a problem

Update 2: What should be the answer if some web design students of mine asking to me about "Why css #ID should be used once in a page. student doesn't know about javascript yet. What reasons i can give to not to use #ID more than one, while it's supported by all browsers?

Update 3: I found some useful info on W3C site

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

The id attribute has several roles in HTML:

The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their id values:

* As a style sheet selector.
* As a target anchor for hypertext links.
* As a means to reference a particular element from a script.
* As the name of a declared OBJECT element.
* For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

回答1:

This post is just to add some more points to this interesting discussion ..

Its true that .. Id must have been unique and usage of 'duplicate IDs' must have been depreciated by browsers itself ..
But may be because these browsers want to make it more coder-friendly, don't seriously consider the "id" matter ..
So apart from javascript this mistake doesn't matter much to us too ...
(Depends on the version of the different browsers) Even CSS has no problem with it .. (apart from validation errors) check this out ..

<head>
<style type="text/css">
  #Button{color:red;}
</style>
</head>
<body>
<form>
<input id="Button" type="button" value="Click me"/>
<input id="Button" type="text" value="Type Here"/>
</form>
</body>

But I assure that in-case of javascript usage it is prone to hell of bugs .. Once I had faced this problem .. where I had used same name for ID as well as NAME .. !

:-)

回答2:

The result is undefined.

Apart from what the rest said about getElementById:

using #foo in CSS may apply to all elements with id="foo", or to the first, or to the last, depending on how the browser is implemented.
using page.html#foo in a URL may scroll to one of the elements, or to the other, or to neither.

edit: either way, you should teach your students to do things right even if doing it wrong doesn't seem to have any immediate bad consequences... ;)

回答3:

document.getElementById() won't work reliably.

回答4:

I've had experiences where certain JavaScript code didn't work as expected because two elements had the same ID. I think getElementById just gets the first element it comes to that has the particular ID.

回答5:

"Why I'm saying css #ID should be used once in a page (to my students)?"

"Imagine the trouble it would cause if lots of countries had the same name. ID is identity. Many countries can be an island, or tropical, or as small as a carpet but think of the trouble it would cause if 50 countries were called San Marino."

回答6:

I understand why you're asking the question. Tell your students that's it's the potential problems that they will face if they use ID incorrectly. Or, other coders that want to use/alter/correct your code if you write it incorrectly.

In other words, try not to leave slop in your wake when you build your page because it's good practice not to leave slop for other coders. And, if you come back to that page and you want to make it dynamic, you'll have slop when you're done, and you won't know why.

回答7:

At a minimum, Javascript code which uses getElementById() will return only one of the matching elements - which one will be undefined, and hence subject to cross-browser differences.

来源：https://stackoverflow.com/questions/1983834/what-practical-problem-will-i-face-if-i-use-same-id-more-than-one-time-on-a-pag

标签

css

xhtml