Javascript - DOM

DOM: Document Object Model

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

  Document: 웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체

• Javascript를 사용하게 되면 script를 달아서 사용해야하는데 그 script는 문서를 한바퀴 돌고 읽어와서 JS의 내용을 적용시켜야 하기때문에 body제일 아래에 적어줘야 한다.
• body태그 제일 아래에 적어도 되긴하지만 head태그에 적고 script의 속성인 src앞에 defer를 적으면 head태그에 적어도 사용이 가능하다.

요소 선택

• documentElement: 사용한 문서 그대로 보여줌
• document.title: html에 사용한 title을 그대로 가져옴
• getElimentById( ): 해당ID를 가지는 요소를 불러온다.
• getElimentByClassName( ): 해당 class를 가지는 요소를 불러온다.
• getElimentByTagName( ): 해당 이름을 가진 Tag를 불러온다.
• getElimentByName( ): name의 속성값을 가져온다.
• querySelector: CSS선택자로 불러오는 요소의 제일 위에 있는 요소 하나만 불러온다.
• querySelectorAll: 해당 선택자의 요소를 배열 형태로 전부 불러온다.

요소 다루기

• 태그 내에 들어갈 문자열을 지정
  • innerText: 2칸 이상의 공백 문자 제거, 앞 뒤로 공백 문자 제거. 태그를 사용하더라도 적용이 안되고 문자열로 나타나진다.
  • innerHTML: 들어갈 내용에 태그와 코드를 쓰고 싶으면 'innerHTML'을 사용하면 된다.
  • textContent: 사용한 공백이 그대로 나타난다.

---

• 속성에 접근
  • getAttribute( ): 속성값 가져오기 // 선택한 요소의 속성값을 가져 옴
  • setAttribute( ): 속성값 설정하기 // 선택한 요소의 속성값을 직접 지정
    • 요소이름.setAttribute("속성이름", "바꿔줄 속성값")

---

class 다루기

• 선택요소에 clss를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메소드.
• 해당 메소드와 CSS를 잘 활용하면 액티브한 웹페이지 구성이 가능하다.
  • 요소.classList.add( ) // 클래를 추가
  • 요소.classList.remove( ) // 클래스를 제거
  • 요소.classList.contains( ) // 클래스가 있는지 없는지 확인----true, false로 반환
  • 요소.classList.toggle( ) // 클래스사 없으면 추가, 있으면 제거

노드 다루기

특정 노드를 선택 한 후, 그 노드의 형제, 부모 자식 노드에 접근하는 방법

• 요소.children /요소.children[0] : 자식 노드 접근 ---- 배열 O 요소 X
• 요소.parentNode : 부모 노드 접근 ---- 배열 X 요소 O
• 요소.previousElementSibling : 이전 형제 노드 접근 ---- 배열 X 요소 O
• 요소.nextElementSibling : 다음 형제 노드 접근 ---- 배열 X 요소 O

---

• createElement('html요소') : html의 특정 노드를 생성
• 요소.append : 선택된 요소의 맨 뒤 자식 요소로 추가
• 요소.prepend : 선택된 요소의 맨 앞 자식으로 요소를 추가
• 요소.before : 선택된 요소의 앞에 있는 형제 요소로 추가
• 요소.after : 선택된 요소의 바로 뒤인 형제 요소로 추가
• 삭제할요소.remove : 선택된 요소가 삭제됨
• 부모요소.removeChild('삭제할 자식요소') : 선택된 자식 요소가 삭제됨

addEventListener

addEventListener ( "동작의 종류", funtion ( ) { 동작 } )

동작의 종류

• Click : 클릭 되었을 때
• Scroll : 스크롤 발생시
• Change : 폼 필드의 상태가 변경 되었을 때
• Submit : 폼이 제출 되었을 때
• Focus: 포커스가 갔을 때
• Blur : 포커스가 벗어나는 순간
• Load : 웹페이지에 필요한 모든 파일의 다운로드가 완료 되었을 때
• Resize : 브라우저 창의 크기가 변경 될 때
• Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때
• Mouse계열
  • Mouseover : 요소에 커서를 올렸을 때
  • Mouseout : 마우스가 요소를 벗어날 때
  • Mousedown : 마우스 버튼을 누르고 있는 상태
  • Mouseup : 마누스 버튼을 떼는 순간
• Key계열
  • Keypress: 키를 누르고 있는 순간 + 누르고 있는 동안 계속 발생
  • Keydown : 키를 누르는 순간에만 발생
  • Keyup : 키를 눌렀다가 떼는 순간

---

EX)

• bt2 눌렀을 때, div를 자식으로 붙이기
  

• bt4를 눌렀을 때 배경색을 노란색으로, 글자색을 검정색으로 변경
  여기서 this는 함수 본인이다.

• form이벤트 // submit 폼이 제출 되었을 때
  

• form 내부의 input창 선택

  • const todoInput = document.querySelector( 선택자 )
    console.dir(todoInput); // 요소가 가지고 있는 데이터를 출력

• 공백으로 들어오는 문잘는 추가되지 않도록

  • 요소.value.trim( ); --------- ex) const todo = todoInput.value.trim( );

• change 이벤트

  • input 창의 value값에 변경이 발생되면 일어나는 이벤트

    • chgInput.addEventListener ("input", function () {
      console.log("changing!!!");

  • 상태가 변경되면 change이벤트가 발생

    • chgInput.addEventListener ("change", function () {
      console.log("changed!!!");