728x90
안녕하세요! 오늘은 크롬 브라우저의 개발자 도구를 활용해 특정 HTML 태그를 선택한 후, 그 태그를 자식으로 포함하고 있는 부모 태그들의 단계적 리스트를 알아내는 방법을 소개하겠습니다. 추가로, 각 부모 태그의 열린 태그 내용(속성 포함)까지 확인할 수 있는 방법을 단계별로 설명하겠습니다. 이 과정은 자바스크립트 콘솔을 활용하며, 블로그 글 형식으로 쉽게 풀어보겠습니다.
목표
-
크롬 개발자 도구에서 특정 태그를 선택
-
선택된 태그의 부모 태그를 단계적으로 추적
-
각 부모 태그의 열린 태그 내용(태그 이름과 속성 포함)을 출력
728x90
1. 크롬 개발자 도구 열기
먼저 크롬 브라우저에서 확인하고 싶은 웹페이지를 엽니다.
-
F12 키를 누르거나,
-
우클릭 후 "검사"를 선택해 개발자 도구를 엽니다.
-
Elements 탭에서 원하는 태그를 선택합니다. 예를 들어, <div>, <span>, <p> 같은 태그를 클릭해 하이라이트하세요.
2. 선택한 요소를 변수에 저장
개발자 도구에서 요소를 선택하면 자동으로 $0 변수에 해당 요소가 저장됩니다. 이를 활용해 콘솔에서 작업을 시작할 수 있습니다.
-
개발자 도구 하단의 Console 탭으로 이동합니다.
-
$0를 입력해 선택된 요소가 제대로 잡혔는지 확인합니다.
예: <span class="highlight">텍스트</span>가 선택되었다면 콘솔에 해당 요소가 출력됩니다.
3. 부모 태그 추적 스크립트 작성
이제 자바스크립트를 사용해 선택한 태그의 부모 태그를 단계적으로 추적하고, 각 태그의 열린 태그 내용을 출력해보겠습니다. 아래 코드를 콘솔에 붙여넣고 실행하세요.
function getParentHierarchy(element) {
let currentElement = element;
const hierarchy = [];
while (currentElement && currentElement.nodeType === 1) {
// 태그 이름과 속성 가져오기
const tagName = currentElement.tagName.toLowerCase();
const attributes = Array.from(currentElement.attributes)
.map(attr => `${attr.name}="${attr.value}"`)
.join(" ");
const openTag = `<${tagName}${attributes ? " " + attributes : ""}>`;
hierarchy.push(openTag);
currentElement = currentElement.parentElement; // 부모로 이동
}
// 결과를 역순으로 출력 (최상위 부모부터)
console.log("부모 태그 계층 구조:");
hierarchy.reverse().forEach((tag, index) => {
console.log(`${" ".repeat(index)}${tag}`);
});
}
// $0로 선택된 요소에 대해 실행
getParentHierarchy($0);728x90
4. 코드 설명
-
getParentHierarchy 함수
-
element: 콘솔에서 $0로 전달된 선택 요소입니다.
-
currentElement: 현재 탐색 중인 요소로, 반복문을 통해 부모로 이동합니다.
-
hierarchy: 부모 태그의 열린 태그 내용을 저장하는 배열입니다.
-
-
태그와 속성 추출
-
tagName: 요소의 태그 이름을 소문자로 가져옵니다 (예: div, span).
-
attributes: 요소의 모든 속성을 배열로 변환해 name="value" 형식으로 결합합니다.
-
openTag: <태그 속성> 형식으로 열린 태그를 생성합니다.
-
-
부모 탐색
-
parentElement로 부모 태그를 계속 추적하며, <html>이나 null(문서 끝)에 도달할 때까지 반복합니다.
-
-
출력
-
reverse()로 배열을 뒤집어 최상위 부모부터 출력합니다.
-
" ".repeat(index)로 들여쓰기를 추가해 계층 구조를 시각적으로 표현합니다.
-
5. 예제 결과
예를 들어, 페이지에서 <span class="highlight">텍스트</span>를 선택했다고 가정하면, HTML 구조가 다음과 같을 때:
<html lang="ko">
<body>
<div id="container" class="main">
<p class="content">
<span class="highlight">텍스트</span>
</p>
</div>
</body>
</html>위 스크립트를 실행하면 콘솔에 다음과 같이 출력됩니다:
부모 태그 계층 구조:
<html lang="ko">
<body>
<div id="container" class="main">
<p class="content">
<span class="highlight">6. 추가 팁
-
특정 조건 추가: 특정 태그(예: <div>만)만 보고 싶다면 if (tagName === 'div') 같은 조건을 추가하세요.
-
복잡한 구조: 속성이 많거나 중첩이 깊은 경우, 출력 형식을 커스터마이징해 가독성을 높일 수 있습니다.
-
재사용: 이 코드를 크롬 북마크렛으로 저장하면 언제든 클릭 한 번으로 실행할 수 있습니다.
마무리
크롬 개발자 도구와 간단한 자바스크립트를 활용하면 특정 태그의 부모 계층을 쉽게 파악할 수 있습니다. 이 방법은 디버깅이나 DOM 구조 분석에 유용하니, 웹 개발자라면 꼭 익혀두세요! 궁금한 점이 있다면 언제든 질문해주세요.
728x90