Chapter 08. 데이터를 추출하는 방법 (DOM 기초 2)

1. 개요

 HTML 문서를 통해 데이터를 입력받거나 구성한다면 해당 데이터들은 데이터의 집합인 ‘객체’ 정보일 가능성이 높다.

객체 정보는 다수의 데이터로 구성된 상태이기 때문에 개발자가 필요한 정보를 추출할 필요가 있다 .

 

2. 특정 객체 구조에서 부분을 지정하는 방법

1) 문서에서 특정 정보를 변수에 할당

 Document(HTML 문서) 안에 위치한 id 혹은 class를 포함한 태그 전체를 가져오고 싶다면 document.getElementById 혹은 document.getElementsByClassName을 사용한다. 

 

var 변수=document.getElementById("아이디");
var 변수=document.getElementsByClassName("클래스");
var 변수=document.getElementsByTagName("태그이름")

 

 위의 추출 방법은 아이디나 클래스, 혹은 태그들의 전체 정보를 추출한다.

한개의 데이터가 아니기 때문에 추출한 정보는 곧 객체 정보이다.

id 혹은 class가 포함된 태그와 안에 contents까지 포함되어 추출되며, 일정 영역의 데이터가 필요하다면 이를 지정해야한다.

 

2) 복수의 객체 정보 할당: 배열 형태

문제는 id 같이 고유 식별자를 사용하지 않는 class 와 tag들이다.

해당 데이터는 복수의 객체 데이터를 변수에 할당한 상태이기 때문에 배열을 기준으로 데이터를 할당한다.  

배열에 의해 데이터가 할당된다면 기본 형태는 var a[]와 같을 것이다.

이러한 규칙에 따라, 태그 혹은 클래스에 지정된 데이터를 위에서부터 아래로 0, 1, 2 … 로 할당한다.

 

예를 들어 클래스가 gogi인 div가 3개가 있고, 이를 변수 bul에 할당한다면, Document의 위에서부터 처음으로 등장한 gogi는 bul[0], 다음 gogi는 bul[1]이 된다.  

배열로 구성된 데이터의 경우, 데이터의 크기인 length 또한 같이 설정된다. 이를 이용하면 전체 데이터에서 해당 배열이 가지는 데이터 크기(몇 가지의 배열을 가지는지), 정보를 파악하는 것이 가능하다. 

 

3) 객체 안에 특정 데이터 지정하기

또한 객체 구조에서 ~안에는 . 으로 구분한다.

예를 들어 다음과 같은 변수를 해석한다면  var gogi=document.getElementsByTagName("p") 다음과 같다. 

 

gogi라는 변수를 할당하는데, 해당 변수의 데이터는 HTML 문서 (document)안( . )에 구성요소(Elements)들 로부터(By) 태그이름(TagName)이 “p”인 데이터를 가져온다.(get)

즉 데이터의 상관관계에서 . 은 특정 요소 ~안에 라는 뜻으로 사용된다. 

 

 

이러한 특성에 따라 태그안에 위치한 타입, 스타일 등을 지정하여 ‘데이터를 추출’하는 것이 가능하다.

예를 들어 위의 예문에서 보이는 input 태그의 객체 데이터를 담은 inp안에 value를 추출하는 것은 inp.value 이다.

이러한 구조로 특정 데이터를 특정하는 것이 가능하다. 

 

3. 현재 경로 파악하기

document에 포함된 태그 혹은 이미지의 정보를 추출하고 파악할 필요가 있다.

변수를 할당하여 document.baseURI; 의 데이터를 집어넣으면 document의 경로를 알 수 있다.

해당기능은 이미지 파일이나 동영상 등 멀티미디어 파일의 경로를 파악하는데 사용한다. 

왜냐하면 서버 컴퓨터는 기본적으로 OS 설정이 안되어 있고, 저장소에 있는 데이터를 육안으로 확인하기 어렵기 때문이다.

 

4. <select></select>의 값 가져오기

<select></select> 태그는 <input> 태그와 다르게 <option></option>으로 데이터가 나눠져서 할당된 상태이다.

또한 화면에서는 해당 셀렉트 태그를 클릭하지 않으면 감춰진 옵션 정보가 확인되지 않는다.

이러한 문제로 인해 셀렉트 태그에서 데이터를 취할때 option으로 취하는 것은 큰 의미가 없다.

이유는 option으로 정보를 취하면 option 안에 밸류 데이터를 가져오거나 innerHTML을 가져오는데, 이 데이터가 실제 사용자가 선택한 정보인지 판별할 수 없기 때문이다.

이러한 이유로 셀렉트 태그는 반드시 셀렉트 태그 자체로 데이터를 추출할 필요가 있다. 

 

var select=document.getElementsByTagName("select");
console.log(select[0]);
console.log(select[0].selectedIndex); // 선택된 순번 가져오기
console.log(select[0].value); // 선택된 값을 가져온다.

 

셀렉트라는 태그의 데이터를 추출하는 과정에서 셀렉트가 document에서 하나일지라도 배열 변수로 할당된다.

때문에 select[0]으로 할당해서 진행한다.

 

셀렉트 태그에서 현재 선택된 값은 옵션을 확인하는 방법은 selectedIndex를 이용하는 것이다.

옵션에 붙은 넘버는 배열과 유사하게 위에서부터 0으로 시작하여 데이터가 할당된다.

또한 화면에 나온 정보 자체를 가져온다면 value 값을 추출하면 된다. value는 현재 선택된 정보이기 때문이다.