DOM 객체

• HTML 문서의 각 요소를 객체화한 것
• 브라우저는 각 HTML 태그를 하나의 객체로 만듦
• DOM의 목적 → HTML 태그가 출력된 모양과 콘텐츠를 제어하기 위함
  

  출처 : https://poiemaweb.com/js-dom

• DOM 트리의 루트는 document 객체
  • 주의 ) document 객체는 DOM 객체가 아님

주요 메소드

• DOM 객체를 찾는 메소드

getElementByID()

• 주어진 id 속성 값을 가진 첫번째 DOM 객체 리턴

getElementsByTagName()

• 주어진 태그 이름을 가진 모든 태그의 컬렉션 리턴

getElementsByClassName()

• 주어진 class 속성 값을 가진 모든 태그의 컬렉션 리턴

getElementsByName()

• 주어진 name 속성 값을 가진 모든 태그의 컬렉션 리턴

getElementByID() 는 1개의 element를 반환함.
그 이외의 것은 HTMLCollection을 반환하며 그것은 유사배열임

• HTMLCollection
  일반적인 배열변수가 아님. 유사배열임
  객체 이며 key 값이 키값이 0으로 시작함
  이렇게 인덱스처럼 되어있는 것을 유사배열이라고 함
  배열에서 인덱스로 접근하는 것 처럼 객체명[인덱스] 이렇게 접근가능 (ex, body[0])
  

DOM 객체 동적 생성

HTML 문서의 로드가 완료된 document에 자바스크립트 코드를 이용하여 추가하고 싶은 HTML 태그를 나타내는 DOM 객체를 생성하여 DOM 트리에 직접 삽입 가능

즉, 자바스크립트에서도 html의 요소들에 접근 할 수 있음

createElement("태그이름")

• HTML 태그의 나타내는 DOM 객체를 생성
  

innerHTML

• 시작태그와 종료태그 사이에 텍스트를 삽입할 수 있음
  

innerText

• 태그를 제외하고 객체 안에있는 모든 텍스트 나열해줌
  

setAttritube("속성명","속성값")

• 속성을 추가할 수 있음

var exampleDiv = document.createElement("div");
exampleDiv.innerHTML = "div 만들어보기";
exampleDiv.setAttritube("id","exDiv");

<div id = "exDiv">
    div 만들어보기
</div>   

/* 같은 동작을 함 */

DOM 트리에 삽입

참고 ) https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

• element.insertAdjacentHTML(position,text);
• position 종류
  - 'beforebegin’ : element 앞에
  - 'afterbegin' : element 안에 가장 첫번째 child
  - 'beforeend’ : element 안에 가장 마지막 child
  - 'afterend’ : element 뒤에
  

자바스크립트에서의 Style 변경

• 가능은 하지만, 추천하지는 않음

const $body = document.getElementsByTagName('body');
    
$body.style.backgroundColor = '색상이름';
// 이렇게하면 오류남 -> undefined뜸. 유사배열이라서
    
$body[0].style.backgroundColor = '색상이름';
// 인덱스를 지정해주어야함

유사배열을 배열의 형태로 변환

유사배열 → 배열 변환시, map과 filter 함수를 사용할 수 있음

spread operator

const 변수명 = [...바꾸고싶은유사배열명]

Array.from

const 변수명 = Array.from(바꾸고싶은유사배열명)

☑️ map, filter은 타겟이 배열일 때만 사용가능하기 때문에 유사배열에는 적용시키지 못함
→ 모두 사용가능한 forEach를 많이 사용함

query 셀렉터

참고 ) https://velog.io/@chloeee/getElementById-그리고-querySelector-차이점
querySelector() : 해당 조건을 만족하는 첫번째 element만 선택
querySelectorAll() : 해당 조건을 만족하는 여러개 선택 -> NodeList(유사배열) 리턴

HTMLCollection VS NodeList

☑️ 공통점 ) 유사배열 → map, filter 사용 X
☑️ 차이점 ) NodeList는 forEach사용 가능, HTMLCollection은 forEach사용 X
→ 따라서, NodeList를 리턴해주는 query 셀렉터를 더 많이 사용