d3에서 깊은 요소 선택

Question

내 질문에 대해서는 udacity.com 메인 페이지를 참조하십시오.

음,이 텍스트에 액세스하려고합니다. "Udacity Difference"는 페이지 중간에 있습니다. 시도 :

d3.select("div.banner-content.h2.h-slim") 
d3.select("div.banner-content.h-slim") 

위 작업 중 아무 것도 작동하지 않습니다. 그래서이 페이지의 dev-tools 요소 섹션을 살펴 보았습니다. 는 그럼 난 마우스를하고 볼 수 있습니다 : div.banner-내용,

{div.container 
     {div.row 
      {div.col-xs-12 text-center 
       {h2.h-slim}}}} 

그럼 내가이어야은 "용기"를 얻을 수 있는지 시도 갈까요 확인을 생각 더있다 그러나 심지어이

d3.select("div.banner-content.div.container") 

또는

d3.select("div.banner-content.container") 

나던 작업 !!!!

윤리적으로 결함이 있습니까?

Answer 1

다음과 같이 d3의 연결 구문을 사용하여 중첩 된 요소를 찾을 수 있습니다.

HTML :

<div class="banner-content"> 
    <div class="container"> 
     <h2 class="h-slim">Header</h2> 
    </div> 
</div> 

코드 :

d3.select("div.banner-content").select("div.container").select("h2.h-slim") 

편집 : 같은 긴 구문을 입력 할 필요가 없습니다. 선택기를 공백으로 구분하면됩니다.

d3.select("div.banner-content div.container h2.h-slim") 

아래 코드는이 경우에도 동일한 결과를 제공합니다. 필요한 경우 특별히 태그를 추가 할 수 있습니다.

d3.select("div.banner-content .container .h-slim")