<div>doc1에 하나의 엘리먼트를 지정하기 위해 OvservableHQ가 알아서 span으로 묶어줍니다</div>
`
doc1
// 최상위 태그의 이름을 출력해 보면 우리가 작성하지 않았던 span으로
// 위 3개의 div 태그가 둘러싸여 있다는 것을 알 수 있죠.
doc1.tagName;
doc1.querySelector('div');// div를 선택하면 첫번째 div가 선택됨
doc1.querySelector('div').innerHTML;
doc2=html`
<section>
<div>하지만 이렇게 하나의 최상위 엘리먼트로 전체를 감쌌을 경우는</div>
<div>별도로 ObservableHQ에서 span으로 감싸주지 않고<div>
<div>doc2에 그냥 최상위 엘리먼트가 지정됩니다</div>
</section>
`
doc2
// 최상위 태그의 이름을 출력해 보면 우리가 작성한 section임을 알 수 있죠.
doc2.tagName;
doc2.querySelector('section');// 자기 자신을 제외한 포함하는 자손들 중에서 querySelect를 하므로 결과 없음
doc2.querySelector('div');// 내부에 있는 div를 선택하면 마찬가지로 첫번째가 선택됨
doc2.querySelector('div').innerHTML;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.