주제 : 구글 크롬의 개발자 도구를 이용해서 크롤링해보자.

재밌는 주제라서 하나씩 찾아볼 계획이다.

■이걸 배우면여러가지를 할 수 있지만, 예를들면..
• 체크박스 전체 체크 버튼을 제공하지 않는 웹페이지에서 아래의 코드로 체크 박스를 모두 체크할 수 있다.
     var list = document.querySelectorAll("input[type=checkbox]");
     for (var item of list) {
       item.checked = true;
     }
• 한페이지에 10개씩만 표시할 수 있는 웹페이지에서 50개씩 표현하도록 드롭박스 값을 수정할 수 있다.    
• 데이터 크롤링이 쉬워진다.
• 웹페이지 개발자라면 오류를 수정하기 쉬워진다.  
• 아래와 같이 검색할 내용을inputbox에 입력하고 검색을 실행하는 코드를 입력할 수 있다.   
     document.getElementById('topLayerQueryInput').value = '후원';
     searchBoard();
     → 네이버에서 검색할 단어를입력하고, 검색 버튼의 클릭 이벤트를 발생시키는 명령어는 아래와 같다.
         document.getElementById('query').value = '아별툴';
         document.querySelector('.btn_search').click();   


■ 아랫것들을 참고했다.
◻ 크롬 공식 개발자 도구사이트 : https://developer.chrome.com/docs/devtools?hl=ko
◻ 노드리스트에 대한 설명 : https://developer.mozilla.org/ko/docs/Web/API/NodeList
◻ DOM(문서 객체 모델) 다루기 문법 총정리 " https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-DOM-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC


시간 남으면,
검색엔진에 "크롬 개발자도구 콘솔 사용 방법"라고 입력하고 검색해보자. 

대충 이런 느낌을 공부해보자.
• 콘솔 창에서 제일 먼저 하는 짓은 console.log('hello');를 쓰는 거다.
• 두번째 하는 짓은 특정 태그의 첫번째 값을 호출하는 아래 명령어를 사용해보자.
     document.querySelector('a');
• a 태그의 href 값을 가져와보자
     document.querySelector('a').href
• 이쯤에서 document.querySelector 대신에 $를 쓸 수 있다고 알려준다.
     document.querySelector('a').href 는 $('a').href와 같다.
• $가 첫번째 것을 찾는거라면, $$는 모든 항목을 찾는다. document.querySelectorAll과 같다.
• 현재 웹페이지에 img 태그의 갯수를 알아보려면 아래와 같이 입력한다.
    $$('img').length
• 좀만 응용해보면.. img태그의 src리스트를 얻을 수 있다.
let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
• 이쯤에서 지저분해진 콘솔 창을 깨끗하게 하는 clear()명령어를 알려준다.
• XPath 표현식과 일치하는 DOM요소를 가져오는 $x(경로,[,startNode]) 함수를 소개해본다.
     아래 명령어는 페이지의 모든 <p>요소를 반환한다.
     $x("//p",document)
     아래 명령어는 <a>요소가 포함된 모든 <p>요소를 반환한다.
     $x("//p[a]")

■ querySelector
document.querySelector() 을 사용하면 CSS 의 Selector 요소를 통해서 가져올 수 있습니다.
element = document.querySelector(selectors);

인수로 들어갈 selectors 값은 어떤 셀렉터인지에 따라 다릅니다. 
class 이면 “.class” 
id 일때 “#id” 입니다. 

아래 코드는 p태그에 id가 myID고 클래스명이 myClass인 개체를 찾으라는 얘깁니다.
element = document.querySelector(p#myID.myClass);


■ DOM 요소 선택
코드 : 설명
document.getElementById("id명")
      → 해당 id명을 가진 요소 하나를 반환
document.querySelector("선택자")
      → 해당 선택자를 만족하는 요소 하나를 반환
document.getElementsByClassName("class명")[순서]
      → 해당 class명을 가진 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환Return: HTMLCollection (live) 배열HTMLCollecion 는 foreach 문을 사용할 수 없다.
document.getElementsByTagName("태그명")[순서]
      → 해당 태그명을 가진 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환Return: HTMLCollection (live) 배열
document.querySelectorAll("선택자명")[순서]
      → 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환Return: NodeListVisit Website (non-live) 배열nodeList 는 foreach 문을 사용할 수 있다.
▶출처: https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-DOM-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC
▶노드리스트에 대한 설명 : https://developer.mozilla.org/ko/docs/Web/API/NodeList


■ 아래 사이트들도 참고해보자.
https://inpa.tistory.com/entry/%F0%9F%92%BB-%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-F12-%F0%9F%94%8D-%ED%99%9C%EC%9A%A9%EB%B2%95-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-Elements%ED%8E%B8

이 게시물을...
profile