Chrome의 개발자 도구 콘솔에 있는 $ 변수의 목적은 무엇인가요?

Chrome의 $ 변수

질문:

Chrome의 개발자 도구를 탐색하는 동안 jQuery가 없는 페이지에서는 특이한 동작이 관찰되었습니다. 콘솔에 "$"를 입력하면 네이티브 코드가 포함된 함수가 반환되었습니다. 이 기능은 window['$'], document['$'] 또는 this['$']를 통해 액세스할 수 없으며 그 목적은 여전히 ​​수수께끼입니다.

답변:

Chrome devtools 콘솔의 $ 변수가 몇 가지 변경되었습니다. 현재 document.querySelector의 별칭 역할을 하며 추가 기능을 제공합니다.

• $(selector): 다음과 유사하게 CSS 선택기와 일치하는 첫 번째 DOM 요소에 대한 참조를 반환합니다. document.querySelector().
• $$(selector): CSS 선택기와 일치하는 요소의 배열을 반환하여 document.querySelectorAll()을 효과적으로 대체합니다.
• $_: 가장 최근에 평가된 표현식의 값을 저장합니다.
• $0, $1, $2, $3 및 $4: 마지막으로 검사한 5개의 DOM 요소에 대한 기록 참조를 제공합니다. 요소 패널 또는 프로필 패널의 JavaScript 힙 개체에 있습니다.

특히 $$는 NodeList 대신 배열을 반환하므로 문자 그대로 document.querySelectorAll()을 호출하지 않습니다.

Chrome은 DOM 요소와 상호작용하고 개발자 도구 콘솔 내의 다양한 표현식과 개체에 액세스하기 위한 편리한 바로가기 역할을 하는 이 $ 변수를 노출하는 유일한 브라우저입니다.

위 내용은 Chrome의 개발자 도구 콘솔에 있는 $ 변수의 목적은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!