JS - DOM / TIL - 6

DOM (Document Object Model)

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델

JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다.

DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할

JavaScript의 document 객체는 DOM 구조를 접근하는 관문

document 객체는 HTML 문서를 나타낸다고 말할 수 있습니다.

예) 마켓 컬리

document객체는 DOM트리의 root node에 접근하게 해줍니다.

document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있다.

그렇게 class, id도 추가하고 style도 수정할 수 있다.

요소의 내용(content)는 innerHTML으로 접근하고 수정할 수 있다.

document.body.innerHTML = '내용 다 바꿈';

특정 element를 접근하고 싶을 때? tag, class, id와 같은 css selector로 접근 가능

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

• JavaScript에서 style 수정할 때 hypen(-)은 사용할 수 없다.
  객체(Object)에서 프로퍼티 이름에 hypen(-)을 사용할 수 없던 이유와 같다.
  
  
• style의 프로퍼티에 접근하고 싶을 때 camelCase를 쓰자.
  
  
• element를 생성할 수도 있다.
  
  
• .createElement (tagName) 함수를 사용하면 요소(element)를 만들 수 있다.

문제

문제 1 : index.js에 아래의 내용을 구현해주세요.
p 태그를 생성하고 (hint: createElement),
해당 요소에 dom 이라는 class 이름을 주고 (hint: className)
해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)
h1요소 내부에 추가 (hint: appendChild)

function addElement () {
  const newP = document.createElement("p");
  const newH1= document.querySelector("h1");
  
  newP.className = "dom";
  newP.innerHTML = "DOM";
  newH1.appendChild(newP);
}