순수 자바 스크립트에서 요소의 가상 클래스 쿼리하기

Question

JQuery (isHovered와 같은)를 사용하여 의사 클래스의 상태를 확인할 수 있으며 해당 요소를 검사 할 수있는 요소는 querySelector (/ querySelectorAll)를 실행하여 특정 의사 클래스를 가졌음을 알 수 있습니다. 부모 노드.

처음에는 JQuery를 사용하지 않을 것이므로 JQuery에는 쿼리 할 의사 클래스에 대한 is 메서드가 없습니다.

두 번째 해결 방법이 더러운 것처럼 보입니다. 개체의 속성 (개체가 Dom 요소 임)이라면 부모 노드에서 q 기능을 실행하지 않고 직선적 인 방식으로이를 가져올 수 있어야합니다. 내 요소에 부모 노드가없는 경우 (가상 노드가있는 부모 노드가없는 요소의 가능성에 대해 질문 할 수 있습니다. 브라우저에서 현재 가능하거나 불가능할 수도 있지만 이론적으로 가상 일 수도 있습니다. Dom, 또는 브라우저의 향후 구현, idk.).

내가 원하는 것은 element.hasPseudoClass("<the class>") 또는 element.getPseudoClasses() 또는 기타 요소의 의사 클래스를 쿼리하는 편리한 방법입니다. 나는 곧장 뭔가를 찾지 못했습니다.

Answer 1

당신은

element.matches(':hover') 

var box = document.getElementById("box"); 
 
var msg = document.getElementById("msg"); 
 

 
setInterval(() => msg.textContent = box.matches(':hover') ? "in" : "out", 1000);

<div id="box" style="width: 100px; height: 100px; background-color: red; "></div> 
 
<div id="msg"></div>

가 MDN documentation를 참조 할 수 있습니다.