| document.querySelector("main") |
document 가 뭘까요?
햇갈린다 싶으면 0번부터 차근차근 읽어주세요!
급하신분은 맨 아래 2번 고
0. QuerySelector 를 사용하기 위해 알아야 할 사전지식
1). 노드(Node)
- https://ko.wikipedia.org/wiki/%EB%85%B8%EB%93%9C_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)
- 컴퓨터 과학에 쓰이는 기초적인 단위
2). 트리
- 노드로 이루어진 자료 구조
- 여러개의 노드와 이를 연결하는 간선(edge)들로 구성되어 있다
- 모빌을 생각하면 쉽다.
최상위 노드에서 다른 노드들을 순회하여 자기 자신에게 돌아오는(순환이 없는) 연결 그래프
3). DOM
- the document object model, 이하 dom
- html, xml 문서의 프로그래밍 인터페이스
- html 의 계층구조를 표현한 자료구조
4). document
- DOM 트리의 최상위 객체
- DOM 트리의 루트 노드(Root Node) ~ 최상위 꼭대기
| <!DOCTYPE html> <html> <head> <script></script> </head> <body> <div> <span> <h1></h1> <p></p> </span> </div> </body> </html> |
| console.log(document) |
 |
1. QuerySelector 기본 사용법
1). querySelector
- 반환값: HTMLElement
| document.querySelector(태그) | document.querySelector(div) | 도큐먼트에서 해당 태그에 해당하는 엘리먼트 반환 |
| document.querySelector(클래스) | document.querySelector(.test_box) | 도큐먼트에서 해당 클래스에 해당하는 엘리먼트 반환 |
| document.querySelector(태그 클래스) | document.querySelector(div .test_box ) | 도큐먼트에서 해당 태그 및 클래스에 해당하는 엘리먼트 반환 |
| document.querySelector(아이디) | document.querySelector(#test_box_id) | 도큐먼트에서 해당 아이디에 해당하는 엘리먼트 반환 |
| document.querySelector(태그 or 클래스 등).addEventListener(이벤트, () => { 콜백 }) |
||
| document.querySelector("click" => { console.log("클릭 시 콜백 받기") }) |
||
| 쿼리셀렉트로 선택한 오브젝트의 이벤트 리스너 |
2). querySelectorAll
- 반환값: NodeListOf<Element>
- 사용법은 querySelector 와 동일(document.querySelector(태그) 등), 반환값이 다르다.
2. angular 에서 응용법
- angular 는 컴포넌트화 되어있잖아요?
헤더와 푸터를 제외한 메인 영역만 원하는 컴포넌트로 변경하려는 구조일 경우
router 를 사용하여 router-outlet 으로 호출하거나
createComponent 로 자식 컴포넌트를 생성합니다.
- 문제는 querySelector 또는 querySelectorAll 을 사용할 document 가 메인 app.component 라서 발생합니다.
저같은 경우는 퍼블리싱을 받아서 그대로 적용하려는데
router-outlet 안에 있는 새로 호출된 컴포넌트의 클래스에 접근할 수가 없더라구요.
1. @ViewChildren 을 사용하여 document 안에 있는 자식 요소에 접근
- 구체적으로 접근해야 할 대상은 document 인 app.component 안의 router-outlet 에 띄워진 대시보드 컴포넌트
| @ViewChildren('slideEleView') slideEle!: QueryList<ElementRef>; | |
| ViewChildren | - https://angular.dev/api/core/ViewChildren - 뷰(html)에 접근하기 위한 데코레이터 - ViewChildren 는 여러개 - ViewChild 는 단일 |
| slideEleView | - html 에 id 나 class 처럼 접근할 수 있는 셀렉터 - 저같은 경우는 라우터 어쩌구를 통해 대시보드까지 접근해야 하는 상황이므로, 사용하려는 컴포넌트 안 html 의 필요한 태그에 #slideEle 를 넣었습니다. |
dashboard.component.html ... <div #slideEle > ... </div> |
|
| slideEle | - ts 에서 사용할 변수 |
| QueryList | - slideEle 의 유형 |
2. 원하는 태그에 접근
- 이제 위에 적힌 쿼리 셀렉터로 자유롭게 접근해서 퍼블리싱 적용하면 끝~!
//document 가 아니라 viewChlidren 을 사용해 접근한 오브젝트 사용 this.slideEle.forEach((container: ElementRef<any>) => { console.log("1. 셀렉터가 포함된 태그 (ElementRef<any>)") console.log(container) console.log("--------------------------------------") console.log("2. 태그 안 요소") console.log(container.nativeElement) console.log("--------------------------------------") const classList = container.nativeElement.classList; console.log("3. 태그의 클래스 목록") console.log(classList) console.log("--------------------------------------") console.log("4. 태그 안 요소에 쿼리셀렉터를 사용하여 접근") console.log("4-1. 왼쪽 클릭버튼") console.log(container.nativeElement.querySelector('#l-btn-module')) console.log("4-2. 오른쪽 클릭버튼") console.log(container.nativeElement.querySelector('#r-btn-module')) console.log("--------------------------------------") }) |
 |
행복앵귤러되세요.
추운날씨 감기도 조심하ㅅH요ㅕㅂ
'프레임워크 > Angular' 카테고리의 다른 글
| angular window.scrollTo 안먹힐때 (0) | 2025.03.06 |
|---|---|
| pipe, custom pipe 사용하기 (6) | 2025.02.18 |
| Angular 초기 설정 (0) | 2024.11.06 |
| angular 에서 JSON 형식 가시화 (0) | 2024.10.10 |
| standalone 관련 (1) | 2024.09.26 |
