javascript - выберите div в определенном div

Question

Содержимое divs будет заполнено javascript json. Теперь я знаю, как выбрать div в javascript:

var hsc = document.getElementByID("hsc"); 

Но как я могу назвать, например. название, но только в hsc div.

<div id="hsc"> 
    <div id="title"></div> 
    <div id="jobs"></div> 
... 
</div> 

<div id="cc"> 
    <div id="title"></div 
    <div id="jobs"></div> 
</div> 

На отдельной ноте, не будет «название» и «работа» быть лучше классифицировать как классы, а не идентификаторы?

Answer 1

Это будет работать:

var hsc = document.querySelectorAll("#hsc > .title"); 

Но вам нужно изменить, чтобы в силе html и вместо этого используйте уникальные идентификаторы и классы:

<div id="hsc"> 
    <div class="title"></div> 
    <div class="jobs"></div> 
... 
</div> 

<div id="cc"> 
    <div class="title"></div> 
    <div class="jobs"></div> 
</div> 

Answer 2

Идентификаторы должны быть уникальными в HTML.

Измените их на классы, а затем вы можете использовать querySelector() для нацелить их:

document.querySelector('.hsc .title').style.color= 'blue'; 
 
document.querySelector('.cc .title').style.color= 'red';

<div class="hsc"> 
 
    <div class="title">Make me blue!</div> 
 
    <div class="jobs">Jobs</div> 
 
</div> 
 

 
<div class="cc"> 
 
    <div class="title">Make me red!</div> 
 
    <div class="jobs">More jobs</div> 
 
</div>

Answer 3

Просто попробуйте

<div id="hsc"> 
    <div id="a" class="title"></div> 
    <div id="b" class="jobs"></div> 
... 
</div> 

<div id="cc"> 
    <div id="c" class="title"></div 
    <div id="d"class="jobs"></div> 
</div> 

Потому что ваш HTML-код является недействительным, так как идентификатор уже используется.