크롬의 개발자 도구는 사이트 개발하고 테스트할 때 아주 유용합니다. 직접 원본 소스를 변경하지 않아도 개발자 도구 콘솔창에서 소스를 삽입한 후 실행이 가능합니다. 또한 기존에 만들어진 사이트를 분석할 때도 많이 이용합니다. 오늘은 개발자 도구 콘솔을 이용해서 자바스크립트의 특정 요소에 접근한 후 내부에 html 소스를 콘솔로 출력해 보도록 하겠습니다.
▼ 먼저 콘솔창에 소스를 입력하기 전에 html 요소에 접근하는 함수에 대해서 알아 보겠습니다. 자바스크립트 내에서 요소(Element) 에 접근하고 싶을 때 getElementsById() 나 getElementsByTagName() 을 사용하게 되는데 id 혹은 name 이에 따라 달리 사용해야 합니다. 그런데 document.querySelector() 을 사용하면 CSS 의 Selector 요소를 통해서 가져올 수 있습니다.
| element = document.querySelector(selectors); |
▼ 인수로 들어갈 selectors 값은 어떤 셀렉터인지에 따라 다릅니다. class 이면 “.class” id 일때 “#id” 입니다. 그럼 아래 샘플 소스에서 class="carrot" 인 요소에 querySelector 함수를 사용해서 어떻게 접근할 수 있을 까요?
| element = document.querySelector(p#first.carrot); |
▼ selectors 의 인수 값은 “p#first.carrot” 가 됩니다. 먼저 p 태그에 first 아이디를 가진 요소를 찾습니다. 그리고 내부에 있는 3개의 클래스 중 carrot 로 접근해서 개체를 반환하는 것입니다
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p id="first"> <strong class="carrot">C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p id="second"> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> ▼ 위에서 간단한 소스로 querySelector() 함수 사용법에 대해 알아 보았습니다. 그럼 크롬의 개발자 도구에서 querySelector() 함수로 특정 요소값을 찾아 보도록 하겠습니다. 찾을 정보는 검색 입력창인 id=”searchBox” 입니다. 주로 블로그 내에 정보를 찾을 때 많이 이용하는 입력 박스입니다.
개발자 도구를 열기 위해 크롬 오른쪽 상단에 있는 목록 아이콘을 클릭합니다. 그리고 [도구 더보기] > [개발자 도구] 메뉴를 선택합니다.
▼ 그럼 크롬 하단에 개발자 도구 화면이 나타납니다. 화면에서 querySelector() 함수로 찾을 요소는 사이트를 검색하는 입력창입니다.
▼ 개발자 도구의 Elements 창에서 마우스를 소스 위에 올려 화면의 검색창을 찾으시면 됩니다. 아래 그림과 같이 검색창은 <div id=”searchBox”> 가 감싸고 있습니다. 이것을 querySelector() 로 찾아서 내부에 소스를 출력할 것입니다.
▼ id 가 searchBox 이므로 넘겨야할 인수는 “#searchBox” 가 됩니다. 그리고 txt 라는 변수에 조회한 값을 저장합니다. 이 한줄의 소스를 콘솔창에 입력하고 Enter 를 눌러 줍니다.
| var txt = document.querySelector('#searchBox') |
▼ 한줄 소스를 실행하셨다면 콘솔창에 로그를 찍어서 결과값을 봐야겠죠. console.log() 함수를 이용하시면 변수에 있는 내용을 개발자 도구 콘솔에 찍어 볼 수 있습니다. 리턴 받은 값을 저장한 txt 변수를 넘겨서 콘솔에 찍어 보시면 검색창의 요소값을 확인할 수 있습니다.
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) Date() 함수 (0) | 2024.08.08 |
|---|---|
| 자바스크립트(Javascript) 웹 페이지 자동 새로 고침 적용하기 (3) | 2024.04.17 |
| 자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 (0) | 2024.04.05 |
| 자바스크립트 DOM document.write() 함수로 화면에 텍스트를 출력하기 (3) | 2024.02.06 |
| 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 (1) | 2024.01.15 |
| 자바스크립트(Javascript) 글자수 체크하는 방법 (5) | 2024.01.12 |
| 자바스크립트(Javascript) 문자열에 쓰이는 특수 문자를 기호로 넣는 방법 (1) | 2024.01.06 |
| 자바스크립트 match() 일치하는 문자열 검색 (1) | 2024.01.01 |
