안녕하세요. 오늘 주제는 ‘상품정보를 위한 2가지’입니다.
처음 오신 분은 지난 이야기를 참고해 주세요.
지난 이야기
- 1편 : [GA 전자상거래 세팅] 어디서부터 시작해야 할까? #GO
- 2편 : [GA 전자상거래 세팅] 6가지 주요 문법 #GO
<Javascript 문법> - 상품정보
<사이트 예시>
상품 정보 수집에서 가장 큰 관건은 몇 개일지 알 수 없는 상품들의 정보를 가져와야 한다는 점입니다. 어떤 거래는 상품이 한 개만 있을 수 있으며 어떤 거래는 상품이 다섯 개일 수 있습니다. 따라서 상품 개수 파악을 해야 상품 정보를 수집할 수 있습니다.
상품 정보를 담은 요소가 HTML상에서 어디에 위치하는지 대략적으로 확인해보는 방법을 살펴보겠습니다. 개발자 도구 창의 최상단 왼편을 보면 사각형 안의 마우스 아이콘이 보이실 겁니다. 아이콘을 클릭한 후에 사이트의 상품정보가 담긴 부분을 클릭해보세요.
(해당 부분은 설정한 class값에 따라 다를 수 있습니다)
01
length함수
length함수는 상품 정보가 담겨있는 <tr>태그의 개수를 파악하기 위해 필요한 함수입니다.
상품정보가 담긴<tr>태그에 접근하는 법은 거래정보 포스팅에서 설명한 거래 정보 수집 방법과 동일합니다. 접근한 결과를 콘솔창에서 확인하면 다음과 같습니다.
document.getElementById(‘id값’).getElementsByClassName(‘class값’) [0].getElementsByTagName('tr')
코드 입력 시 콘솔창에는 상품정보가 담긴 <tr>태그의 개수만큼 나타나게 됩니다. 예를 들어 상품정보가 담긴 <tr>태그가 2개라면 “HTMLCollection(2) [tr, tr]”처럼 나타나게 됩니다.
document.getElementById('productListBox').getElementsByClassName('productList')[0].getElementsByTagName('tr').length
코드를 입력하면 <tr>태그가 몇 개인지 보여줍니다. 위의 예시처럼 <tr>태그가 2개라면 결과값은 2라고 나타나게 됩니다.
02
getAttribute()
innerText()를 사용해 요소 안의 값들을 모두 가져올 수 있으면 좋지만 때론 필요한 정보가 요소의 속성으로 들어가 있는 경우가 있습니다. 이 경우에 innerText()를 통해 필요한 정보를 얻을 수 없습니다.
이 경우, getAttribute() 문법을 통해 요소의 속성으로 표현된 값을 가져올 수 있습니다.
“<td class=’class이름’ value=’1234’>냉장고”라는 태그가 있다고 가정해봅시다. 태그안에 ‘냉장고’라는 텍스트 데이터는 innerText를 통해 받아올 수 있으나, value라는 속성안에 ‘1234’ 값을 가져오기 위해서는 getAttribute()를 사용해야 합니다.
getAttribute()는 첫번째 인자로 속성 정보를 받습니다. ‘1234’값을 얻기 위해서는 value 속성의 값이 필요하므로 'value'를 넣습니다. 콘솔에 입력할 명령어 예시는 다음과 같습니다.
document.getElementById(‘id값’).getElementsByClassName(‘class값’)[0].getElementsByTagName('tr')[0].getElementsByClassName(‘class값’)[0].getAttribute('value')
결과로 ‘1234’값을 얻을 수 있습니다.
이와 같이 얻고자 하는 값이 속성에 들어있을 때는 getAttribute()를 사용하실 수 있습니다.
오늘은 여기까지입니다!
공유드릴 좋은 소재와 정보가 있으면, 차곡차곡 쌓고 있는 중입니다.
저희 콘텐츠 방문하시고 능력치 무럭무럭 키워 가시기 바랍니다.
<2주일 뒤>
??? : (심술)너가 GA 좀 한다고?
나 : 예? 제가요?
궁금한 점 및 소재 제안은 댓글 또는 작가페이지 '연결하기'정보를 통해 문의해 주세요.
즐거운 하루 되시고, 다음 주제로 뵙겠습니다.
