Java Script DOM

빅데이터 서비스 교육/Java Script

Java Script DOM

Manly 2022. 5. 26. 12:51

Document: HTML

렌더링에는 렌더링 엔진 필요

렌더링엔진

렌더링엔진: 웹페이지를 렌더링하기 위해 웹 브라우저에서 사용하는 소프트웨어

렌더링 순서

DOM Tree : 태그의 상하관계 , Style Rule : CSS ,

DOM : DOM Tree와 Style Rule이 병합되어 만들어 진다

내부 Javascript

외부 Javascript

인라인 Javascript

ex02DOM.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex02DOM활용</title>
</head>
<body>
    <div id="temp">
        <p>빅데이터반 화이팅</p>
        <h3 class="lunch">오늘 점심은 뭐 먹지?</h3>
    </div>
    <script>
        // DOM == document
        // 모든 html의 요소를 상하관계를 분리해 객체로 만들어서 가지고 있는
        // Document Object Model

        // DOM안에서 원하는 요소(태그)를 가져오는 방법
        // 1. querySelector('css선택자')
        // --> 딱 하나의 첫번째 요소만 되돌려준다.
        let h3 = document.querySelector('.lunch');

        // 여러개의 요소를 가져오고 싶을때는 
        // querySelectorAll을 사용한다. --> 배열과 같은 형태로 되돌려준다
        let all_h3 = document.querySelectorAll('.lunch');
        console.log(h3);
        console.log(all_h3);
        console.log(all_h3[0]);

        // 2. getElement~~~
        // getElementById('id값') --> # 절대 붙이지 말것
        // --> 하나의 요소만 되돌려 줄때 사용하는 기능(id는 유일한 한값만 존재)
        let div = document.getElementById('temp');
        console.log(div);
        let all_h3_2 = document.getElementsByClassName('lunch');
        console.log(all_h3_2);
        document.getElementsByTagName('h3');

        // querySelector vs getElement~~~
        // query~~~가 더 자세한 리턴타입(HTMLElementTagName)을 되돌려준다.
        // getEle~~~가 포괄적인 리턴타입 (HTMLElement) 되돌려준다.

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

ex03DOM.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text1"></div>
    <button onclick="addText()">클릭 해보기</button>

    <script>
        // 1. 내가 필요한 태그들이 어떤 것들이 있는가?
        let div = document.getElementById('text1');
        let btn = document.querySelector('button');

        // 2. 버튼을 클릭했을 때(이벤트가 발생했을 때) 처리
         // 이벤트 추가하는 방법
         // -요소.addEventListener('이벤트종류',함수)
        btn.addEventListener('click',function(){
            div.innerHTML += '이벤트 발생!<br>';
            //클릭을 누를때마다 div 안의 html에 이벤트발생! 글자 누적
        });

        // 객체의 property를 활용해서 추가하는 방법
        btn.onclick = function(){
            div.innerHTML += '이벤트발생!2<br>';
        }
        // onclick과 같이 property를 활용해서 추가하는 방법은
        // 똑같은 property를 하단에서 다시 새롭게 정의해버리면
        // 기존에 있었던 값이 덮어 씌워져 버린다.

        // addEventListener와   onlick property를 활용해서 클릭했을때
        //      (중복가능)
        // 두개가 중복해서 실행하게 만들 수 있다.

        //함수 선언문 사용해서 함수 하나 생성하기
        function addText(){
            div.innerHTML += '이벤트발생!3<br>'
        }
        

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

ex04DOM실습.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>클릭 한 번 해볼까요?</h1>
    <button >h1태그 생성</button>
    <button >a태그 생성</button>
    <button >ul태그 생성</button>
    <div id="text"></div>

    <script>
        // 1. 어떤 태그들을 가져와야 할까?
        // 버튼태그 3개를 한번에 가지고 오기
        let div = document.getElementById('text');
        let btns = document.querySelectorAll('button');

        // 각각의 태그들에 어떤 이벤트를 처리하게 만들어줄까?
        btns[0].addEventListener('click',function(){
            div.innerHTML += '<h1>행복한 Javascript 수업</h1><br>';
        });

        btns[1].onclick = function(){
            div.innerHTML += '<a href="https://smhrd.or.kr/">스마트인재개발원 홈페이지로이동</a>'
        };

        let addText = () => {
            div.innerHTML += '<ul><li>🍕배고프다🍕</li><li>🍔배고프다🍕</li><li>🍿배고프다🥞</li></ul>'
        }

        btns[2].onclick = addText;

        // 여러 방법을 이용해서 이벤트 추가

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

ex05DOM실습.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>클릭</button>
    <script>
        //input태그에 입력한 값이 alert창으로 나온 후 클릭하면 input태그 값 삭제
        
        // 1. 태그들 가져오기
        let input = document.querySelector('input');
        let btn = document.querySelector('button');

        // 2. 이벤트 처리하기
        btn.addEventListener('click',function(){

            // 3. input태그 안에 있는 텍스트를 가져와서 알림창으로 띄워주기
            // --> input태그는 닫는 태그가 존재하지 않는다. -> innerHTML사용 불가
            // --> value라는 attr를 기준으로 안에 있는 글자를 가져올 수 있다.
            alert(input.value);
            input.value = '';
        });

        // DOM의 요소들을 가져왔을 때 사용할 수 있는 property
        // 1. 태그.innerHTML
        // : 닫는 태그가 존재하는 태그들에 내부 내용을 가져오거나 
        // 변경하고 싶을 때 사용하는 기능
        // 2. 태그.attribute
        // : 각각의 태그들의 속성을 가져오거나 변경할 수 있는 방법
        // ex) input.value / img.src / a.href
        // 3. 태그.style.스타일속성명
        // : 각각의 태그들의 스타일 속성을 가져오거나 변경할 수 있는 방법
        // ex) div.style.width ='300px'


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

복습

자바스크립트

1) 객체

: 속성, 메소드를 하나로 묶은 자료형

ex) let person= {

속성명 : 값,

속성명1 : 값1,

메소드명 : function(){

}

메소드명 : 함수 (만들어진 함수 참조)

};

2) DOM

: Document Object Model

-> html 내부에 있는 각각의 요소(태그)들을 자바스크립트에서

접근 가능하게끔 객체화 시킨 모델

-> 내가 원하는 요소에 접근하는 방법

ex) <div id = "text">안녕?</div>

1) document.getElementById('text') 아이디값 , id text를 기준으로 가져온다

2) document.querySelector('#text') 아이디선택자

--> 무조건 하나의 요소만 되돌려준다.

3) document.querySelectorAll('css선택자')

--> 배열과 같은 형태로 되돌려 준다.

4) document.getElementsByClassName('클래스명')

5) document.getElementsByTagName('태그명')

6) document.getElementsByName('이름속성명')

--> 배열과 같은 형태로 되돌려준다.

ex) <div id = "text">안녕?</div>

let div = document.getElementById('text')

let btn = document.querySelector('button')

btn.addEventListener('click',function(){ --> div안의 안녕?을 alert 창으로 출력

alert(div.innerHTML)

})

btn.onclick = function(){alert(div.innerHTML)}

1. 요소안에 있는 데이터 가져오기

요소이름.innerHTML (닫히는태그까지 있을때)

2. 요소의 속성을 가져오기

요소이름.속성이름

ex) img.src / input.value / a.href

3. 요소의 스타일 변경하기

요소이름.style.css속성

ex06DOM이미지변경.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="img/11.png">
    <br>
    <button>이미지변경</button>

    <script>
        // img1이면 img2로변경, img2이면 img1로 변경
        // 조건에 따라 서로 다른 로직수행 조건문 활용

        // 1. 요소들을 가져오기
        let img = document.querySelector('img');
        let btn = document.querySelector('button');
        // 2. 이벤트 처리하기
        btn.addEventListener('click', function () {
            console.log(img.src);
            if (img.src == "http://127.0.0.1:5500/JS%EA%B0%9C%EC%9A%94/03Object,DOM/img/11.png") {
                img.src = "img/22.png";
            } else {
                img.src = "img/11.png";
            }
        });

        //if (img.src == "http://127.0.0.1:5500/JS%EA%B0%9C%EC%9A%94/03Object,DOM/img/11.png")
        // img.src == "img/11.png가 아니라 console에서 console.log(img.src)로 경로를 찾아서 해야한다."

    </script>
</body>

</html>

ex07Element스타일변경.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

    </style>
</head>
<body>
    <div></div>
    <button>원</button>
    <button>직사각형</button>

    <script>
        // 1. 태그들 가져오기
        let div = document.querySelector('div');
        let btn = document.querySelectorAll('button');
       
        // 2. 각각의 버튼들에 대한 이벤트 처리하기
        btn[0].addEventListener('click',function(){
            // 3. div 태그를 원 형태로 변경
            div.style.borderRadius = '50%';
            div.style.backgroundColor = 'gray';
        });

        // 한번 바꾼 스타일은 유지 -> 원에서 직사각형으로 만들때는 다시 borderRadius 0%로
        btn[1].addEventListener('click',function(){
            // 4. div 태그를 직사각형 형태로 변경
            div.style.borderRadius = '0%';
            div.style.backgroundColor = 'tomato';
        });

    </script>

</body>
</html>

ex08위시리스트.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/input.css">
    <link rel="stylesheet" href="css/list.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>위시리스트</title>
</head>

<body>
    <div id="wrapper">
        <h2>위시리스트</h2>
        <!-- onsubmit=return false : 새로고침 안되게 만드는 방법-->
        <form onsubmit="return false">
            <input type="text" id="item">
            <button id="add" class="addBtn">추가</button>
        </form>
        <!--위시리스트를 추가할 때마다 해당하는 데이터가 하나씩 추가될 공간-->
        <div id="itemList">
            <ul>
                <li>
                    시드니 멘리 다시가기
                    <span class="close">X</span>
                </li>
            </ul>

        </div>

    </div>



    <script>
        // 1. 사용자가 추가하기를 누른 데이터를 가져와서 
        // itemList안쪽에다가 ul태그 형식으로 출력
        // 1-1) 태그들을 가져오기
        let input = document.querySelector('#item');
        let btn = document.querySelector('#add');
        let div = document.getElementById('itemList');
        let list = [];
        //이벤트 밖에 생성해서 계속 초기화 되지 않게
       
        let remove = function () {
            list.splice(this.id, 1);
            // this 키워드는 클릭이벤트가 발생한 태그 자체를 의미한다.
            // span[i]는 function안으로 들어 올 수 없다.
            show();
        }

        // itemList라는 div 태그 안에 
        // 내가 추가한 데이터를 전부 집어넣어주고
        // span태그에게 클릭이벤트를 추가해주는 함수
        let show = function () {
            let content = '<ul>';
            for (let i = list.length - 1; i >= 0; i--) {
                content += '<li>' + list[i] + '<span id="' + i + '" class="close">X</span></li>';
            }
            content += '</ul>';
            div.innerHTML = content;

            // 2. span 태그를 가져오기
            // 클릭 후에 span태그가 반복문에서 만들어지기 때문에 click 이벤트안에서 가져와야한다
            let span = document.querySelectorAll('span');
            // 3. span 태그들에게 전부 클릭 이벤트를 걸어주기
            for (let i = 0; i < span.length; i++) {
                //참조하는 형식으로 추가해주기
                span[i].onclick = remove;
            }
        }



    

        // 1-2) 버튼에 이벤트 처리하는 기능 추가하기
        btn.addEventListener('click', () => {
            // 최근에 입력한 데이터가 위쪽에 출력되게
            // 배열 생성해서 클릭할 때마다 배열안에 input 태그안에 있는 글자 추가하기
            // div 태그 내부에 배열의 마지막 인덱스 데이터 부터
            // 순차적으로 배치해서 출력하기
            let text = input.value;
            list.push(text);
            // 1-3) input 태그 안에 있는 글자 가져오기
            // input은 닫는 태그 없으니까 innerHTML이 아니라 value로 값 가져오기

            // 1-4) div 태그 안쪽에 태그 형식으로  (위쪽 참고)
            //     해당하는 데이터 추가

            show();

            // 1-5) input 태그 안에 있는 글자 지우기
            input.value = '';
        });

    </script>

</body>

</html>

'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글

Java Script AJAX (0)	2022.05.31
JaVaScript jQuery (0)	2022.05.30
Java Script 배열, 함수, 객체 (0)	2022.05.24
Java 입출력문, 조건문, 반복문 (0)	2022.05.23

현재글Java Script DOM

오라클 클라우드, JavaScript, 리눅스, Deep Learning, AZURE, 오라클 adg, RNN, rman catalog, 오라클 RAC, OCI, 오라클, 머신러닝, rman, 딥러닝, Character set, oracle adg, 오라클 19c, adg, 전이학습, 활성화 함수,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

데이터들

Java Script DOM

렌더링엔진

렌더링 순서

'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글

'빅데이터 서비스 교육/Java Script'의 다른글

티스토리툴바

Java Script DOM

렌더링엔진

렌더링 순서

'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글

'빅데이터 서비스 교육/Java Script'의 다른글

관련글

티스토리툴바