최근에 업무하면서 자바스크립트 htmlElement 오브젝트를 css selector 형식으로 변환해야 할 일이 생겼다.
HTML 객체는 자바스크립트 작성할 때 매~~우 많이 쓰는
getElementById / getElementsByClassName 등 메서드에서 리턴된다.
예시로 <Test> 문서를 만들어보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div class="button_all">
<div class="button1">
<input type="button" id="button_1" value="button1" />
</div>
<div class="button2"></div>
<input type="button" id="button_2" value="button2" />
</div>
<div class="button3"></div>
<input type="button" id="button_3" value="button3" />
</div>
</div>
</body>
</html>
button1 에 대한 요소 객체 정의 후, 타입을 찍어보면 'object' 로 반환되고
button1.constructor.name으로 객체의 생성자함수 이름을 찍어 보면 'HTMLInputElement'가 반환된다.
요소가 li 태그면 'HTMLLIElement', title이면 'HTMLTitleElement'가 나오는데,,
요소의 종류에 따라서 리턴되는 객체가 달라서이다.
하지만 얘네는 모두 'HTMLElement' 객체를 상속하는 자식 객체이다.
아래 DOM의 객체 구성 트리를 보면 이해가 쉽다!
나는 document에서 클릭 된 요소의 부모 요소를 재귀적으로 거슬러 올라가면서 css selector를 생성한 후
selector의 경로와 조건 경로가 일치하는지 필터링하는 로직을 짜야 했다.
아래는 노드를 거슬러 올라가며 수집한 요소의 id, class 값을 결과 값에 선택자 문법대로 조합해서 넣는 코드다.
var el = document.getElementById("button_1");
var ad = el.nodeName.toLowerCase();
// 자식 노드 탐색
if(el.id !== ''){ // (1)
ad = ad + '#' + el.id;
}
else if(el.className !== ''){ // (2)
ad = ad + '.' + el.className.replace(/\s/g, '.');
}
// 부모 노드 탐색
var i = 0
while(el.parentElement.nodeName.toLowerCase() != 'body' && i < 50){ // (3)
el = el.parentElement;
var st = el.nodeName.toLowerCase();
if(el.id !== ''){
st = st+'#'+el.id;
}
else if(el.className !== ''){
st = st + '.' + el.className.replace(/\s/g, '.');
}
ad = st + ' > ' + ad;
i++;
}
ID가 'button_1'인 자식 노드의 css selector 경로를 생성한다.
(1) : 조건문에서 노드의 ID가 있는지 확인하고, ID가 있으면 선택자 변수에 해당 요소의 ID 추가
- ID는 앞에 #을 붙임
(2) : 조건문에서 노드의 class가 있는지 확인하고, class가 있으면 선택자 변수에 해당 요소의 ID 추가
- class는 앞에 .을 붙임
- class에 공백이 있으면 . 로 대체 (선택자 문법이 그렇습니다... ID는 공백을 사용하지 않는 게 표준이므로 설정 안 했습니다.)
(3) : el 요소의 부모 요소를 계속해서 찾아 올라가며 그 부모 요소의 css 선택자도 선택자 변수에 추가.
문서의 <body> 태그에 도달할 때까지 반복
이렇게 돌리면 ad의 결과 값으로 'div#button_all > div.button1 > input#button_1' 가 완성된다.
여러 페이지를 보다보면 간혹가다 새로고침할 때마다 특정 id나 class 값이 랜덤값으로 변경될 때가 있다.
그런 요소들을 프론트에서 잡아야 할 때나,, 아니면 내 업무 같이 css selector 경로로 필터링해야 될 때 유용할 것 같다.
그럼 이만 -!
'WEB > javascript' 카테고리의 다른 글
| javascript로 자판기 프로그램 만들기 (0) | 2023.03.14 |
|---|
