document.querySelector 의 상수화

예전까지만 해도 우리는 아래처럼 요소에 접근을 했습니다.

document.getElementsByTagName("div") : 엘리먼트로 접근
document.getElementById("myId") : 아이디로 접근
document.getElementsByClassName("my-class") : 클래스로 접근
document.getElementsByName("myName") : 네임으로 접근

그러나 요즘은 이렇게 사용하지를 않습니다. 왜냐하면 document.querySelector 라는 강력한 도구가 있기 때문이죠.

아래처럼 접근합니다. 우리가 css 를 쓰는 것과 동일하니까 가독성도 높습니다.

document.querySelector("div") : 엘리먼트로 접근
document.querySelector("#myId")  : 아이디로 접근
document.querySelector(".my-class") : 클래스로 접근
document.querySelector("input[name='myName']") : 네임으로 접근

위에서 "input[name='myName']" 으로 접근하는 방식은 아주 효과적인 것인데요. 예를 들어서

<a href="...sir.kr/...">클릭</a>

위의 링크태그에 접근하려면 href 에 sir.kr/ 이라는 문자열을 포함하고 있는 <a> 태그라고 하면 되니까요.

document.querySelector("a[href*='sir.kr/']")

이런 식의 응용사례는 본인들이 직접 구글링을 해 보세요.

그리고 클래스는 여러개를 쓸 수 있으므로 document.querySelectorAll 을 써 배열처럼 사용할 수 있습니다.

document.querySelectorAll(".my-class")[0]
document.querySelectorAll(".my-class")[1]
document.querySelectorAll(".my-class")[2]
document.querySelectorAll(".my-class")[3]

즉 document.querySelector(".my-class") 과 document.querySelectorAll(".my-class")[0] 는 동일한 대상이죠.

배열처럼 기능하므로 for in, for of, forEach 를 쓸 수 있습니다. 저는 보통 for of 를 사용합니다.

여튼 루트을 돌려 저것들에게 글자색상을 red 로 주고 width 를 100px 로 한꺼번에 주려면...

for (i of document.querySelectorAll(".my-class")) {
    i.style.color = "red";
    i.style.width = "100px";
}

만일 [1] 에만 red 를 주고 나머지는 blue 를 주려면 카운터변수를 하나 생성해서 아래처럼요.

count = 0;
for (i of document.querySelectorAll(".my-class")) {
    i.style.color = count == 1 ? "red" : "blue";
    count++;
}

이제 종착역이 다가왔네요. 문제는...

document.querySelector 나 document.querySelectorAll 은 글자길이가 너무 깁니다.

물론 짧은 글자의 변수를 하나 연결해도 되겠지만 연결해야 할 대상이 많으면 영 그렇죠.

그래서 요즘 제가 착안한 방식입니다. 화살표 함수를 두개 만들고 이걸 상수화 시켰습니다.

const $_ONE = (one) => document.querySelector(one);
const $_ALL = (all) => document.querySelectorAll(all);

이렇게 해 놀으면

document.querySelector("#myId") 은 $_ONE("#myId") 로 간결화 됩니다.

document.querySelectorAll(".my-class")[1] 은 $_ALL(".my-class")[1] 로 간결화 됩니다.

관례적으로 상수의 네이밍은 모든 글자를 "대문자"와 "언더바"로 사용하기 때문에 달러 하나 주고 저리 이름을 주었는데 본인들이 다른 형태의 네이밍을 해도 상관은 없습니다.