DOM 트리

현재 페이지의 DOM 트리(Node들의 트리 구조)를 볼 수 있습니다.

DOM 트리를 탐색하고 노드를 선택하기

다음 방법으로 DOM 트리를 탐색하며 특정 노드를 선택 할 수 있습니다.

선택된 노드는 DOM 트리에서 하이라이트 표시가 됩니다.

DOM 트리 화면에서 마우스와 키보드 방향키를 사용

Elements 패널을 열고 마우스와 키보드 방향키를 이용해 DOM 트리를 탐색해보세요.

DOM 트리에서 마우스나 키보드 방향키로 탐색 시, 페이지 내 해당 요소가 하이라이트 표시됩니다.

페이지 내 요소에 마우스 우클릭 후 검사 클릭

이 문단에 마우스 우클릭 > 검사를 눌러 DOM 트리에 이 문단 요소가 선택되는지 확인해보세요.

개발자도구 내 요소선택 기능 사용

개발자 도구의 최상단 최좌측에 있는 아이콘을 클릭하면 요소선택 기능이 활성화되어 페이지에서 특정 요소를 선택할 수 있습니다.

또는 단축키 cmd + shift + c를 눌러 요소 선택 기능을 활성화할 수 있습니다.

요소선택 기능으로 이 문단을 선택해 DOM 트리에 이 문단 요소가 선택되는지 확인해보세요.

검색

DOM 트리에서 cmd + f를 눌러 특정 노드를 검색할 수 있습니다. 검색어는 단순 문자열 뿐만 아니라 CSS Selector, XPath도 사용할 수 있습니다.

검색 기능을 통해 id가 find-me인 요소를 찾아보세요.

요소 수정 및 조작하기

DOM 트리 내 요소를 수정하거나 조작할 수 있습니다.

태그 자체를 변경

트리 내 요소의 태그명을 더블 클릭하면 태그를 변경할 수 있습니다.

DOM 트리에서 이 h1태그의 이름을 더블 클릭해 p로 바꿔보세요.

요소의 속성과 텍스트 컨텐츠 수정

트리 내 요소의 속성을 조작하거나 텍스트 컨텐츠를 수정할 수 있습니다.

속성 이름 변경

DOM 트리에서 이 div의 인라인 스타일 이름을 더블 클릭해 알맞게 변경해보세요.

속성 값 변경

DOM 트리에서 이 div의 인라인 스타일 값을 더블 클릭해 border: 1px dashed red; padding: 1rem;로 변경해보세요.

속성 추가

DOM 트리에서 이 div 요소에 마우스 우클릭 > Add attribute를 클릭 해 style="border: 1px solid red; padding: 1rem;" 속성을 추가해보세요.

요소 내 텍스트 컨텐츠 변경

DOM 트리에서 이 div요소 내 텍스트 노드를 더블 클릭해 ‘안녕하세요!’로 변경해보세요.

요소를 HTML 전체로 변경

일부 내용만 바꾸는 것이 아닌, 요소를 표현하는 HTML 전체를 변경할 수 있습니다.

DOM 트리에서 이 div요소에 마우스 우클릭 후 ‘Edit as HTML’을 눌러 원하는대로 변경해보세요.

DOM 트리 내 요소의 위치 변경

선택한 요소를 드래그 해 DOM 트리에서의 위치를 변경할 수 있습니다.

이 첫번째 요소를 DOM 트리에서 드래그해 리스트의 맨 마지막에 위치시켜보세요.

두번째 요소입니다.

세번째 요소입니다.

요소 숨기기

요소를 숨기거나(visibility: hidden) 다시 표시할 수 있습니다.

DOM 트리 내에서 선택된 요소가 있을 때 h 키를 눌러 숨김 여부를 조절하거나 요소에 마우수 우클릭 후 Hide element로 숨김 여부를 조절할 수 있습니다.

DOM 트리에서 이 div요소를 선택한 후, 키보드 h키를 눌러 숨김 처리를 했다가 해제해보세요.

요소의 상태 강제화

요소의 상태(hover, focus 등)를 강제로 지정해 의사클래스에 지정된 스타일을 확인할 수 있습니다.

이 div 요소에는 hover시 배경색이 바뀌도록 되어있습니다. DOM 트리에서 이 요소를 선택한 후, 마우스 우클릭 > Force state > :hover 를 선택해보세요.

복사, 붙여넣기, 삭제

요소 자체 또는 내용에 대해 복사, 붙여넣기, 삭제할 수 있습니다.

복사의 경우, 요소 자체를 복사할 뿐만 아니라 outerHTML, innerHTML 등을 복사할 수 있습니다.