Front-end/Js

Js 기초(BOM, DOM, classList)- AWS 풀스택 과정 23일차

awspspgh 2024. 8. 14. 18:13

오늘은 BOM, DOM, classList에 대해서 배워보도록 하겠습니다

 

목차
1. BOM
2. pop up
3. setTimeout
4. location
5. DOM
6. classList
7. 예제 문제
8. 느낀 점

 

1. BOM

<!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>
    <h1>
        BOM : Browser Object Model : 브라우저의 객체를 지칭하는 용어(window 객체)
        DOM : Document Object Model : Html 문서의 객체를 지칭하는 용어(body 안에 입력된 태그 객체)
    </h1>
    <ul>
        <li>
            윈도우 종류와 브라우저 화면 배율 등에 따라 달라짐
        </li>
        <li id = "ih">
            window.innerHeight : 툴바를 제외한 높이 =>
        </li>
        <li id = "iw">
            window.innerWidth : 스크롤바를 포함한 너비 =>
        </li>
    </ul>
    <script>
        let ih = document.getElementById ('ih');
        let iw = document.getElementById ('iw');
            ih.innerText += window.innerHeight;
            iw.innerText += window.innerWidth;
    </script>
</body>
</html>

 

▷ 출력

 

2. pop up

<!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>
    <h1>
        window 메서드 종류
    </h1>
    <ul>
        <li>
            window.open('url','window name','option(size, scroll..)');
        </li>
        <li>
            window.close(); 창닫기
        </li>
        <li>
            alert(); / prompt(); input 포함 / confirm(); 확인,취소
        </li>
        <li>
            setInterval(function, millsecond);
            일정 간격 지속적으로 실행문을 실행시킬 때 사용
        </li>
        <li>
            setTimeout(function, millsecond);
            일정 시간 동안 실행문을 실행시킬 때 사용
        </li>
    </ul>
    <button type="button" onclick="openWindow(0)">팝업창 열기</button>
    <button type="button" onclick="closeWindow()">팝업창 닫기</button>
    <button type="button" onclick="alertEx()">alert</button>
    <button type="button" onclick="promptEx()">prompt</button>
    <button type="button" onclick="confirmEx()">confirm</button>
    <h3 id="msg"></h3>

    <script>
        let msg = document.getElementById('msg');
        function confirmEx(){
            let con = confirm("confirm 연습"); // true / false
            // true : 확인버튼을 클릭했습니다. / 취소버튼을 클릭했습니다.
            if(con){
                msg.innerText = "확인버튼을 클릭했습니다.";
            }else{
                msg.innerText = "취소버튼을 클릭했습니다.";
            }
        }
        function promptEx(){
            // 입력받은 값을 msg에 출력
            let prom = prompt("prompt 연습"); // input value
            msg.innerText = prom;
        }
        function alertEx(){
            alert("alert 연습");
        }
        let myWindow;
        function openWindow(){
            myWindow = window.open("01_BOM.html", "myWindow", "width=400, height=500");
        }
        function closeWindow(){
            myWindow.close();
        }
    </script>
</body>
</html>

 

▷ 출력

 

3. setTimeout

<!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>
    <h1>
        setTimeout(callback function, duration);
        duration(millsecond) 시간 후에 function이 실행
    </h1>
    <h3>
        setTimeout을 할당한 객체는 clearTimeout(할당한 객체)로 취소가능
        millsecond = 1/1000 => 1초 1000
    </h3>
    <button type="button" id="start">시작</button>
    <button type="button" id="end">끝</button>
    <h1 id="msg">3초 후에 글자가 나타납니다.</h1>
    <a href="04_setInterval.html">04_setInterval.html</a>
    <script>
        let timeObj;
        document.getElementById('start').addEventListener('click', ()=>{
            timeObj = setTimeout(myFun, 3000);
        });
        function myFun(){
            document.getElementById('msg').innerText = "짠~~~!!!"
        };
        document.getElementById('end').addEventListener('click',()=>{
            clearTimeout(timeObj);
        });
    </script>
</body>
</html>

 

▷ 출력

 

◈ setInterval

<!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>
        #h3{
            color: white;
            background-color: brown;
        }
    </style>
</head>
<body>
    <h1>
        setInterval(callback function, interval duration);
        duration 간격으로 function을 호출
        clearInterval(객체); : 삭제 가능
    </h1>
    <h3 id="h3">
        setInterval!!!!
    </h3>
    <button id="start">start</button>
    <button id="end">end</button>
    <a href="05_location.html">05_location.html</a>

    <script>
        let intervalObj;
        function changeColor(){
            let h3 = document.getElementById('h3');
            h3.style.color = (h3.style.color == "white") ? "black" : "white";
            h3.style.background = (h3.style.backgroundColor == "brown") ? "antiquewhite" : "brown";
        }
        document.getElementById('start').addEventListener('click', ()=>{
            intervalObj = setInterval(changeColor, 1000);
        });
        document.getElementById('end').addEventListener('click', ()=>{
            clearInterval(intervalObj);
        });
    </script>
</body>
</html>

 

▷ 출력

 

4. location

<!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>
    <h1>
        location : location 객체는 브라우저의 주소표시줄 입력에 관련된 객체
    </h1>
    <ul>
        <li>
            window.location / window 생략 가능
        </li>
        <li>
            location.href = 'url' : 해당 url로 이동
        </li>
        <li>
            location.replace('url') : 해당 url로 이동 / history 객체 저장하지 않고 이동
        </li>
        <li>
            location.assign('url') : 해당 url로 이동 / history 객체 저장
        </li>
        <li>
            location.reload(): 현재 페이지에서 새로고침
        </li>
    </ul>
    <button type="button" id="movehref">href를 이용하여 이동</button>
    <button type="button" id="movereplace">replace를 이용하여 이동</button>
    <button type="button" id="moveassign">assign를 이용하여 이동</button>
    <button type="button" id="movereload">새로고침</button>
    <a href="06_history.html">06_history.html</a>
    <script>
        document.getElementById('movehref').onclick = ()=>{
            location.href = 'http://www.naver.com';
        }
        document.getElementById('movereplace').onclick = ()=>{
            location.replace('http://google.com');
        }
        document.getElementById('meveassign').onclick = function(){
            location.assign('http://daum.net');
        }
        document.getElementById('movereload'),onclick = function(){
            location.reload();
        }
    </script>
</body>
</html>

 

▷ 출력

 

◈ history

<!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>
    <h1>
        history 객체 : 브라우저가 저장하고 있는 방문 페이지의 기록을 관리하는 객체
    </h1>
    <ul>
        <li>
            history.back() : 이젠페이지로 이동
        </li>
        <li>
            history.forward() : 다음 방문한 페이지로 이동
        </li>
        <li>
            history.go(n) : n번째 페이지로 이동 -2(이전 2단계)
        </li>
        <li>
            브라우저 별로 각자의 저장소를 가지고 있고, (브라우저의 기반)
        </li>
        <li>
            접근 방어를 해놓은 브라우저에서는 작동하지 않음.
        </li>
    </ul>
    <a href="01_BOM.html">01_BOM.html</a>
    <button type="button" id="back">back</button>
    <button type="button" id="forword">forword</button>
    <input type="text" id="n">
    <button type="button" id="go">go(n)</button>
    <script>
        document.getElementById('back').onclick=()=>{
            history.back();
        }
        document.getElementById('forword').onclick=()=>{
            history.forward();
        }
        document.getElementById('go').onclick=()=>{
            let n = document.getElementById('n').value;
            history.go(Number(n));
        }
    </script>
</body>
</html>

 

▷ 출력

 

5. DOM

<!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>
    <h1 id="h1">
        DOM : Document Object Model html문서 객체 모델
    </h1>
    <ul>
        <li class="list">
            html 하위 태그는 각각의 기능(method), 속성(properties)을 가지고 있는 문서 객체
        </li>
        <li class="list">
            element 가져오기 : byId, byClassName, byTagName
        </li>
        <li>
            document.getElementById('idName') : 단일 엘리먼트 리턴
        </li>
        <li>
            document.getElementByClassName('className') : 복수 엘리먼트 리턴
            => HTML Collection 타입으로 리턴
        </li>
        <li>
            document.getElementByClassName('tagName') : 복수 엘리먼트 리턴
            => HTML Collection 타입으로 리턴    
        </li>
        <li>
            배열처럼 리턴 index를 사용하여 선택
        </li>
    </ul>
    <script>
        const h1 = document.getElementById('h1');
        const list = document.getElementsByClassName('list');
        const li = document.getElementsByTagName('li');
        const ul = document.getElementsByTagName('ul');

        console.log(h1);
        console.log(list);
        console.log(li);
        console.log(ul); // 자식 태그
        console.log(ul[0].children); // ul의 하위객체
        console.log(ul[0].children[0]); // ul의 하위객체
    </script>
</body>
</html>

 

▷ 출력

 

◈ querySelector

<!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>
    <h1>
        querySelector(), querySelectorAll()
        node(관리객체)로 리턴하는 메서드
    </h1>
    <ul>
        <li>
            getElementBy** : HTMLCollection 타입으로 리턴
            .value, .name, .id 속성으로 접근 가능
        </li>
        <li>
            querySelcetor : nodeList 형태로 리턴
            [0] index 번호로만 접근이 가능
        </li>
        <li>
            더 구체적으로 엘리먼트에 접근하고 싶다면 querySelector
        </li>
        <li>
            빠르고 편리하게 자원을 지원받으려면 getElementBy**
        </li>
    </ul>
    <script>
        const li = document.querySelectorAll('li');
        console.log(li);
    </script>
</body>
</html>

 

▷ 출력

 

◈ arttribute

<!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>
    <h1>
        element 속성은 크게 두 가지로 구분
        - 태그의 속성 - css(style) 속성
    </h1>
    <ul>
        <li>
            태그의 속성은 태그가 가지고 있는 속성이기 때문에 속성명을 그대로 사용
            li.id input.value a.href img.src
        </li>
        <li>
            class는 여러개의 값을 갖는 속성 / 이런 특징을 가지는 속성들은 별도의 속성명을 사용
        </li>
        <li>
            object.classList : 모든 클래스를 나열
        </li>
        <li>
            css관련 속성은 style.을 통해 프로퍼티에 접근 가능
        </li>
        <li>
            css 속성 중 - font-size => -를 지우고 첫글자를 대문자로 변경 fontSize
        </li>
    </ul>
    <img src="../image/놀란고양이.jpg" alt="cat" id="imgTag" class="a b c d">
    <script>
        const imgTag = document.getElementById('imgTag');
        console.log(imgTag);
        console.log(imgTag.src);
        console.log(imgTag.alt);
        console.log(imgTag.classList);
        console.log(imgTag.id);
    </script>
</body>
</html>

 

▷ 출력

 

◈ style

<!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>
    <h1>
        element CSS 적용
    </h1>
    <ul>
        <li>
            tagName.style.css 속성 접근 가능.
        </li>
        <li>
            css 속성중 - => -를 지우고 첫글자를 대문자로 font-size => fontSize
        </li>
        <li>
            element.setAttribute(name, value);
        </li>
        <li>
            a.setAttribute('href', 'http://www.naver.com');
        </li>
    </ul>
    <h1 id="h1">색상변경</h1>
    <input type="color" id="colorValue">
    <button type="button" id="changeBtn">변경</button>

    <script>
        document.getElementById('changeBtn').addEventListener('click', ()=>{
            const h1 = document.getElementById('h1');
            let colorValue = document.getElementById('colorValue').value;
            h1.style.color = colorValue;
        })
    </script>
</body>
</html>

 

▷ 출력

 

6. classList

<!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>
    <h1>
        tag classList 속성
    </h1>
    <ul id="ul" class="ul list iter">
        <li>
            class의 속성이 여러개 값이 올 수 있으므로 list 형태로 리턴
        </li>
        <li>
            리턴 타입 DOMTokenList 객체로 별도의 메서드를 제공
        </li>
        <li>
            add(), contains(), toggle(), remove()...
        </li>
    </ul>
    <script>
        const ul = document.getElementById('ul');
        console.log(ul);
        console.log(ul.classList);

        ul.classList.add('u12');
        console.log(ul.classList);

        // iter 있는지 체크 (true / false)
        ul.classList.contains('iter');
        console.log(ul.classList.contains('iter'));

        // toggle : 있으면 삭제, 없으면 추가
        ul.classList.toggle('iter');
        console.log(ul.classList);
        ul.classList.toggle('iter');
        console.log(ul.classList);
        
        // replace : 변경
        ul.classList.replace('list','list2');
        console.log(ul.classList);

        // remove : 삭제
        ul.classList.remove('list','list2');
        console.log(ul.classList);
    </script>
</body>
</html>

 

▷ 출력

 

6. 예제 문제

◎ 문제

▶ 1번

 

▶ 2번

 

▶ 3번

 

▶ 4번

 

◎ 정답

▶ 1번

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Matemasie&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
    <style>
        body{
           text-align: center; 
        }
        #header{
            margin-bottom: 50px;
        }
        #header>h1{
            font-family: "Matemasie", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 2em;
        }
        #header>h3{
            font-family: "Matemasie", sans-serif;
            font-weight: 500;
        }
        #section{
            display: flex;
            justify-content: center;
        }
        #section .hero{
            margin: 0 30px;
            text-align: left;
            padding: 20px;
            border: 1px solid black;
            box-shadow: 5px 5px 5px black;
        }
        #section .hero div:first-child{
            font-family: "Matemasie", sans-serif;
            font-size: 20px;
        }
    </style>
</head>
<body>
     <!-- https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json -->
     <header id="header"></header>
    <section id="section"></section>
    <script>
        fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json')
        .then(resp => resp.json())
        .then(result => printData(result));

        const header = document.getElementById('header');
        const section = document.getElementById('section');
        function printData(obj){
            console.log(obj);
            // header에 넣을 객체 생성
            let str = '';
            str += `<h1>${obj.squadName}</h1>`;
            str += `<h3>HomeTown: ${obj.homeTown} // Formed: ${obj.formed}</h3>`;
            header.innerHTML = str;

            // section에 넣을 객체 생성
            // member[{},{},{}] => 배열 => 객체
            for(let i = 0; i < obj.members.length; i ++){
                let member = obj.members[i];
                let memberStr = `<div id = "hero${i}" class = "hero">`;
                    memberStr += `<div>${member.name}</div>`;
                    memberStr += `<div> SecretIdentity : ${member.secretIdentity}</div>`;
                    memberStr += `<div> Age : ${member.age}</div>`;
                    memberStr += `<div> SuperPowers : <ul id="power${i}"></ul></div>`;
                    memberStr += `</div>`;
                    section.innerHTML += memberStr;
                    for(const p of member.powers){
                        document.getElementById(`power${i}`).innerHTML += `<li>${p}</li>`;
                    }
            }
        }
    </script>
</body>
</html>

 

▶ 2번

<!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="../day05/travel(과제)/Link.css">
    <style>

    </style>
</head>
<body>
    <h1>Travel</h1>
    <ul>
        <li><a id="비행기" onclick="clickCity(this)">Home</a></li>
        <li><a id="서울" onclick="clickCity(this)">Seoul</a></li>
        <li><a id="도쿄" onclick="clickCity(this)">Tokyo</a></li>
        <li><a id="파리" onclick="clickCity(this)">Paris</a></li>
    </ul>
    <img src="../image/비행기.jpg" alt="image" id="cityImg">
    <script>
        function clickCity(e){
            event.preventDefault();
            console.log(e);
            console.log(e.id);
            const cityImg = document.getElementById('cityImg');
            cityImg.src =`../image/${e.id}.jpg`;
        }
    </script>
</body>
</html>

※ onclick = "함수명(this)"

태그 내용 자체를 값으로 가져옵니다.

ex) 값 => <a id = "비행기" onclick = "clickCity(this)"> Seoul</a>

 

※ event

event.prevenDefault;

: a 태그를 눌렀을 때도 href 링크로 이동하지 않게 해줍니다.

 

▶ 3번

<!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>
    <button type="button" id="btn1">li 한번에 추가</button>
    <button type="button" id="btn2">li 하나씩 추가</button>
    <button type="button" id="btn3">li 한번에 추가</button>
    <button type="button" id="btn4">li 하나씩 추가</button>
    <ul id="ul"></ul>
    <hr>
    <ol id="ol"></ol>
    <hr>
    <ul id="ul2"></ul>
    <hr>
    <ol id="ol2"></ol>
    <hr>
    <script>
        const datas = ['HTML', 'CSS', 'JavaScript', 'SQL'];
        let str = ``;
        let cnt = 0;

        // CreateElement : element 생성
        // appendChild : 자식으로 추가
        document.getElementById('btn3').addEventListener('click', ()=>{
            datas.forEach((e)=>{
                let li = document.createElement('li'); // <li></li>
                li.innerText = e;
                document.getElementById('ul2').appendChild(li); // ul의 자식으로 추가 ul.innerHTML = li
            });
        });

        let i = 0;
        document.getElementById('btn4').addEventListener('click', ()=>{
            if(i < datas.length){
                let li = document.createElement('li');
                li.innerText = datas[i];
                document.getElementById('ol2').appendChild(li);
                i ++;
            }
        });

        document.getElementById('btn1').addEventListener('click', ()=>{
            for(let i of datas){
                str += `<li>${i}</li>`;
            }
            ul.innerHTML = str;
            str = ``;
        });
        document.getElementById('btn2').addEventListener('click', ()=>{
            if(cnt <= datas.length -1){
                let e = datas[cnt];
                    str += `<li>${e}</li>`;
                    ol.innerHTML = str;
                    cnt ++;
            }
        });
    </script>
</body>
</html>

 

▶ 4번

<!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>
        body{
            text-align: center;
            display: flex;
            justify-content: center;
        }
        form{
            width: 500px;
            height: 100px;
            background-color: skyblue;
        }
        #item{
            margin: 30px 0;
            width: 300px;
            height: 30px;
        }
        #add{
            margin: 35px 0;
            width: 60px;
            height: 30px;
        }
        ul{
            padding: 0;
        }
        li{
            background: linear-gradient(#2193b0, #6dd5ed);
            display: flex;
            list-style-type: none;
            text-align: left;
            width: 500px;
            color: white;
        }
        li>div{
            width: 250px;
            flex-direction: row;
            padding: 10px;
        }
        li:nth-child(even){
            background: linear-gradient(#373B44, #4286f4);
        }
        .del{
            text-align: right;
        }
        .del:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div id="wapper">
        <h2>여행 준비물 점검 목록</h2>
        <form action="">
            <input type="text" id="item" autofocus="true">
            <button type="button" id="add">추가</button>
        </form>
        <div>
            <ul id="itemList"></ul>
        </div>
    </div>
    <script>
        let index = 0;
        
        document.getElementById('add').addEventListener('click', ()=>{
            let item = document.getElementById('item').value;
            document.getElementById('item').value = "";
            let ul = document.getElementById('itemList');
            ul.innerHTML += `<li id ="check_${index}"><div>${item}</div><div class="del" onclick="dlt(${index})">X</div></li>`;
            index ++;
        });

        function dlt(n){
            let box = document.getElementById("check_"+`${n}`);
            box.remove();
        }

    </script>
</body>
</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>
        #wapper{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        #wapper form{
            background-color: green;
            color: white;
            padding: 30px 40px;
        }
        #wapper form input{
            border: none;
            outline: none;
            width: 300px;
            padding: 10px;
            font-size: 15px;
        }
        #wapper form button{
            padding: 10px;
            border: none;
            background-color: white;
            box-shadow: 3px 3px 3px gray;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }
        #wapper div ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wapper div ul li{
            padding: 12px 10px;
            background-color: beige;
            position: relative;
        }
        #wapper div ul li:nth-child(odd){
            background-color: bisque;
        }
        #wapper div ul li:hover{
            background-color: palegreen;
        }
        .close{
            position: absolute;
            top: 0px;
            right: 0px;
            padding: 12px 20px;
            cursor: pointer;
        }
        .close:hover{
            background-color: palevioletred;
            color: white;
        }

    </style>
</head>
<body>
    <div id="wapper">
        <h2>여행 준비물 점검 목록</h2>
        <form action="">
            <input type="text" id="item" autofocus="true">
            <button type="button" id="add">추가</button>
        </form>
        <div>
            <ul id="itemList"></ul>
        </div>
    </div>
    <script>
        // 추가하는 목록을 저장, 삭제하는 목록을 제거
        const itemList = [];

        document.getElementById('add').addEventListener('click', addItem);

        // 삭제
        // 동적으로 생기는 엘리먼트에 이벤트를 생성시 document에 리스너를 달아서 클릭을 감지 후 처리
        document.addEventListener('click', (e)=>{
            console.log(e.target);
            // 삭제 버튼 감지시...
            if(e.target.classList.contains('close')){
                let i = e.target.id;
                // i번지 1개 삭제
                itemList.splice(i,1);
            }
            // 화면에 뿌리기
            showList();
        });

        // 뿌리기
        function showList(){
            let list =''; // 텍스트
            for(let i = 0; i<itemList.length; i++){
                list += `<li id = "list${i}">${itemList[i]}<span class="close" id="${i}">X</span></li>`
            }    
            document.getElementById('itemList').innerHTML = list;
        }    

        // 추가
        function addItem() {
            let item = document.getElementById('item');
            if(item.value != ''){
                itemList.push(item.value);
                item.value= ''; // input 창 비우기
                item.focus(); // input 창에 포커스 두기
                // 화면에 뿌리기
                showList();
            }else{
                alert('아이템 값이 없습니다.');
                item.focus();
            }        
        }        

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

 

▷ 출력

 

7. 느낀 점

자식요소를 .(dot)을 활용하면 번거롭게 [ ]를 여러번 사용하지 않아도 쉽게 문제를 풀 수 있다는 것을 깨닫게 되었고, 마지막 문제를 풀면서 button을 활용해야 한다는 생각에 사로잡혀있어서 문제를 제대로 풀 지를 못했었지만 다른 시각으로 보게 되면서 더 쉽고 간단하게 해결할 수 있었다. 오늘 다른 사람들이 푼 풀이과정을 보면서 복습을 해봐야겠다.

'Front-end > Js' 카테고리의 다른 글

Js 기초(event)- AWS 풀스택 과정 24일차  (0) 2024.08.16
Js 기초(JSON, AJAX)- AWS 풀스택 과정 22일차  (0) 2024.08.13
Js 기초(class)- AWS 풀스택 과정 21일차  (0) 2024.08.12
Js 기초(set, map)- AWS 풀스택 과정 20일차  (0) 2024.08.09
Js 기초(array)- AWS 풀스택 과정 19일차  (0) 2024.08.08

'Front-end/Js'의 다른글

  • 현재글Js 기초(BOM, DOM, classList)- AWS 풀스택 과정 23일차

관련글

티스토리툴바