When to use the `#` symbol to get a DOM element?

Question

Sometimes I need to get elements like this:

var object = document.getElementById('ObjectName');

And sometimes like this:

var object = document.getElementById('#ObjectName');

What’s the difference between them?

[Related](https://stackoverflow.com/search?tab=votes&q=%5bjs%5d%20getelementbyid%20code:"%23"): [Why does `document.getElementById("#datepicker1")` not find my element?](https://stackoverflow.com/q/33036800/4642212), [Why am I getting “Cannot set property 'innerHTML' of null at ahint”](https://stackoverflow.com/q/54554975/4642212), [Why does `document.getElementById("#sideNav")` not find my element?](https://stackoverflow.com/q/38479889/4642212), [\[1\]](https://stackoverflow.com/q/62478560/4642212), [\[2\]](https://stackoverflow.com/q/17303764/4642212), and probably a few more. — Sebastian Simon, Jul 06 '20 at 05:02

Denys Séguret · Accepted Answer · 2020-07-08T09:51:38.650

8

No, you don't see

var object = document.getElementById('#ObjectName');

You don't see that because that would mean the id of the element starts with # and HTML4 id could only start "with a letter ([A-Za-z])".

What you see is sometimes people using the jQuery library in which the query language allows you to find an object using

var elem = $('#objectId');

And in the future you'll see more and more people using a similar query language with querySelector or querySelectorAll.

edited Jul 08 '20 at 09:51

answered Mar 18 '13 at 20:22

Denys Séguret

372,613
87
782
758

2

But `id` attributes starting with `#` are fair game in HTML5, so the questioner technically *could* have seen that code. – Frédéric Hamidi Mar 18 '13 at 20:27
1

@FrédéricHamidi "I always used it" lets me think OP isn't dealing with code gaining from the last versions of HTML. – Denys Séguret Mar 18 '13 at 20:28
This answer is a bit out of date (HTML5 allows `#` at the beginning, even though it’s recommended to start with a letter, and it is the future now). The other answers are more up to date. At least fix the unmatching parenthesis. – Sebastian Simon Jul 06 '20 at 12:30

score 7 · Answer 2 · answered Mar 18 '13 at 20:22

The # is part of the ID selector in CSS. There are libraries and methods which support CSS selectors for selecting elements, such as jQuery and the native DOM methods querySelector and querySelectorAll.

But in "traditional" DOM method, the # has no special meaning. getElementById('#ObjectName') would select an element which literally has the ID #ObjectName, i.e. <div id="#ObjectName">.

Quentin · Answer 3 · 2013-03-18T20:28:30.593

The former gets an element with id="ObjectName". The latter gets an element with id="#ObjectName".

In the context of a Selector (as used, for example, by CSS and document.querySelector but not with getElementById) the # character indicates that the text following it is an id.

document.querySelector('ObjectName') (using a type selector) would get <ObjectName /> (not valid HTML) while document.querySelector('#ObjectName') would get an element with id="ObjectName".

Muhammad Omar ElShourbagy · Answer 4 · 2013-03-18T20:46:46.580

-1

'#ObjectName'

JQuery (EDIT: or other JavaScript Libraries)

'ObjectName'

DOM (getElementById)

edited Mar 18 '13 at 20:46

answered Mar 18 '13 at 20:24

Muhammad Omar ElShourbagy

6,718
2
32
50

4

Selector syntax is used in many more places then that JS library. – Quentin Mar 18 '13 at 20:27
You are diffidently right, i'm just used to it so it was first thing in mind when thinking about JS Libraries. – Muhammad Omar ElShourbagy Mar 18 '13 at 20:46

When to use the `#` symbol to get a DOM element?

4 Answers4

Linked