[JavaScript] DOM 조작 연습 2

💫 상품 정보 출력하기

무신사에 아우터을 검색했을 때 나오는 검색했을 때 나오는 상품들의 브랜드명, 제품명, 가격, 대표이미지, 상품페이지 출력하기

💫 출력결과

브랜드명 : 예일
제품명 : [3,000원 결제혜택] (24SS) WARM+ UP QUILTING JACKET BLACK
가격 : 29,900원
대표이미지 : //image.msscdn.net/images/goods_img/20220808/2704962/2704962_17046984760055_220.jpg
상품페이지 : https://www.musinsa.com/app/goods/2704962
브랜드명 : 예일
제품명 : REVERSIBLE WARM UP QUILTING JACKET BLACK / IVORY
가격 : 51,000원
대표이미지 : //image.msscdn.net/images/goods_img/20221004/2835510/2835510_11_220.jpg
상품페이지 : https://www.musinsa.com/app/goods/2835510
브랜드명 : 예일
제품명 : [3,000원 결제혜택] (24SS) WARM+ UP QUILTING JACKET IVORY
가격 : 29,900원
대표이미지 : //image.msscdn.net/images/goods_img/20220726/2683529/2683529_17012378413604_220.jpg
상품페이지 : https://www.musinsa.com/app/goods/2683529
브랜드명 : 내셔널지오그래픽
제품명 : [무료반품] N234UDW920 헤론 U넥 경량 다운 점퍼 CARBON BLACK
가격 : 159,000원
대표이미지 : //image.msscdn.net/images/goods_img/20220729/2689357/2689357_16889809897979_220.jpg
상품페이지 : https://www.musinsa.com/app/goods/2689357
브랜드명 : 예일
제품명 : EMBROIDERY DAN COLLARLESS QUILTING JACKET BLACK
가격 : 49,000원
대표이미지 : //image.msscdn.net/images/goods_img/20230818/3474192/3474192_17001130640911_220.jpg
상품페이지 : https://www.musinsa.com/app/goods/3474192
브랜드명 : 플루크
제품명 : 3M 신슐레이트 퀼팅자켓 블랙 FPJ201
가격 : 59,800원
대표이미지 : //image.msscdn.net/images/goods_img/20210924/2145689/2145689_8_220.jpg
상품페이지 : https://www.musinsa.com/app/goods/2145689

💫 CODE

var items = document.querySelectorAll('.li_inner');

items.forEach(function(item) {
    //브랜드명
    var title = item.querySelector('.item_title > a');

    //제품명
    var goods = item.querySelector('.list_info > a').getAttribute('title');

    //가격
    var price = item.querySelector('.price');
    var remove_price = price.querySelector('del');
    if(remove_price) remove_price.remove();

    //대표이미지
    var img = item.querySelector('.lazyload.lazy').getAttribute('src');

    //상품페이지
    var link = item.querySelector('.list_img > a').getAttribute('href');

    console.log('브랜드명 : ' + title.innerText + '\n제품명 : ' + goods + '\n가격 : ' + price.innerText + '\n대표이미지 : ' + img + '\n상품페이지 : ' + link);
});

1. 해당 페이지에서 .li_inner부분을 querySelectorAll을 사용하여 items에 저장

2. items를 forEach로 돌면서 해당 div의 item_title클래스의 <a>태그를 title 변수에 저장

3. 해당 div의 list_info클래스의 <a>태그의 title 속성을 goods 변수에 저장

4. 해당 div의 list_info클래스를 price 변수에 저장

5. 해당 클래스의 <del> 태그 내용을 저장 후, 삭제

6. 해당 div의 lazyload.lazy클래스의 src 속성을 img 변수에 저장

7. 해당 div의 list_img클래스의 <a>태그의 href 속성을 link 변수에 저장

💫 새롭게 알게 된 것들

1. querySelector(클래스/태그 > 클래스/태그)

클래스/태그 내의 클래스/태그 접근할때 > 를 사용한다.

2. remove()

요소를 삭제