1. 바닐라 자바스크립트로 HTML 문서 수정
맛보기에서 작성했던 HTML 코드를 다시 가져왔습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>D3 실습</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>
|
cs |
자바스크립트로 body 태그 아래에 있는 div 태그 내용을 수정하고 싶다면
|
1
|
document.querySelector('div').innerText = 'Hello!'
|
cs |
document 객체의 메소드인 querySelector 메소드를 이용해 div태그를 선택한 뒤 다양한 메소드, 속성값을 이용해 태그를 수정하면 됩니다.
이 과정을 그림으로 단순화하면 다음과 같습니다.
2. D3를 이용해보자
맛보기에서 위의 과정을 D3로 구현한 코드를 보면
|
1
|
d3.select('div').text('안녕하세요!')
|
cs |
이 토픽에서 설명할 select 함수가 나옵니다.
select 함수는 document 객체의 querySelector 메소드와 역할이 같습니다. 매개변수로 선택자를 넣으면 선택자에 맞는 첫 번째 태그를 선택하는 역할을 합니다.
select 함수는 selection 객체를 리턴하는데 이 객체의 메소드와 속성값을 이용해 HTML 문서를 조작하게 됩니다. 예제 코드에서는 text 메소드를 이용해 div 태그의 내용을 '안녕하세요!' 로 바꿨습니다. (text 메소드는 다음 토픽에서 다룹니다.)
3. 없는 태그 선택하기
select 함수는 자바스크립트의 querySelector 메소드와 달리 없는 태그를 선택해도 selection 객체를 리턴합니다. 예를 들어서 보도록 하겠습니다.
크롬 개발자도구의 콘솔창에서 현재 작성한 HTML 코드에 없는 태그인 ul 태그를 바닐라 자바스크립트와 D3를 이용해 선택해 보겠습니다.
바닐라 자바스크립트는 null 값을 리턴한 반면 d3는 selection 객체를 리턴합니다. (정확하게는 선택한 태그가 없는, 즉 비어있는 selection 객체가 반환됩니다.) 없는 태그를 선택한 selection 객체는 다른 메소드를 정상적으로 사용할 수 있습니다. 앞으로 없는 태그를 선택한 이런 경우를 빈 선택이라고 부르겠습니다.
