Published
Edited
May 2, 2019
1 fork
Insert cell
Insert cell
doc1
Insert cell
doc1 = html`
<div>일단 이렇게 여러개의</div>
<div>여러개의 엘리먼트가 나오면<div>
<div>doc1에 하나의 엘리먼트를 지정하기 위해 OvservableHQ가 알아서 span으로 묶어줍니다</div>
`
Insert cell
doc1
Insert cell
// 최상위 태그의 이름을 출력해 보면 우리가 작성하지 않았던 span으로
// 위 3개의 div 태그가 둘러싸여 있다는 것을 알 수 있죠.
doc1.tagName;
Insert cell
doc1.querySelector('div'); // div를 선택하면 첫번째 div가 선택됨
Insert cell
doc1.querySelector('div').innerHTML;
Insert cell
doc2 = html`
<section>
<div>하지만 이렇게 하나의 최상위 엘리먼트로 전체를 감쌌을 경우는</div>
<div>별도로 ObservableHQ에서 span으로 감싸주지 않고<div>
<div>doc2에 그냥 최상위 엘리먼트가 지정됩니다</div>
</section>
`
Insert cell
doc2
Insert cell
// 최상위 태그의 이름을 출력해 보면 우리가 작성한 section임을 알 수 있죠.
doc2.tagName;
Insert cell
doc2.querySelector('section'); // 자기 자신을 제외한 포함하는 자손들 중에서 querySelect를 하므로 결과 없음
Insert cell
doc2.querySelector('div'); // 내부에 있는 div를 선택하면 마찬가지로 첫번째가 선택됨
Insert cell
doc2.querySelector('div').innerHTML;
Insert cell

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.
Learn more