72일차_20201124

DOM 메서드

 

사용법 _ document.메서드('내용')

 

순서대로

 

Create _ 요소를 만든다.

createElement()

createTextNode()

 

Append _ appendChild

(DOM 구조와 연결되지 못한 엘리먼트를 특정 부분에 붙여 줌 _ body 에 뭔가를 넣어줄 때 document.body.append('무엇'))

 

Read _

querySelector _ querySelector('찾을 것'), id, class 태그명 다 가능하다.

querySelectorAll _ querySelector 와 같지만 똑같은 조건의 모든 엘리먼트를 찾는다.

_querySelector, querySelectorAll 은 아이디, 클래스는 #, . 붙여주어야 한다.

getElementByTagName _ 태그 이름으로 조회

getElementByClassName _ 클래스 이름으로 조회

getElementById _ 아이디로 조회

 

Update _ 생성된 엘리먼트의 구성을 업데이트함

textContent (텍스트 추가)

id (xxxx.id.add('id)로 #id를 추가한다)

classList (xxx.classList.add('class')로 .class를 추가)

setAttribute (선택한 요소의 속성값을 정한다) xxx.setAttribute('속성 이름', '속성값')

 - document.getElementById('xxx').setAttribute('title', 'This is title') _ id가 xxx인 엘리먼트의 title 속성을 This is title 로 정한다.

 

 

Delete _ 요소를 제거한다.

remove() _ 지울 요소를 직접 입력한다.

removeChild() _ 지우고 싶은 엘리먼트 부모.removeChild(지울 엘리먼트) 로 사용한다.

innerHTML = "", textContent = "" _ 지울 요소를 ""라는 공백으로 치환하는 방법 같은데 사용하지 않는 것이 좋을 듯 하다.