읽기 전에 잠깐!

간단한 체크 하겠습니다. 

1. 지난 콘텐츠의 내용이 매우 쉽게 느껴졌다.

2. 사이트에서 특정 요소 값의 위치를 바로 찾을 수 있다.

3. 이미 자바스크립트 문법을 모두 이해하고 있다.

4. 전자상거래 세팅을 직접 해본 경험이 있다.

결과체크

0~1개 : 끝까지 읽어주세요!

2~3개 : 몰랐던 내용만 체크하고 가세요.

4개 : 다음 편에 찾아오시는 것을 추천해 드립니다.

안녕하세요, 오늘은 2편으로 거래정보가 담긴 <javascript 문법>에 대해 알아보겠습니다!

처음 오신 분들은 지난 편을 참고하면 이해가 쉽습니다.

지난 이야기

- 1편 : [GA 전자상거래 세팅] 어디서부터 시작해야 할까? #GO

<Javascript 문법> - 거래정보

데이터 레이어를 구성할 값의 수집을 위해, 해당 값들이 사이트의 어디에 있는지 알고 있어야 합니다.

결제완료 페이지에서 특정 값의 위치를 파악해 놓고, 결제 완료 페이지가 조회됐을 때, 해당 위치에 있는 값을 가져오게 만드는 작업이 필요합니다.

특정 값의 위치를 파악하기 위해 사용하는 <Javascript 문법>은 6가지입니다. 

1) getElementById()

2) getElementsByTagName()

3) getElementsByClassName()

4) innerText()

5) replace()

6) parselnt()

01

getElementById()

첫번째 소개해드릴 문법은 getElementById()입니다. 하나의 요소만을 위한 디자인은 id속성을 사용합니다. getElementById()는 해당하는 id를 가진 요소를 반환합니다. 방법은 아래와 같습니다.

① (크롬의 경우) 해당 사이트에서 F12를 눌러 개발자 도구 실행

② 개발자도구 – console – document.getElementById(‘id값’) 입력

③ id속성을 가진 div요소 확인

02

getElementsByTagName()

콘솔창에서 document.getElementById(‘id값’)을 입력해 나온 div요소를 클릭해보세요. 해당 요소에 속한 다양한 하위 요소를 볼 수 있습니다.

하위 요소 중 예를 들어 <tr> 태그 요소만을 선택하고 싶은데 id 속성이 없는 경우엔 getElementsByTagName()을 사용하면 됩니다.

document.getElementById(‘id값’)뒤에 .getElementsByTagName('tr')을 붙여보세요. 콘솔창에 document.getElementById(‘id값’).getElementsByTagName('tr')를 입력합니다.

id값에 해당하는 속성을 갖는 요소 안에 <tr>태그가 있는 개수를 통해 반환되는 값의 개수를 확인할 수 있습니다. 예를 들어 반환되는 <tr>태그수가 2개인데 필요한 정보가 2번째 태그에 있다면 뒤에 [1]을 붙여줍니다. (컴퓨터는 숫자를 0부터 시작하기에 두번째 요소는 1입니다.)

입력예시) document.getElementById(‘id값’).getElementsByTagName('tr')[1]

03

getElementsByClassName()

콘솔창에서 document.getElementById(‘id값’).getElementsByTagName('tr')[1]으로 반환된 값을 클릭하면, 하위 요소를 볼 수 있습니다.

예를 들어 ‘거래ID’라는 값을 찾는다고 할 때, 특정 id값을 가진 class태그 안에 거래ID 값이 들어 있다면, 해당 요소에 접근하기 위해 getElementsByClassName()을 사용해야 합니다.

콘솔창에 다음과 같이 입력합니다.

document.getElementById(‘id값’).getElementsByTagName('tr')[1].getElementsByClassName(‘id값’)

마찬가지로 인덱스를 통해 필요한 부분만 가져올 수 있습니다.

document.getElementById(‘id값’).getElementsByTagName('tr')[1].getElementsByClassName(‘id값’)[인덱스번호]

04

innerText()

여태까지는 사이트 내에서 특정 위치에 있는 요소를 찾아내는 연습을 했다면 innerText()는 해당 요소에서 특정 값을 가져오는 역할을 합니다. 

만약 document.getElementById(‘id값’).getElementsByTagName('tr')[1].getElementsByClassName(‘id값’)[인덱스번호]를 입력했을 때, 결과가 “<td class=’id값’>뽑아낼값” 처럼 나온다고 한다면 “뽑아낼값”만 뽑기 위해 innerText()를 사용합니다.

05

replace()

이제 6가지 문법 중 마지막 소개해드릴 replace()입니다.

innerText()를 통해 나온 결과값 중 정제를 할 때 replace()구문이 필요합니다. 예를 들어 매출액에 대한 정보를 가져올 때, ‘원’ 또는 천단위별로 표기되는 콤마(,)를 빼기 위함입니다. 

하지만, 해당 작업과정에서 단순히 innerText()만으로 해결되지 않는 부분이 있습니다. 이럴 땐 parseInt()를 사용해야 합니다.

06

parseInt()

숫자형과 문자형이 혼합된 문자열을 정수로 출력하는 함수입니다.

오늘은… 여기까지 입니다!

??? : 오예 공부끝!!!

다음편에 이어지는 부분이 있습니다.

??? : …(주섬주섬)

다음 주제는 ‘상품정보를 위한 2가지’입니다!

궁금한 점 및 소재 제안은 댓글 또는 작가페이지 '연결하기'정보를 통해 문의해 주세요.

즐거운 하루 되시고, 다음 주제로 또 뵙겠습니다.