크롬 개발자 도구 (F12) 를 바탕으로 원하는 attributes 값 받아오기

- 크롬 개발자 도구로 속성 값들에 접근하기 -     

    크롬 개발자 도구를 활용하면
    HTMl 요소가 가지고 있는 어떤 값에
    손쉽게 접근할 수 있다.
    
    크롬으로 웹 페이지를 연 뒤에 
    개발자 도구(F12)를 활성화한다.
    
    열려 있는 개발자 도구 창에서
    가장 왼쪽 상단에 보면 
    사각형 위에 마우스 커서 모양이 있는 아이콘이 있다.

    
    이 요소 선택 도구(ctrl + shift + c)를 클릭한 뒤에
    웹 페이지 안에서 조사하고 싶은 요소를 클릭한다.

    
    개발자 도구 창에서 Elements 탭을 클릭하고,
    그 안에서 다시 properties 탭을 클릭한다.
    
    그러면 선택한 요소가 가지고 있는
    여러 가지 속성들이 출력된다.

여기서 태그의 속성 값들을 바탕으로

원하는 요소에 접근할 수 있다.

아래 코드를 console 창에 입력해 보자.

    document.querySelector('li.category_item a[data-clk="tct.web"]');

    속성 옆에 더보기 화살표를 클릭하면
    다시 그 안에서 하위 속성들을 볼 수 있다.
    그중에서 attributes 속성을 클릭하여 그 안을 살펴보자.

 

 

위에서는 원하는 요소에 접근했다.

아래와 같이 출력해 보면

그 요소의 attributes 속성값들을 불러올 수 있다.

개발자 도구 창의 properties 탭에서 보이는 정보들과 

똑같은 데이터가 콘솔 창에도 그대로 출력된다

    document.querySelector('li.category_item a[data-clk="tct.web"]').attributes;

 

    
    선택된 요소가 어떤 속성들을 가지고 있는지
    그 정보들을 담고 있는 객체가 보인다.
    왼쪽창(Elements)에서 태그 내부에 있는 속성값들이
    오른쪽창(properties)에서 객체 형태로 그대로 저장돼 있다.
    선택된 a 태그의 'data-panel-code' 속성에 접근해 보자.

마찬가지로 properties 창의 정보를 바탕으로

요소의 속성값에 접근할 수 있는데,

방법은 아래와 같다.

   document.querySelector('li.category_item a[data-clk="tct.web"]').attributes['data-panel-code'];

   
    
    
    이제 우리가 원하는 속성의 값에 어떻게 접근하는지 알았다.
    properties 창에서 하위 항목들을 탐색하며
    내가 원하는 속성 값에 접근하면 된다.
    선택된 a 태그의 'data-panel-code' 속성의 'value'에 접근해 보자.

창에서 보는 정보를 바탕으로 어떻게 접근해야 하는지 알 수 있다.

    document.querySelector('li.category_item a[data-clk="tct.web"]').attributes['data-panel-code'].value;

    
- 220412