DOM조작 순서는?
⇒ 선택 → 조작
1. 선택 관련 메서드
- 하나의 element 선택하기
document.querySelector(selector)
- 만족하는 첫번째 element 반환, 없다면
null반환
- 여러 element 선택하기
document.querySelectorAll(selector)
- CSS selector를 만족하는 NodeList를 반환한다.
- 반환 값은 정적 컬렉션이다 ⇒ DOM의 변경사항을 실시간으로 반영하지 않는다.
- 실시간 반환을 원하면 Node.childnode 같은 다른 명령어를 사용하자.
- ex)
<body> <h1 id="title">DOM 조작</h1> <p class="text">querySelector</p> <p class="text">querySelectorAll</p> <ul> <li>Javascript</li> <li>Python</li> </ul> <script> console.log(document.querySelector('#title')) console.log(document.querySelectorAll('.text'))
- console창을 띄워서 결과값을 출력해본다.
2. 조작 관련 메서드
- 생성
- tag 생성해보기 ⇒
document.createElement(tagName)
- tag 생성해보기 ⇒
- 입력
Node.innerText태그와 태그 사이에 입력되는 부분
- 추가
- 한 Node를 특정 부모의 Node의 자식으로 넣어주는 것
Node.appendChild()
- 추가된 Node 객체를 반환한다.
- 삭제
- 자식 Node를 제거
Node.removeChild()
- 제거된 Node를 반환한다.
- 속성 조회 및 설정
Element.getAttribute(attributename)
Element.setAttribute(name, value)- 이미 존재하면 값을 갱신
- 존재하지 않으면 지정된 이름으로 속성을 추가한다.
- ex)
toggle
Uploaded by N2T