What is the best practice to get a child of an element in HTML?

Question

Something like get an variable out of class.

ParentElement.someId.someId..

If i have something like that in css:

#someId #aaa #bbb
{
    ...
}

#someOtherId #aaa #bbb
{
    ...
}

and i want to get only the element under "#someId". Something like

getElementById("someId aaa bbb");

would be great, unfortunately this one doesn't work.

Any ideas?

But...ID is still supposed to be unique within the page. If you need to make the distinction that your CSS does then your html is invalid. — nnnnnn, May 10 '15 at 13:13
possible duplicate of [best way to get child nodes](http://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes) — keithb, May 10 '15 at 13:45

score 0 · Answer 1 · answered May 10 '15 at 12:50

0

If you have given an id to the element, you can say

document.getElementById(childId)

Id must be unique in the document.

In your scenario, what I think you are having element with same Id at multiple places. Either you can user class instead of id.

answered May 10 '15 at 12:50

Mritunjay

25,338
7
55
68

Exactly, i'm trying to avoid names like "some_button", "other_button" "one_more_button". i want one "button" class/id to be under different divs inside the document. I know i cab have references if i "spawning" them by code, but i don't want to be have to". – Sahkan May 10 '15 at 12:55

score 0 · Answer 2 · answered May 10 '15 at 12:54

0

I assume you want to get the element in javascript, or what do you mean by "getting" in HTML?

<div id="box">
    <div>Child element</div>
    <div>Child element</div>
</div>

You can access a specific element by getElementById('box'); and you can access its children by getElementById('box').children. So the first child would be getElementById('box').children[0] for example.

Did that help you ?

answered May 10 '15 at 12:54

exophunk

188
6

I Prefer not to use numbers for the sake of order. something like getElementById('box').children["name"] would be great. – Sahkan May 10 '15 at 12:58
You could use jQuery if that is an option to you. There you can easily select a child element like this: `$('#someID .aaa');` (use classes for the sub elements because ids have to be unique on the whole page) – exophunk May 10 '15 at 13:01
If this JQuery line works i think this is exactly what i needed! Thanks :) – Sahkan May 10 '15 at 14:43

score 0 · Answer 3 · answered May 10 '15 at 12:57

Id's are unique within the document so your ParentElement.someId.someId can simply be translated to document.getElementById(childId).

Regarding the sample CSS you posted, please note that you cannot have both situations in the same HTML at the same time, you can stylise differently based on the DOM hierarchy though. With this in mind, you can use the same document.getElementById(childId) call.

score 0 · Answer 4 · answered May 10 '15 at 13:01

ID should be unique, so you really shouldn't have elements with the same ID over and over, instead you can use class.

To access the element though, first you get the parent:

var parent = document.getElementById("someId");

Then use querySelector on parent to get the desired element:

var element = parent.querySelector('.ELEMENT_CLASS');

And if it's id then:

var element = parent.querySelector('#ELEMENT_ID');

What is the best practice to get a child of an element in HTML?

4 Answers4