[JavaScript] DOM 기초

DOM (Document Object Model)

1. Javascript가 생긴 이유

• 브라우저에서 쓰려고 만들어진 JS (출처: https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript)
• 본연의 역할
  • 웹 페이지를 동적으로 만들기 위해
  • 즉, HTML 문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어이다.

 

2. 웹 페이지가 뜨는 과정

1. www.naver.com  (클라이언트 → 서버)
2. HTML 문서를 수신 (서버 → 클라이언트)
3. 브라우저가 HTML 파일을 해석 (parsing)
   • 브라우저에는 기본적으로 랜더링 엔진이 있다
   • 랜더링 엔진이 HTML 문서에 코드 한줄, 한줄 보면서 '해석' 한다.
4. DOM Tree를 구성
5. HTML에 CSS가 포함되어 있으면 CSSOM Tree를 구성
6. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree 구성
7. 이하 생략 (자세한 내용: https://d2.naver.com/helloworld/59361)

DOM Tree (출처: https://bit.ly/2WochoN)

 

3. DOM이란 무엇인가?

• Document(HTML 파일)를 JavaScript가 알아들을 수 있는 Object 형태로 Modeling 하는 것
• DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
• DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
• 브라우저에 기본적으로 내장되어 있는 API
  • document를 두 환경에서 입력해보기
    • chrome browser 개발자 도구 ☞ chrome 브라우저에 내장되어 있는 API 사용 가능
    • VSCode (node 사용) ☞  alert 같은 chrome 에 내장되어 있는 API 실행시 Error 발생 (alert is not defined)
  • 런타임(런타임 환경) : 프로그래밍 언어가 구동되는 환경 (e.x. node.js, chrome 같은 브라우저들)
•  DOM이 브라우저에 내장되어 있기 때문에 HTML의 내용을 Javascript로 접근/제어 할 수 있다
• 모든 DOM의 node들은 속성(property)과 메서드(method)를 갖고 있다.
  • 속성(property): (HTML 요소의 내용을 바꾸는 것 같이) 읽을 수도 설정할 수 도 있는 값
  • 메서드(method) : (HTML 요소를 추가하거나 삭제하는 것과 같이) 할 수 있는 행동(action) 

document.getElementById("demo").innerHTML = "Hello World!";

// getElementById = 메서드(method)
// innerHTML = 속성(property)

// 요소를 찾는데 getElementById method가 id="demo"를 사용하였다
// = HTML 요소에 접근하는 방법 중 요소의 ID를 사용하는 것

• 함수와 메서드의 차이
  • 메서드 : 방법, 어떤 것을 성취하거나 접근하기 위한 특정한 절차
  • 객체 안의 함수 : 메서드

person.getName();
// method 에는 항상 '어떤 것'이 있어야 한다
// => person에 접근하기 위해 getName()이 사용된 것

getToggle();
// function은 혼자서 쓰일 수 있다

 

 

 

 

DOM에 접근 및 제어해보기

document 관련 api

1. Finding

/** 찾아봅시다 */

// 해당 id명을 가진 요소 하나를 반환합니다.
document.getElementById("id명")

// 해당 선택자를 만족하는 요소 하나를 반환합니다.
document.querySelector("선택자")

// 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByClassName("class명")[인덱스]

// 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByTagName("태그명")[인덱스]

// 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.
document.querySelectorAll("선택자명")[인덱스]





// 새로운 노드를 생성합니다.
const div = document.createElement('div');
document.body.append(div);
document.body.append(div);

2. changing

/** property(=속성)을 바로 바꿔버려잇! */

// 이 둘은 차이가 있어요!
element.innerHTML = new html content
element.innerText = new text

// style을 바꿔요.
element.style.property = new style

//method를 통해 클래스를 추가해봐요.
element.setAttribute(attribute, value)

// 어랏? 그럼 이런것도 가능??
element.setAttribute("style", "background-color:red;");

// ....
element.style.backgroundColor = "red";

// input 필드의 변신

3. 추가

// createElements
const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);

// createTextNode(elements는 아니구여, 그냥 글자...)
let textNode = document.createTextNode("Hello World");
document.body.appendChild(textNode);

// write. 조심 또 조심!
document.write("Hello World!");

document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");

// 골로 가는 코드
function myFunction() {
  document.write("Hello World!");
}

// 너무나도 많이 해봤던, addEventListener

// version 01
element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

// version 02
element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

---

직접 실습해보기

• document : DOM Tree의 가장 최상단
  
  • parentNode에는 s가 없는 이유: 부모는 하나이기 때문
  • childNodes로 아래로 내려가면서 찾아갈 수 있다.
• 위에서부터 아래로 접근해보기

console 창에서 직접 찍어보기

변수를 설정해서 body의 childNodes 찍어보기

• getElementById 와 querySelector 의 차이
  • id : identification (1개에만 쓸수 있다)
  • class : 군집. 어떠한 특성을 가진, 그 특성을 공유하는 것들 (여러 개 지정 가능)
  • (예) id = 학번 / class = 학급명
  • querySelector에서는 id인지 class인지 모르기 때문에 정확히 적어야 한다.

• createElement : element 생성하기

<div> 태그 추가

<h1> 제목 바꾸기

• innerHTML / innerText 차이
  • innerHTML : HTML 적인 요소를 받는다
  • innerText : text 요소만 받는다

innerHTML

<h1> 태그 안에 <h2> 태그가 생성되기 때문에 크기가 변하지 않는다

innerText (text로만 받기 때문에 <h2>태그가 생성되지 않는다)

• style 변경 가능

• setAttribute

toYelloClass 라는 class를 새로 넣을 수 있다.

• addEventListener

click 하면 alert가 실행된다

(주의) document.write() 는 지양하는게 좋은 코드

 

 

 

 

---

DOM 기초 특강을 듣고 정리한 부분이라서 나중에 공부를 더 한 뒤에 추가해야 할 부분도 있을 것 같다.

그렇지만, 한 번 특강을 듣고 나니 애매하던 부분들이 잘 채워져서 좋다.

이건 그냥 내 기록용..!ㅎㅎ

 

DOM에 대한 자세한 건 ☞ https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

여기서 더 보면 좋을것 같다. (너무 길고 방대해서 시간 날때마다 계속 읽어야 할 듯..)