17_Simple Coding - JS DOM - Chapter10 - 기본 요약

Table of Contents

📃 요약

Document Object Model 이라고하며 자바스크립트에서 html 태그를 선택하는 방법, CSS 선택자(태그/id/class/전체/특수 등의 선택자)를 모두 사용할 수 있는 함수를 제공함

요소 기술 :

– Basic : Javascript DOM

📃 기술 구현

스펙 :

- vscode
- js (es6)

📃 DOM

- Document Object Model, html 문서(태그 등이 있음)
- HTML 태그들을 컴퓨터의 메모리(DRAM)에 저장해서 사용하는 것을 말함
- 저장시 구조화해서 저장하는데 그것을 DOM 이라고 함

html 웹 문서 동작

1) 컴퓨터 웹브라우저에 html 문서를 읽어들임(파싱)
2) 파싱된 문서(DOM)를 메모리에 저장(DOM 저장됨)
    - 파싱된 문서는 Tree 구조로 저장됨(자료구조)

– html 문서(DOM) 주요 요소 :

- 태그(tag)
- 속성(attribute)
- 텍스트(text)
- 주석(comment)
- 위의 태그, 속성, 텍스트, 주석 별로 구분해서 트리구조로 메모리에 저장됨

아래 html 소스가 메모리에서 어떻게 저장되는지를 시각화한것임

- 03_dom.detail.html
<html>
    <head>
    </head>
    <body>
        <!-- DOM 이해를 돕기위한 예제 -->
        <div style="background-color: aqua;">안녕하세요</div>
        <script src="./js/03_dom_detail.js"></script>
    </body>
</html>

예) 

- html 문서가 메모리에 저장되는 형태는 아래와 같음 : 03_dom.detail.html

window(최상위 부모객체: html문서, 주소창, 메뉴, 상태바등)
                    |
            document(객체, html 문서)
                    |
            html(태그, 부모)
                    |
  -------------------------------------
  |                                    |
 head(태그, 자식)                    body(태그)
                                       |
                   ----------------------------------------
                   |                                      |
 div(태그) - style="backgroundColor='aqua'"(속성)  script - src="./js/03_dom_detail.js"
                   |
    "안녕하세요"(텍스트, ==innerHTML속성)

📃 바닐라 js

- DOM 을 선택하는 js 함수들을 말함, 대표적으로 document.querySelector() 함수가 있음
- 과거에는 기능이 부실해서 jQuery 라이브러리를 이용한 개발이 주를 이루었으나 현재는 기능이 업그레이드되고 
  jQuery 보다 크기나 성능이 빨라져 추천되는 코딩이 되었음

📃 DOM 사용법

DOM 선택함수를 이용해서 다양한 효과를 나타냄

DOM 선택 함수 : 태그선택자

document.querySelector(태그선택자)

예 : 아래 예제 html
<html>
<body>
    <h1 id=”h1Id” class=”h1Class”>안녕하세요</h1>
</body>
</html>

document.querySelector(태그선택자)


예 :
let num = document.querySelector("h1"); // 변수에 임시 저장
alert(num.innerHTML);
또는
alert(document.querySelector(“h1”).innerHTML); // 변수 사용 않함

DOM 선택 함수 : id선택자

document.querySelector(id선택자)


예 : 
let num = document.querySelector("#h1Id"); // 변수에 임시 저장
alert(num.innerHTML);
또는
alert(document.querySelector(“#h1Id”).innerHTML); // 변수 사용 않함

### DOM 선택 함수 : class선택자
- document.querySelector(class선택자)
```js
   예 : 
    let num = document.querySelector("#h1Class"); // 변수에 임시 저장
    alert(num.innerHTML);
또는
    alert(document.querySelector(“#h1Class”).innerHTML); // 변수 사용 않함

위의 사례에 비쳐 document.querySelector(css선택자) , css 선택자로 기본/특수선택자 모두 사용 가능함

DOM 선택 함수 : 다수 html 태그 선택

document.querySelectorAll(css선택자)

예 : 아래 예제 html
<html>
<body>
    <h1 id=”h1Id” class=”h1Class”>안녕하세요</h1>
    <h1 id=”h1Id2” class=”h1Class”>안녕하세요2</h1>
</body>
</html>

document.querySelectorAll(css선택자) : 2개의 h1 태그가 선택되므로 배열로 저장됨

let h1Tag = document.querySelectorAll("h1"); // 변수에 임시 저장
alert(h1Tag[0].innerHTML);
alert(h1Tag[1].innerHTML);

주요 속성 : innerHTML

설명 : 1) 선택된 html 태그 사이에 문자열 끼워넣기
예 : 아래 예제 html

<html>
<body>
    <h1 id=”h1Id” class=”h1Class”>안녕하세요</h1>
   <div id=”output”></div>
</body>
</html>

let val = document.querySelector(“h1”);
// h1 의 값 “안녕하세요” 를 div 태그 위치에 문자열 끼워 넣기

document.querySelector(“#output”).innerHTML = val.innerHTML; // 변수 이용
또는
document.querySelector(“#output”).innerHTML = document.querySelector(“h1”).innerHTML; // 변수 이용 않함

설명 : 2) 선택된 html 태그 사이에 문자열 가져오기
예 : 아래 예제 html
```
<html>
<body>
   <div id=”output”>안녕하세요</div>
</body>
</html>
```
let val = document.querySelector(“h1”);
// h1 의 값 “안녕하세요” 를 div 태그 위치에 문자열 끼워 넣기
```
alert(document.querySelector(“#output”).innerHTML)
```

📃 이벤트

- 클릭(click), 마우스이동, 키보드 키 다운 등의 모든 것을 말함
- 클릭 이벤트 : 프로젝트에서 사용하는 이벤트는 거의 클릭이벤트가 90% 임
- 2갸지 클릭 패턴을 주로 사용 
    1) .addEventListener() 함수 이용
    2) html 태그의 속성으로 click 사용

1) 클릭이벤트

- html 태그를 클릭했을때 실행되는 이벤트 , 주로 버튼 클릭이 주를 이름

(1) .addEventListener() 함수 이용

06_dom_display.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>문서를 열면 팝업 창이 표시됩니다.</p>
    <div class="popup" id="notice">
        <h1>공지사항</h1>
        <ul>
            <li>공지사항 내용</li>
            <li>공지사항 내용</li>
            <li>공지사항 내용</li>
            <li>공지사항 내용</li>
            <li>공지사항 내용</li>
        </ul>
        <button>닫기</button>
    </div>
    <script src="./js/06_dom_display.js"></script>
</body>
</html>

- css선택자를 클릭하면 function 안에 실행문을 실행함
- .addEventListener(click, function(){}); 패턴
사용법 : document.querySelector("css선택자").addEventListener("click", function(){ 실행문; })

예)
let closeBtn = document.querySelector(".popup > button"); // 자손선택자

closeBtn.addEventListener("click", function(){
    // 클릭시 실행될 부분
    // 2) .popup 태그를 안보이게 함
    document.querySelector(".popup").style.display = "none"; // 사라짐
})

(2) html 태그의 속성으로 click 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/function.css">
</head>
<body>
    <ul>
        <li>
            <!-- 사용법 : <태그 onclick="함수명();"></태그> -->
            <!-- 클릭하면 함수명() 실행됨 -->
            <a href="#" onclick="changeBg('green')">Green</a>
        </li>
    </ul>
    <!-- 출력위치 -->
    <div id="result"></div>
    <script src="./js/07_dom_onclick.js"></script>
</body>
</html>

function changeBg(color) {
    // id=result 위치에 배경색을 바꿈
    let result = document.querySelector("#result");
    // 배경색 바꾸기
    result.style.backgroundColor = color; // color='green'
}

2) mouseOver / mouseOut

- mouseOver : 마우스가 html 태그 위로 올라갔을때 실행되는 함수
- mouseOut  : 마우스가 html 태그 밖으로 나갔을때 실행되는 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: white;
            background-color: skyblue;
            padding: 10px;
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div onmouseover="mouseOver(event)" onmouseout="mouseOut(event)">
        마우스를 올려보세요
    </div>
    <script src="./js/09_event_mouseover.js"></script>
</body>
</html>

// 마우스 위로 함수 : 배경색을 변경(오렌지)
function mouseOver(event) {
    // event.target == 현재 마우스위로 올라간 태그(div)
    event.target.style.backgroundColor = "orange";
}

// 마우스 나갔을때 함수 : 배경색을 변경(하늘색)
function mouseOut(event) {
    // event.target == 현재 마우스위로 올라간 태그(div)
    event.target.style.backgroundColor = "skyblue";
}

📃 event.target

- 웹브라우저에서 항상 현재 이벤트(클릭, 마우스오버 등)가 걸린 html 태그가 임시 저장됨

document.getElementById(“id속성명”) :

- document.querySelect(css선택자) 와 유사하게 html 의 id 속성을 선택하는 함수

이미지 컵을 클릭하면 html 태그의 src 속성을 가져오는 예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
    <!-- 함수의 사용 : myImgClick(event) -->
    <img src="./img/cup-1.png" alt="컵" id="cup"
                onclick="myImgClick(event)">
</div>

<script>
    function myImgClick(event) {
        // TODO: event.target == 현재 클릭한 태그
        alert("클릭한 이미지 파일명 : " + event.target.src);
    }
    // querySelector() 함수 == getElementById(id이름);
    let img = document.getElementById("cup");

</script>
</body>
</html>

📃 기타 바닐라 함수

children 속성

- html 태그의 자식들을 선택하게 하는 속성

목록(li) 태그중에 1번째, 2번째 태그의 글자 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 요소(element, 태그) 접근</title>
</head>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Vanila js</li>
    <li>React</li>
</ul>
<script src="./js/23_dom_handing_children.js"></script>
</body>
</html>

// TODO: 자식 요소(태그) 접근
// 선택함수 : querySelector(css선택자)
let ulTag = document.querySelector("ul"); // ul 태그
// TODO: 사용법 : 태그.children[1] : 2nd li
//          태그.children[2] ; 3rd li
let two = ulTag.children[1].innerHTML; // 2nd li의 텍스트
let three = ulTag.children[2].innerHTML; // 3rd li의 텍스트

// 출력
console.log("two", two);
console.log("three", three);

classList 속성

- 디자이너/파블리셔들이 애용하는 속성
- 임의의 클래스명을 추가/수정/삭제하는 함수를 제공해서 디자인을 변경할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클래스 리스트 조작(***)</title>
    <style>
        .red {
            color: red;
        }
        .skyblue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="content">JS classList</div>
    <script src="./js/28_dom_handing_classList.js"></script>
</body>
</html>

// TODO: 클래스 리스트 조작
// 선택함수 : #content 선택
let content = document.querySelector("#content"); // div 태그

// TODO: 빨간색 클래스 추가
// red 클래스를 div 태그에 추가
// 사용법 : 태그.classList.add("클래스명");
content.classList.add("red");

// TODO: 빨간색 -> 하늘색 교체
// 사용법 : 태그.classList.replace("원클래스", "바꿀클래스")
content.classList.replace("red", "skyblue");

// TODO: 하늘색 클래스 삭제
// 사용법 : 태그.classList.remove("삭제할클래스")
content.classList.remove("skyblue");

// TODO: 클래스가 있으면 삭제, 없으면 추가 : toggle()
// 사용법 : 태그.classList.toggle("토글할클래스");
content.classList.toggle("skyblue"); // 추가가 됨

주요 속성 : input 태그 의 value

설명 : input 태그의 속성 value 는 화면에서 입력양식에 입력된 값

예 : 아래 예제 html
<html>
<body>
    <input type=”text” id=”name” value=”안녕하세요”> 
   <div id=”output”></div>
</body>
</html>

input 양식의 value 값 가져오기

let val2 = document.querySelector(“name”); // 변수 사용
alert(val2.value);
또는
alert(document.querySelector(“name”).value); // 변수 사용 않함

input 양식의 value 값 변경하기

document.querySelector(“name”).value = “값을 변경했어요”; 
alert(document.querySelector(“name”).value);

그 외 html 의 모든 속성을 DOM 선택 함수로(document.querySelector(css선택자)) 선택해서 값을 가져오거나 값을 변경할 수 있음

📃 변수의 종류 :

전역변수 : 어디서나 사용할 수 있는 변수

    - 단점 : 너무 많이 사용하면 메모리 부족 현상 생김

사용법 : 변수명 ( let , const 예약어를 빼고 사용 )

예)
num = 1; // 전역변수

지역변수 : {} 내에서 사용되며 {} 벗어나면 삭제됨

    - 장점 : 메모리 부족 현상을 막을 수 있어서 사용이 권장됨

사용법 : let 변수명; 

예)
let num = 1; // 지역변수

📃 전역 객체

- 웹 브라우저에서 미리 정의되어 있는 객체로 어떤 소스에서도 불러 사용할 수 있음
- 종류 : Window , Location, Screen 등의 객체가 있음

1) Window 전역 객체

- 웹 브라우저의 최상위 객체 
- 웹 브라우저 메뉴바, 상태바 등을 가지고 있고, 속성값에 접근할 수 있음

새창/새탭 띄우기

- 웹브라우저에서 새탭 띄우기가 금지되어 있을 경우 해제하고 실습할 것

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 300px;
        margin: 20px auto;
      }
      button {
        border: 1px solid #222;
        padding: 15px;
        font-size: 0.8em;
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <button onclick="openWin()">팝업 창 열기</button>
      <button onclick="closeWin()">팝업 창 닫기</button>
    </div>
    <script src="./js/01_window_open.js"></script>
  </body>
</html>

// 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정)
function openWin() {
    let opt = "width=400, height=350"; // 새창 크기
    // myWin : let(예약어 없음 : 전역변수, 추천하지 않음)
    // 사용법 : window.open("html이름", "새창제목", "크기")
    myWin = window.open("notice.html", "doit", opt);
}
function closeWin() {
    myWin.close(); // 새창 띄우고 리턴된 변수를 사용
}

2) Location 객체

- 웹브라우저 주소창의 속성을 가지고 있는 객체
- 주로 웹페이지 이동시 사용함

사용법 : location.href = "url";
- url 로 페이지 이동, url 과거이력이 있어서 웹브라우저의 뒤로가기 기능 사용가능

사용법 : location.replace("url");
- url 로 페이지 이동, url 과거이력은 없음, 웹브라우저 뒤로가기 기능 사용못함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location 객체 2</title>
</head>
<body>
    <button onclick="moveNaver()">네이버로 이동</button>
    <button onclick="moveGoogle()">구글 이동</button>

    <script>
        // 함수 정의
        function moveNaver() {
            // 이력 : 웹브라우저 기본기능(방문한 페이지는 자동 저장됨)
            // 페이지 이동 : 이력(history)을 남기면서 이동(뒤로 갈수 있음)
            location.href = "http://www.naver.com";
        }
        function moveGoogle() {
            // 페이지 이동 : 이력(history)을 남기지않음(뒤로 갈수 없음)
            location.replace("http://www.google.com");
        }
    </script>
</body>
</html>

17_Simple Coding – JS DOM – Chapter10 – 기본 요약