DOM (Document Object Model)

DOM이란 웹페이지의 HTML을 계층화시켜 tree구조로 만든 객체 모델이다. Javascript는 이 모델로 웹 페이지에 접근, 수정할 수 있다.

Javascript는 document라는 전역객체를 통해 HTML에 접근할 수 있다.

const example = document.querySelector('.navbar');

• document 객체는 DOM 구조를 접근하는 관문 역할.
• document 객체가 DOM트리의 root node에 접근하게 해준다.
• document 객체는 element(요소) 뿐만 아니라 attribute(속성)에도 접근할 수 있다. (id,class ...)

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

• Javascript로 style을 수정할 때에는 ' - ' (하이픈)을 사용할 수 없다. -> camelCase 사용
• element에 접근하는 것 뿐 아니라 추가적인 생산 또한 가능하다! .createElement('')
• 이렇게 만들어준 element를 원하는 요소에 이어붙여주면 된다. appendChild

Assignment

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

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

풀어보기🤨

function addPtag(){
  const h1 = document.getElementsByTagName('h1')[0];
  console.log('h1 : ' + h1);
  let p = document.createElement('p');
  p.className = 'dom';
  p.innerText = "DOM";
  h1.appendChild(p);
}

addPtag();

몰랐던 부분🧐

• getElementsByTagName('h1')[0] - 뒤에 인덱싱을 해줘야 하는 이유가 뭘까?

• getElementsByTagName('h1')을 콘솔로 찍어보면 배열형식과 같은(유사배열, length, indexing 가능하지만 foreach같은 구문은 사용할 수 없다.) HTMLCollection object가 출력된다.

• 이 Object는 모든 h1 태그를 가져온다고 이해하면 되는데, 그 중에서 내가 사용할 부분을 indexing 하여 사용하면 된다!