[포스코x코딩온] 웹개발자 풀스택 과정 2주차 | DOM

DOM(Document Object Model)

• HTML 문서 요소의 집합
• HTML 문서는 각각의 node와 object의 집합으로 문서를 표현 따라서 각각 node 또는 object에 접근하여 문서구조/ 스타일 / 내용 등을 변경할 수 있도록 하는 것

Document 요소 선택

• document.getElementById(아이디 속성값)
  : 해당 아이디의 요소를 선택함
  
  
• document.getElementsByClassName(클래스 속성값)
  : 해당 클래스에 속한 요소를 모두 선택함
  
  
• document.getElementsByTagName(태그 이름)
  : 해당 태그 이름의 요소를 모두 선택함
  
  
• document.getElementsByName(name 속성값)
  : 해당 name 속성값을 가지는 요소를 모두 선택함
  
  
• document.querySelector("요소 선택자")
  • 요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드
  • 문서에서 만나는 가장 첫번째 요소를 반환한다.
    
    
• document.querySelectorAll(CSS 선택자)
  • 문서에 존재하는 모든 요소를 찾아주는 메소드
  • 모든 요소를 가져와서 배열(같은) 데이터로 만들어준다.

    ---

    아이디 속성값 빼고 모두 Element's'가 들어가니 주의!

    ---

Document 요소 다루기

• document.createElement : 지정된 HTML요소를 생성함
• document.write : HTML 출력 스트림을 통해 텍스트를 출력함
• append() : 선택된 요소의 맨 뒤의 자식 요소에 추가됨
• .appendChild() : 선택된 요소의 맨 뒤의 자식 요소에 추가됨
• .remove() : 선택된 요소가 삭제됨
• .removeChild() : 선택된 요소의 자식 요소가 삭제됨
• .innvertext = 내용; = 텍스트(내용)값 설정

차이점

1. append() VS appendChild() - append()는 노드 객체와 문자열 모두 추가할 수 있지만, appendChild()는 노드객체만 추가 가능
   - append()는 한번에 여러개의 자식 노드를 추가할 수 있지만, appendChild()는 한번에 한개만 가능
   - append()는 return 값이 존재하지 않지만, appendChild()는 return 값이 존재한다.
   출처
   
2. innerText vs innerHTML
   - innerText는 element 안에 text 값들만 가져오지만 innerHTML은 HTML이나 XML을 가져온다.
   - innerText는 html을 포함한 문자열을 입력하면, html 코드가 문자열 그대로 element안에 포함되지만 innerHTML은 html코드를 입력하면 html태그가 해석되어 나온다.
   출처
   
   

이벤트 리스너(EventListener)

• 선택 요소에 지정된 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드

document.queryselector("button").getEventListener("이벤트입력", function(){
	alert("이벤트!");
	}

1. click : 클릭

2. mouserover : 요소에 커서를 올렸을 때

3. mouseout : 마우스가 요소를 벗어났을 때

4. mousedown : 마우스 버튼을 누르고 있는 상태

5. mouserup : 마우스 버튼을 떼는 순간
   

6. focus : 포커스가 갔을 때

7. blur : 포커스가 벗어나는 순간
   

8. keypress : 키를 누르는 순간 + 누르고 있는 동안 발생

<input type="text"/>
let input = document.queryselector("input");
input.addEventListener("이벤트", function(e){
  console.log(e.key)
})

9. keydown : 키를 누르는 순간에만 발생
10. keyup : 키를 눌럿다가 떼는 순간
11. load : 웹페이지에 필요한 파일(html, css, js 등)의 다운로드가 완료 되었을 때
12. resize : 브라우저 창의 크기가 변경 될 때
13. scroll : 스크롤이 발생할 때
14. unload : 링크를 타고 이동하거나, 브라우저를 이동할 때
15. change : 폼 필드의 상태가 변경 되었을 때