ChromeDev 도구로 JSPath를 복사하는 기능을 알리고 싶습니다.

소개

"특정 페이지의 이 부분을, js로 조작할 수 있는 형태로 갖고 싶다..."같은 경우가 때때로 있습니다.
그럴 때는 ChromeDev 도구로 JSPath를 복사해 봅시다!

기능과 사용법

이런 기능

화면내의 좋아하는 요소를 js로 취급하기 쉬운 형태로 가져오는 기능입니다.

document.querySelector("取得したい要素のXPath") 로 검색됩니다.

사용법

ChromeDev 도구를 열고 Elements에서 가져올 요소를 선택합니다.

오른쪽 클릭 > Copy > Copy JS path

완료!

<참고자료> Copy 화면 캡처

실제로 해보자

IBJ.Inc의 어드벤트 캘린더 의 제목으로 시도합니다.

복사된 JSpath

copied_JSpath.js

document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1")

console에 흘려보기

복사 할 수 있습니다.

가공해 보자

querySelector로 취득하고 있으므로, 간단하게 가공할 수 있습니다.

텍스트 부분만 가져오기

복사 한 JSPath의 innerText를 가져 오면 OK입니다.

innerText.js

document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").innerText

//console出力
//"IBJ.Inc Advent Calendar 2020"

선택 장소의 색을 바꾸어 본다

복사 한 JSPath에 Background-color를 설정해보십시오.

Background-color.js

document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").style.backgroundColor = 'yellow'

이것이 기쁘다.

찾기가 귀찮은 「화면의 특정 장소의 패스」를 자유롭게 데려올 수 있습니다

패스를 알면, 나머지는 목적에 맞추어 자유롭게 가공할 뿐이지요.

응용 프로그램을 사용하면 콘솔에서 작동하는 간단한 필터 및 집계 도구를 만들 수 있습니다.

사이트 화면상에서 밖에 취할 수 없는 집계 데이터 따위가 사용소입니다.

끝에

끝까지 읽어 주셔서 감사합니다.
복사한 JSPath를 활용하여 할 수 있는 즐거운 작업의 구체적인 예는 기회가 있으면 소개합니다.