DOM이란
Document Object Model의 줄임말로
JavaScript를 이용해서 엘리먼트의 속성을 생성, 조회, 변경, 삭제 하는 방법을 일컫는다.
javaScript를 이용하여 HTML요소에 접근할때는
다음 함수에서 셀렉터 규칙을 이용하여 선택 할 수 있다.
document.querySelectordocument.querySelectorAll
둘의 차이는 규칙에 맞는 처음 만나는 요소를 선택하냐,
규칙에 맞는 모든 요소를 선택하냐 의 차이.
셀렉터 규칙
셀텍터 규칙은 다양하지만 크게 아래와 같이 나열 할 수 있다.
- 태그
- id
- class
- 공통규칙
참고할 html
<body>
<div id="comments-box">
<li class="comments">
<p class="name">황대성</p>
<p class="text">안녕하세요~</p>
</li>
<li class="comments">
<p class="name">황대성</p>
<p class="text">저만 댓글 다나요..?</p>
</li>
<li class="comments">
<p class="name admin">운영자</p>
<p class="text">저도 있습니다.</p>
</li>
</div>
</body>1. 태그
html의 요소들을 태그로 구분하여 선택할 수 있습니다.
태그를 찾을때에는 아무런 접두사가 필요 없습니다.
document.querySelector('div')
동일한 태그를 여러개 선택하기 위해선 document.querySelectorAll을 사용합니다.
document.querySelectorAll('li')
2. id
html의 요소들을 id로 구분하여 선택할 수 있습니다.
id를 찾을때에는 접두사로 #을 사용합니다.
document.querySelector('#comments-box')
id를 찾을때에는 document.querySelectorAll을 사용할 수 없습니다.
즉 html을 작성할 때에는 id는 꼭 고유하게 작성해야 함을 의미합니다.
3. class
html의 요소들을 class로 구분하여 선택할 수 있습니다.
class를 찾을때에는 접두사로 .을 사용합니다.
document.querySelector('.name')
찾으려는 class의 첫 요소를 확인했습니다.
역시 여러 요소를 확인하기 위해선 document.querySelectorAll을 사용합니다.
document.querySelectorAll('.name')
4. 공통규칙
태그, id, class 등 어떤것이 와도 해당하는 규칙입니다.
태그, id, class등의 셀렉터 뒤에 띄어쓰기후 다시 셀렉터를 사용하여
자식 요소를 선택할 수 있습니다.
예를들어 'div p' 라고 셀렉터를 작성한다면
div태그 안에있는 p태그를 선택하는 셀렉터입니다.
comments 클래스의 요소 안에있는 text클래스를 선택합니다.
'JavaScript | 자바스크립트 > 기타' 카테고리의 다른 글
| this (0) | 2020.07.16 |
|---|---|
| DOM - 2 (0) | 2020.07.16 |
| 클로저 - closure (0) | 2020.07.15 |
| 스코프 - Scope (0) | 2020.07.14 |
| for ...of문 / for ...in문 (0) | 2020.07.14 |
댓글