JavaScript에서 CSS 선택기를 테스트하려면 어떻게합니까?

Question

CSS1-3 선택기가 올바른 요소를 가져 왔는지 확인하기 위해 어떻게 테스트 할 수 있습니까? 자바 스크립트 (어쩌면 jQuery)?

Answer 1

가장 단순한 전통적인 방법은 JavaScript를 전혀 사용하지 않고 손으로 테스트 페이지를 설정하여 선택기를 마음 속의 콘텐츠로 테스트 할 수 있도록하는 것입니다. 웹에서 볼 수있는 테스트 사례 (잘 알려진 CSS3.info Selectors Test과 같은)는 실제로 온라인에서 호스팅되는 최신 버전입니다.

그러나 자바 스크립트 메소드를 찾고 있다면 Selectors API을 사용해보세요. 최신 DOM 구현 (IE8 이상)에서 사용할 수 있으며 CSS 선택기를 사용하여 요소 노드에 대한 DOM을 쿼리하고 특정 브라우저에서 기본적으로 지원하는 CSS 선택기를 테스트하는 JavaScript 프론트 엔드를 제공합니다.

(Selectors API를 구현하지 않는 브라우저의 경우 jQuery에 의존해야하지만 브라우저가 자체적으로 지원하지 않는 선택기 세트를 지원한다는 점을 기억해야합니다. 선택기를 테스트하는 크롬의 자바 스크립트 콘솔과 jQuery를 사용하는 Selectors spec. 예에없는 표준 확장). 테스트 할 내용에 따라

전화 querySelector() 또는 querySelectorAll()을 here을 발견하고 확인 할 수있다 반환 값 (테스트하기 만하면 브라우저의 개발자 도구에 표시되는 것이 바람직 함) :

• 일치하는 항목이 있으면 앞의 메서드는 첫 번째로 Element을 반환하고 후자는 NodeList과 일치하는 모든 요소를 ​​반환합니다.

• 아무 것도 발견되지 않으면 전자는 null을 반환하고 후자는 빈 NodeList을 반환합니다.

• 선택기가 유효하지 않은 경우 catch 할 수있는 예외가 발생합니다.

  var h1 = document.body.querySelector('h1'); 
  console.log(h1); 
  

  <h1 itemprop="name"> 
  

  : 첫 번째 h1body에서 찾기

  • : 여기

  약간의 파이어 폭스 (10)에 방화범의 콘솔에서 명령 편집기 (다중)와 예, this very question 테스트입니다

• 그 하위 항목에 대한 쿼리 :우리가 발견요소 :

  var subnodes = h1.querySelectorAll('*'); 
  console.log(subnodes[0]); 
  

  <a class="question-hyperlink" href="https://stackoverflow.com/questions/9165859/how-do-i-test-css-selectors-in-javascript"> 
  

• 테스트 (사파리/크롬 :-webkit-any())에 :-moz-any() 파이어 폭스에서 의사 클래스 :

  // This selector works identically to h1 > a, li > a 
  var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a'); 
  console.log(hyperlinks); 
  

  [a#nav-questions /questions, a#nav-tags /tags, a#nav-users /users, a#nav-badges /badges, a#nav-unanswered /unanswered, a#nav-askquestion /questions/ask, a.question-hyperlink /questio...vascript] 
  

• 테스트 존재하지 않는 선택 (즉, perhaps many of us wish did exist) :

  // :first-of-class doesn't exist! 
  var selector = 'div.answer:first-of-class'; 
  
  try { 
      var firstAnswer = document.querySelector(selector); 
      console.log(firstAnswer); 
  } catch (e) { 
      console.log('Invalid selector: ' + selector); 
  } 
  

  Invalid selector: div.answer:first-of-class 
  

Answer 2

http://selectorgadget.com 테스트 및 CSS 선택기를 구축하는 것은 매우 좋은 것입니다. 그들이 제공하는 자바 스크립트를 북마크 바에 드래그 앤 드롭하고 필요할 때마다 클릭하면됩니다.