DOM (Document Object Model)

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다. DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할입니다.

https://storage.googleapis.com/replit/images/1554697886215_4cc30fbcee76455dc6061ef47279a2a1.pn

그래서 JavaScript는 어떻게 HTML에 접근할 수 있다는 말일까요? 바로 document라는 전역객체를 통해 접근할 수 있습니다. JavaScript의 document 객체는 DOM 구조를 접근하는 관문이며, document 객체는 HTML 문서를 나타낸다고 말할 수 있습니다.

Assignment

index.js에 아래의 내용을 구현해주세요.

• p 태그를 생성하고 (hint: createElement),
• 해당 요소에 dom 이라는 class 이름을 주고 (hint: className)
• 해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)
• h1요소 내부에 추가 (hint: appendChild)

.title {
  color: red;
}

function updateTitle() {
  let title = document.getElementsByClassName('h1-title')[0];
 
  title.innerHTML = '바뀐 제목!!!';
}

 updateTitle();

function addClass(name) {
  let title = document.getElementsByTagName('h1')[0];
 
  title.className = name;
}

 addClass('title');

function addElement() {
  let listWrap = document.createElement('ul');
  let list = document.createElement('li');
  let listContent = document.createElement('span');

  listContent.innerHTML = "목록이다";
  list.appendChild(listContent);
  listWrap.appendChild(list);

  document.body.appendChild(listWrap);
}

 addElement();

 function addTag() {
   let title = document.getElementsByTagName('hi')[0];
   let tagAdd = document.creatElement('p');

   tagAdd.className = 'dom';
   tagAdd.innerHTML = 'DOM';
   title.appendChild(tagAdd);
 }

 addTag();