DOM

DOM(Document Object Model)은 HTML(Document)에 접근하여 Object처럼 HTML을 조작할 수 있는 Medel이라는 의미다.

자바스크립트 코드에서 document 객체를 조회하는 방법

• console.log(document.body);

console.dir은 DOM을 객체의 모습으로 보여준다.

console.dir(document.body);

• 매번 document.body로 찾는 것은 번거롭기에 변수 선언을 하여 정보를 저장할 수 도 있다.

let divNav = document.body.children[0];

---

DOM 조작하기

CREATE - createElement

document.createElement('div');
const ele = document.createElement('div');

• 위 처럼 div 요소를 만들 수 있다.
  • 하지만 만들기만 했을 뿐 실제 APPEND를 해야 DOM과 연결이 된다.

APPEND - append

document.body.append(ele);

• append, prepend 차이점
  • append()는 선택한 요소 내부 끝에 추가된다.
  • prepend()는 선택한 요소 내부 시작 부분에 추가된다.
• append, appendChild 차이점
  • append()는 자바스크립트 메소드, appendChild()는 DOM 메소드이다.

READ - querySelector, querySelectorAll

const readEle = document.querySelector('.class1');

• querySelector를 사용하면 같은 이름을 가진 클래스를 출력하지 않고, 해당 클래스 중 가장 먼저 있는 요소만 조회가 가능하다.

const readEle = document.querySelectorAll('.class1');

• querySelectorAll은 해당 클래스를 가진 모든 요소를 조회할 수 있다.

UPDATE - textContent, id, classList

• 요소 안에 글자를 넣을 수 있다.

ele.textContent = 'divdiv';

• 클래스 지정

ele.classList.add('class1');

• id 지정

ele.id = 'container';

DELETE - remove, removeChild, innerHTML = "", textContent = ""

ele.remove();

• 자식 엘리먼트를 지우는 방법

document.querySelector('#container').innerHTML = '';
// 편리한 방식이지만, 보안상 문제가 있다.

const contain = document.querySelector('#container');
contain.removeChild(contain.firstChild);