S1 unit11 | DOM으로 javascript에서 html요소 편집하기

📌 DOM (Document Object Model)

: html, xml 프로그래밍 인터페이스 (html을 자바스크립트에서 편집할 수 있게 하는 역할)

 

📌 DOM 기본 편집 요소 (CRUD)

html요소를 javascript에서 불러올 땐 document(DOM 트리의 진입점 역할) 사용

◻ create

document.createElement('tag name') 🔗

: 'tag name' 태그인 새로운 엘리먼트를 만듭니다.

◻ read

document.getElementsById('id')🔗

document.getElementsByClassName('class name') 🔗

document.getElementsByTagName('tag name') 🔗

document.getElementsByName('name') 🔗

document.querySelector('') 🔗

:selector를 앞에 붙이고 ('') 에 넣는다. 1개만 조회된다.

document.querySelectorAll('')
: 입력한 선택자의 모든 요소가 조회된다.

◻ update

요소에 id 추가

추가할 요소.id = 'id name'

 

요소에 class 추가

추가할 요소.className = 'class name'

.classList.add('')

 

요소에 id, class, 기타 속성 추가

추가할 요소.setAttribute('attribute', 'name')

 

부모요소에 자식요소를 추가

부모요소.appendChild(추가할 요소)

부모요소.append(추가할 요소)

◻ delete

제거할 요소.remove()

부모요소.remove(제거할 자식 요소)

요소.classList.remove('class name')

: 요소의 클래스 중 입력한 이름의 클래스를 삭제한다.

🔗MDN classList

 

📌 이벤트 다루기

: 이벤트로 사용자와 상호작용이 가능한 웹을 만들 수 있다.

MDN 이벤트 입문

◻ target

: 이벤트가 발생한 대상 객체 🔗

◻ event handler

: 이벤트가 발생되면 작동되는 코드블럭 (보통 어떤 조건의 이벤트인지 고르는 역할)

이벤트 리스너라고 불리기도 함

이벤트 사용 방법

1. target.eventHandler = function() { ... }
2. function 함수이름 () { ... }
   target.eventHandler = 함수이름
3. target.addEventListener('type', 함수이름)🔗

이벤트 핸들러 종류

 

📌 요소 값 가져오기

 

이 페이지에서 글자를 가져오려면 어떻게 해야할까?

◻textContent

: 요소의 <script>, <style> 요소 포함한 모든 요소의 콘텐츠를 가져옴 

🔗

정말 거의 모든 요소를 가져왔다. <style> 이나 선언한 값? 밑엔 뭘 가져온 건지 모르겠다...

◻ innerHtml 

: 요소 내에 포함된 html을 가져온다.

보안 상의 이유로 textContent 사용이 권장된다.

🔗

 

정직하게 html 내용을 다 가져왔고 보니까 live sever로 html을 열어서 사용하고 있었는데 그 코드도 가져온 것 같다

◻ innerText

: 요소 내의 사람이 읽을 수 있는 콘텐츠만을 가져온다.

🔗

 

정말 딱 문자만 가져왔다.

이게 제일 편하지 않나...? 왜 textContent 사용을 권장할까?

 

❗ value 헷갈림 주의

value는 input 버튼이나 텍스트 박스 위에 있는 문자이다.

다른 텍스트에는 사용 불가능하다.