[JavaScript] DOM 조작 연습 3

💫 상품 정보 출력하기

쿠팡 상품페이지에서 상품의 대표이미지 주소, 상품 주소, 상품 이름, 상품 가격, 상품 별점 출력하기

💫 출력결과

상품 메인 이미지 주소 : https://thumbnail7.coupangcdn.com/thumbnails/remote/492x492ex/image/vendor_inventory/2f36/78bc576885e6986a802ed296cd6ce412ceee6c71e46456fe555345c4b872.JPG
상품 주소 : https://www.coupang.com/vp/products/7665384552?vendorItemId=87513882348&sourceType=HOME_JIKGU_PROMOTION&searchId=feed-e1a9e07c710349b2a4ebef5183a90266-jikgu_promotion&isAddedCart=
상품 이름 : 우허 쿠로미 식기 4종 세트
상품 가격 : 12,000원
상품 별점 : 5

💫 CODE

// 상품 이미지 주소
var img = document.querySelector('.prod-image__detail').getAttribute('src');
// 상품 주소(현재 주소)
var url = window.location.href;
// 상품 이름
var name = document.querySelector('.prod-buy-header__title').innerText;
// 상품 가격
var price = document.querySelector('.total-price > strong').innerText;

// 상품 별점
if(document.querySelector('.rating-star-num').style.width == '100%') var score = 5; 
else if(document.querySelector('.rating-star-num').style.width == '90%') var score = 4.5;
else if(document.querySelector('.rating-star-num').style.width == '80%') var score = 4;
else if(document.querySelector('.rating-star-num').style.width == '70%') var score = 3.5;
else if(document.querySelector('.rating-star-num').style.width == '60%') var score = 3;
else if(document.querySelector('.rating-star-num').style.width == '50%') var score = 2.5;
else if(document.querySelector('.rating-star-num').style.width == '40%') var score = 2;
else if(document.querySelector('.rating-star-num').style.width == '30%') var score = 1.5;
else if(document.querySelector('.rating-star-num').style.width == '20%') var score = 1;
else if(document.querySelector('.rating-star-num').style.width == '10%') var score = 0.5;
else var score = 0;

console.log('상품 메인 이미지 주소 : https:' + img + '\n상품 주소 : '  + url + '\n상품 이름 : ' + name + '\n상품 가격 : ' + price + '\n상품 별점 : ' + score);

1. 현재 페이지에서 prod-image__detail클래스의 src속성을 querySelector을 사용하여 img 변수에 저장

2. 현재 페이지의 url을 window.location.href로 가져오기

3. 현재 페이지에서 prod-buy-header__title클래스의 Text를 name 변수에 저장

4. 현재 페이지에서 total-price클래스의 <strong> 태그 내용을 price 변수에 저장

5. 현재 페이지에서 rating-star-num클래스의 style의 width 퍼센트에 따라 score 변수에 별점 저장

💫 새롭게 알게 된 것들

1. style

style 속성에 접근할수 있음.

2. window.location.href

전체 URL 문자열을 가져옴.
- window.location

window.location.href
전체 URL 문자열을 가져옵니다.
 
window.location.protocol
마지막 ':'를 포함한 프로토콜 정보를 가져옵니다.
 
window.location.host
URL의 호스트 정보를 가져옵니다. 
URL에 포트번호가 있으면 ':'과 포트번호를 포함합니다.
 
window.location.hostname
URL의 호스트명을 가져옵니다.
':'과 포트번호를 포함하지 않습니다.
 
window.location.port
URL의 포트 번호입니다.
 
window.location.pathname
hostname 뒤의 '/'문자 뒤의 경로를 가져옵니다.
 
window.location.search
'?' 뒤의 쿼리스트링을 가져옵니다.