← Back to rules

unicorn/prefer-query-selector 세심한

🛠️ An auto-fix is available for this rule for some violations.

수행하는 작업

.getElementById() 대신 .querySelector()를, .getElementsByClassName() 및 .getElementsByTagName() 대신 .querySelectorAll()을 사용하도록 권장합니다.

왜 문제가 되는가?

• .querySelector()와 .querySelectorAll()을 사용하면 더 유연하며, 더 구체적인 선택자 사용이 가능합니다.
• 같은 메서드로 DOM 요소를 쿼리하는 것이 좋습니다. 이는 일관성을 유지하고, 미래의 개선(예: 더 구체적인 선택자)에 유리합니다.

예시

이 규칙에 잘못된 코드 예시:

document.getElementById("foo");
document.getElementsByClassName("foo bar");
document.getElementsByTagName("main");
document.getElementsByClassName(fn());

이 규칙에 올바른 코드 예시:

document.querySelector("#foo");
document.querySelector(".bar");
document.querySelector("main #foo .bar");
document.querySelectorAll(".foo .bar");
document.querySelectorAll("li a");
document.querySelector("li").querySelectorAll("a");

사용 방법

구성 파일 또는 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-query-selector": "error"
  }
}

CLI

oxlint --deny unicorn/prefer-query-selector

참고 자료

• 규칙 소스