在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?

Answer 1

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 .

Answer 2

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 ?

Answer 3

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.

Answer 4

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');