[SeSACX코딩온] js - DOM, EVENT

DOM

- document object model
- html문서 요소의 집합으로 node, object에 접근할 수 있다
- dom tree이미지

1. 요소 선택

• document.querySelector('선택자')
  - 선택자에 해당하는 첫번째 요소를 가져온다
• document.querySelectorAll('선택자')
  - ex) (.클래스) 클래스를 가진 모든 요소를 배열의 형태로 가져온다(for each문 사용가능)
• document.getElementById('아이디명')
• document.getElementByClassName('클래스명')

	let nums = document.querySelectorAll('.nums');
	for(let num of nums) {
      console.log(num);
    }
	//.nums 클래스를 가진 요소에 순차적으로 접근

2. 요소 다루기

• TEXT
  - 요소.textContent = 'hi': 공백반환
  - 요소.innerText = 'hi': 공백X, 브라우저의 text값 반환
  - 요소.innerHTML = 'hi': 공백과 줄바꿈 반환(콘솔창), html tag 사용가능

	let p = document.querySelector('p');
	p.innerText = '<strong>안녕!</strong>';
	//출력: <strong>안녕!</strong>;
	p.innerHTML = '<strong>안녕!</strong>';
	//출력: 안녕!(굵은글씨로 출력)

• CLASS
  - 요소.classList.메소드()를 통해 사용
  - 요소.classList.add('a'): 요소에 a 클래스를 추가함
  - 요소.classList.remove('a'): 요소의 a 클래스를 삭제함
  - 요소.classList.contains('a'): 요소에 a 클래스 존재 유무 검사하고 boolean값으로 반환함
  - 요소.classList.toggle('a'): 요소에 a 클래스가 없으면 생성, 있으면 제거함

	//toggle()메소드를 이용한 클래스변경 코드 todo와 done을 변경함
	let lis = document.querySelectorAll('li');
	for(let li of lis) {
     	li.classList.toggle('todo');
        li.classList.toggle('done');
      	//todo를 가진 요소는 todo삭제 후 done클래스 추가
      	//done을 가진 요소도 반대로 작동하여 두 가지 요소들의
      	//클래스가 뒤바뀜
    }

• ATTRIBUTE
  - 요소.setAttribute('속성', '속성값'): 메서드 사용
  - 요소.속성 = '속성값': 바로 접근

	let inputTxt = document.querySelector('input');
	//메소드로 접근
	inputTxt.setAttribute('placeholder', '입력하세요');
	//속성에 바로 접근
	inputTxt.placeholder = '입력하세요2';

• NODE 접근
  - 요소.parentNode: 부모 요소를 반환
  - 요소.previousElementSibling: 이전 형제 요소를 반환
  - 요소.previousSibling: 이전 형제를 반환
  - 요소.nextElementSibling: 다음 형제 요소를 반환
  - 요소.nextSibling: 다음 형제를 반환

	<ul>
      <li>num1</li>
      형제
      <li class = "num2">num2</li>
      <li>num3</li>
	</ul>
	<script>
	//ElementSibling과 그냥 Sibling의 차이
	let num2 = document.querySelector('.num2');
	console.log(num2.previousElementSibling);	//num1 li반환
	console.log(num2.previousSibling);	//'형제'텍스트 반환
    </script>

• 요소 생성
  - document.createElement('태그')
• 추가
  - 요소.append(): 요소의 자식 중 마지막 자식으로 추가
  - 요소.appendChild(): 요소의 자식 중 마지막 자식으로 '요소' 추가
  - 요소.prepend(): 요소의 첫번째 자식으로 추가
  - 요소.before(): 요소의 이전 형제로 추가
  - 요소.after(): 요소의 다음 형제로 추가
• 삭제
  - 요소.remove(): 요소를 삭제
  - 요소.removeChild(a요소): 요소의 자식인 a를 삭제

	//append와 appendChild의 차이점
	let parent = document.querySelector('.parent');
	let child document.createElement('li');
	child.innerText = '자식';
	
	parent.append(child);
	parent.append('자식2');	//가능
	
	parent.appendChild(child);
	parent.appendChild('자식3');	//불가능

	//remove와 removeChild의 차이점(삭제의 기준)
	child.remove()	//child삭제
	parent.removeChild(child)	//parent의 자식요소인 child삭제

EVENT

1. addEventListener

• 요소.addEventListener('이벤트', function(e){
  이벤트 발생시 실행할 내용;
  })
• 이벤트의 종류
  - click, submit
  - mouse(mouseover, mouseout, mousedown, mouseup)
  - focus, blur
  - key(keypress, keydown, keyup)
  - load, resize, scroll, unload, change 등

	//버튼 클릭시 form을 제출하면 실행되는 이벤트 작성
	let form = document.querySelector('form');
	form.addEventListener('submit', function(e){
    	alert('form을 제출하였습니다');
    })

2. on~이벤트

• html 요소에 인라인 속성으로 이벤트 함수 연결
• onclick, onfocus, onmouseover 등

	<input type = "text">
	<script>
	//input text창을 클릭할 경우 실행되는 이벤트 작성
    function focusOn(e) {
      	let text = document.querySelector('input');
      	text.setAttribute('backgroundColor', 'pink');
      }
    </script>

3. event객체

• 이벤트 함수 사용 시 매개변수를 통해 이벤트 객체에 접근할 수 있다
• e.target: 이벤트가 걸려있는 요소를 반환
• e.preventDefault(): 이벤트 작동 시 새로고침을 막아준다