TIL#4

2021/11/26

DOM

• def ) Document Object Model, HTML 요소를 Object처럼 조작할 수 있는 모델.
• HTML에 JavaScript를 적용하기 위해서 <script> 태그를 이용

  <script src="ex.js"></script>

• 브라우저가 코드를 해석하는 과정 중 <script> 를 만나면 해석을 잠시 멈추고, <script> 를 먼저 실행.
  

• 자바스크립트에서 DOM은 document 객체에 구현되어 있음.

  • DOM 구조 조회 시, console.dir 이 유용하다.
  • console.log 와 달리 DOM을 객체의 모습으로 출력함.
  • 자식 엘리먼트 찾기 : .children / 자식이 여럿일 때 첫 번째 찾기 → .children[0]
  • 부모 엘리먼트 찾기 : .parentElement
  • .appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 사직으로 붙임. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면, 현 위치에서 새로운 위치로 이동 ( 복사 x )

• 새로운 element 생성

  document.createElement('div') // 새로운 div element 생성

• 생성한 element를 트리 구조와 연결

  const exDiv = document.createElement('div')
  document.body.append(exDiv) // body element에 append

• element 조회

  const firstEx = document.querySelector('.ex')
  // 클래스 이름이 ex인 HTML element 중 첫 번째 조회
  const firstEx = document.getElementByClass('ex')
  // 이렇게도 사용 가능
  
  const exs = document.querySelectorAll('.ex')
  // 클래스 이름이 ex인 모든 HTML element를 유사 배열로 받아옴.
  // 배열처럼 for문을 사용할 수 있지만, 이것이 배열은 아니다.

• UPDATE

  exDiv.textContent = 'aaa'; // 비어있는 element에 문자열을 입력
  exDiv.classList.add('ex') // element에 ex 클래스를 추가

• REMOVE

  exDiv.remove() // append 했던 element 삭제
  
  // 반복문으로 자식 엘리먼트가 남아있지 않을 때까지 삭제하는 방법
  const container = document.querySelector('#container');
  while(container.firstChild){ // 첫 번째 자식이 존재하면
  	container.removeChild(container.firstChild); // 첫 번째 자식을 제거
  }

유효성 검사 sprint

• display: none → 브라우저에서 영역까지 사라짐
• visibility: hidden → 엘리먼트가 차지하는 영역은 그대로 남겨놓음.
• css 파일에 미리 hide 클래스(display: none)를 만들어 두고 js파일에서 컨트롤 하는게 좋다.
  • element.classList.add('hide') → hide 클래스를 추가해줌으로 안보이게 할 수 있음.
  • element.classList.remove('hide') → hide 클래스를 제거해줌으로 다시 보이게 할 수 있음.
• 이벤트 : DOM에서 이벤트는 마우스를 클릭하거나, 키보드를 누르는 등의 사용자 액션에 의해 발생.
  • 이벤트가 발생할 때 실행되는 함수 : 이벤트 핸들러
  • 관련 속성들은 on 접두어가 붙는다. ex) onclick, onkeyup..
• 이벤트 속성에 이벤트 핸들러 등록 방법들

  // 1번
  btn.onclick = function() {
    console.log('버튼 클릭');
  }
  
  // 2번 
  btn.addEventListener('click', function() {
    console.log('버튼 클릭');
  });
  		// 이벤트 핸들러와 이벤트 리스너에는 차이가 있는데 후의 TIL에서 서술
  
  // 3번
  function handler() {
    console.log('버튼 클릭');
  }
  
  btn.onclick = handler; 
  // 이벤트 속성(onclick)에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 함.