HTML/Javascript scope

Question

I have been fiddling around with HTML lately and I have a question.

Is there a way to scope element's id as a child of another element? It's difficult to describe, but here's an example.

<body>
  <div id="a">
    <div id="inner"></div>
  </div>
  <div id="b">
    <div id="inner"></div>
  </div> 
</body>

I do not know if this is legal (since "inner" is declared twice), but the problem is as follows:

Suppose I have a webpage full of square divs with their own styles and fixed positioning (kinda like Windows 8 metro), I would like to be able to group all components of a particular square into that square, so that I can use javascript to focus on the elements in the scope of say, in pseudocode.

ClickMeButtonDiv.ClickMeButton.value = parseInt(ClickMeButton.value) + 1;

In short, I want to know if it is possible to group all children of a div to that div, because if I have 100 squares on one page doing their own thing, it is a headache to keep all elements by id bound to global scope...

Is there any way to accomplish this?

Thanks ahead of time!

I understand that, but I would like to know if there is any non-id way to deal with this problem, because if I have many different "scopes", and ids are bound to global scope, then the page effectively becomes unmanagable. — Dmytro, Apr 26 '13 at 09:27
Any reference to how to utilize class? As far as I read, you cannot getElementByClass, and I never heard of anybody "subclassing locally". I thought it was purely for CSS convenience. — Dmytro, Apr 26 '13 at 09:29
Look into jQuery. It will make your life 100x easier. You can select an element by class very easily. For example, if you had a class `inner`, you could say `$(".inner")` to select all elements with that class. — Cezary Wojcik, Apr 26 '13 at 09:38

score 4 · Accepted Answer · edited Apr 26 '13 at 12:00

4

You can't have non-unique IDs. You can use the class property though. Change id="inner" to class="inner" and if you're using JQuery, you could try using child selectors. For example:

$("#a > .inner");

Without jQuery

document.getElementById('a').getElementsByClassName('inner')[0];

edited Apr 26 '13 at 12:00

Gary

13,303
18
49
71

answered Apr 26 '13 at 09:30

Artless

4,522
1
25
40

is that using class or id? – Dmytro Apr 26 '13 at 09:31
2

It selects `id="a"` and then all `class="inner"` – Artless Apr 26 '13 at 09:32
I think this solves the problem, although I'm still really curious if this can be done in pure javascript. – Dmytro Apr 26 '13 at 09:32
If you want pure JS, try this: http://stackoverflow.com/questions/12166753/how-to-get-child-element-by-class-name – Artless Apr 26 '13 at 09:33
Ah I see, so it iterates over elements and verifies classname, makes sense. This solves the problem, thanks! 4 minutes until I can accept answer. – Dmytro Apr 26 '13 at 09:34

score 2 · Answer 2 · answered Apr 26 '13 at 09:35

2

id must be unique. The grouping problem you describe is best solved using classes.

  <div id="a">
    <div class="inner"></div>
  </div>
  <div id="b">
    <div class="inner"></div>
  </div>

If you want to read out values from inner elements I highly recommend to use jQuery because it allows you to select elements by class.

<div id="a">
  <input type="text" class="inner" value="1" />
</div>
<div id="b">      
  <input type="text" class="inner" value="2" />
</div>

JS:

$('#a input.inner').val(); // == 1
$('#b input.inner').val(); // == 2

answered Apr 26 '13 at 09:35

Friederike

1,252
15
29

Thanks for the examples, I was hoping it could be done without JQuery, but doing so appears to be messy, as I noted in a response earlier. Although it shouldn't matter since making something as sophisticated as I mentioned would make sense to take advantage of JQuery. – Dmytro Apr 26 '13 at 23:29
Well if it can be done with jQuery it is definitely possible in pure JS as well. But since the jQuery lib is so easy to use I'd use it. ;) – Friederike Apr 27 '13 at 11:58
Yeah but the problem is that javascript does not allow direct way to access nested classes, which means you have to iterate over all the elements to find their class, then go into that element, then iterate over that element's elements and check their classes, which becomes even more compicated when it's deeper than two levels nested, possibly requiring loops or recursions. Ideally, I was hoping there would be a way to document.getElementByClass("a").getElementByClass("b"), or something like document.getObject("a.b") but oh well. – Dmytro Apr 27 '13 at 13:30

HTML/Javascript scope

2 Answers2