Chrome 개발자 도구에서 == $ 0 (이중 값은 0)은 무엇을 의미하나요?

Chrome 개발자 도구에서 요소를 선택 ==$0하면 선택한 요소 옆에 표시됩니다. 그게 무슨 뜻이야?

마지막으로 선택된 DOM 노드 인덱스입니다. Chrome은 선택한 각 DOM 노드에 색인을 할당합니다. 따라서 $0항상 마지막으로 선택한 노드를 $1가리키고 그 전에 선택한 노드를 가리 킵니다. 가장 최근에 선택한 노드의 스택으로 생각하십시오.

예를 들어, 다음을 고려하십시오

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

이제 DevTools로 콘솔 및 선택 열 #sunday, #monday그리고 #tuesday언급 된 순서대로, 당신이 ID를 같이 얻을 것이다 :

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

참고 : 스크립트 (또는 콘솔)에서 노드를 선택할 수 있다는 것을 알고 있으면 유용 할 수 있습니다. 예를 들어 일반적으로 각도 요소 선택기가 사용되므로 간단히 노드를 선택하여 다음을 실행할 수 있습니다.

angular.element($0).scope()

Voila는 콘솔을 통해 노드 범위에 액세스 할 수 있습니다.

$ 0은 가장 최근에 선택한 요소 또는 JavaScript 객체를 반환하고 $ 1은 가장 최근에 선택된 두 번째 요소 등을 반환합니다.

참조 : 명령 행 API 참조

여기에있는 다른 답변은 그 의미가 무엇인지 명확하게 설명했으며 그 사용법을 설명하고 싶습니다.

elements탭 에서 요소를 선택하고 console크롬 에서 탭으로 전환 할 수 있습니다 . 그냥 입력 $0 or $1또는 숫자 입력하고 Enter 키를 누릅니다 무엇이든하고 요소는 사용하기 위해 콘솔에 표시됩니다.

이것은 콘솔에서 $ 0를 입력하면 특정 요소와 동일하다는 것을 알려주는 Chrome의 힌트입니다.

내부적으로 Chrome은 스택을 유지합니다. 여기서 $ 0은 선택된 요소, $ 1은 마지막으로 선택된 요소, $ 2는 $ 1 이전에 선택된 요소입니다.

다음은 일부 응용 프로그램입니다.

• 콘솔에서 DOM 요소에 액세스 : $ 0
• 콘솔에서 해당 속성에 액세스 : $ 0.parentElement
• 콘솔에서 속성 업데이트 : $ 1.classList.add (...)
• 콘솔에서 CSS 요소 업데이트 : $ 0.styles.backgroundColor = "aqua"
• 콘솔에서 CSS 이벤트 트리거 : $ 0.click ()
• 그리고 $ 0.appendChild (document.createElement ( "div")) 와 같이 훨씬 더 복잡한 작업을 수행합니다.

이 모든 작업을 지켜보십시오.

백업 진술 :

디버깅 시간 동안 html 요소를 참조하기위한 간단한 구문입니다. 일반적으로 이러한 종류의 작업은 이러한 방법으로 수행됩니다.

document.getElementById , document.getElementsByClassName , document.querySelector

따라서 html 요소를 클릭하고 콘솔에서 참조 변수 ($ 0)를 얻는 것은 하루 동안 시간을 ​​크게 절약합니다.