[JavaScript] DOM

VScode/JavaScript 2022. 9. 9. 14:13

문서객체 모델(DOM, document object model)

-넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식

-좁은 의미: document 객체와 관련된 객체의 집합

-HTML 페이지에 태그를 추가, 수정, 제거할 수 있음

-기본적인 자바스크립트만으로 DOM을 다루기에는 너무 복잡하므로 간단한 내용만 살펴보고 자세한 내용은 jQuery와 함께

DOM 관련 용어

-문서 객체: html or body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 문서 객체

-노드: 각 요소(head, body, title, script, h1, HEADER...)

--요소노드(Element Node): HTML 태그

--텍스트노드(Text Node): 요소 노드 안에 들어 있는 글자

-정적으로 문서 객체를 생성한다는 의미: 웹페이지가 처음 HTML 페이지에 적혀있는 태그들을 읽으며 생성하는 것

-동적으로 문서 객체를 생성한다는 의미: 자바스크립트를 사용해 원래 HTML 페이지에는 없는 문서 객체(태그 등)을 생성하는 것

1. 문서 객체의 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM01.html</title>
    <script type="text/javascript">
        function changeHeader(){
        // document.getElementById("header_1").innerHTML="펭귄";
        var header=document.getElementById("header_1");
        header.innerHTML="펭귄";
        // 문서 객체를 변수에 저장하고 .innerHTML 사용이 가능함. 그 외 메서드들도 변수와 함께 사용 가능
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="제목변경" onclick="changeHeader();"/><br/>
</body>
</html>

2. 문서의 객체 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM02</title>
    <script type="text/javascript">
        function createTag(){
            // 요소노드(HTML) 생성 -> 텍스트노드 생성 -> 텍스트노드를 요소노드에 첨가(삽입) -> 요소노드를 body에 첨가(삽입)

            // 요소노드 생성에서 변수에 저장
            var header=document.createElement('h2'); // h2 태그를 생성해서 변수에 저장. 아직 화면에 표시되지 않음

            // 텍스트노드를 생성해서 변수에 저장
            var textNode=document.createTextNode('hello DOM');
            
            // 텍스트 노드에 내용을 문서객체(h2)에 원래 내용이 있다면 그 끝에 이어서 원래 내용이 없다면 처음의 내용으로 삽입
            header.appendChild(textNode);

            // body에 header 객체를 원래 내용들의 맨끝에 추가 또는 원래 내용이 없다면 처음의 내용으로 추가
            document.body.appendChild(header);
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체생성1" onclick="createTag();"/><br/><!-- 없던 태그 추가 배치-->
</body>
</html>

3. 이미지 태그 생성 - 텍스트 노드가 없는 노드 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM03</title>
    <script type="text/javascript">
        function createImg(){
            var imgTag=document.createElement('img');
            imgTag.src='images/Koala.jpg';
            imgTag.width=300;
            document.body.appendChild(imgTag);
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체생성2" onclick="createImg();"/><br/><!-- 이미지 태그 추가 -->
</body>
</html>

4. 문서 객체의 innerHTML을 이용하여 객체 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM04</title>
    <script type="text/javascript">
        function createUI(){
            var output='<br/>';
            output+='<ul>';
            output+='<li><h2>JavaScripte</h2></li>';
            output+='<li><h2>jQuery</h2></li>';
            output+='<li><h2>Ajax</h2></li>';
            output+='</ul>';
            output+='<br/>';
            output+='<ul>';
            // alert(output);
            document.body.innerHTML+=output;
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체생성3" onclick="createUI();"/><br/>
</body>
</html>

5. 문서 객체 선택 및 가져오기1

-웹페이지에 이미 존재하는 HTML 태그를 스크립트로(id로) 가져오는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM05</title>
    <script type="text/javascript">
// -getElementById() 메서드는 한 번에 한가지 문서 객체만 가져올 수 있음
        function getDom(){
            var header1=document.getElementById('header_1');
            var header2=document.getElementById('header_2');
            header1.innerHTML='hello javascript';
            header2.innerHTML='hello DOM';
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체 선택_가져오기1" onclick="getDom();"/><br/>
</body>
</html>

6. 문서 객체 선택 및 가져오기2

-getElementByTagName('tagName'): tagName과 일치하는 문서객체를 배열로 가져옴

-getElementByName('name'): 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옴

-getElementByClassName('className'): 태그의 class 속성과 일치하는 문서 객체를 배열로 가져옴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM06</title>
    <script type="text/javascript">
        function getDom2(){
            var headers=document.getElementsByTagName('h1');
            headers[0].innerHTML='태그이름으로 가져오기1';
            headers[1].innerHTML='태그이름으로 가져오기2';
// name이나 TagName, ClassName이 중복되어 있다면 
// getElement 함수로 가져왔을 때 순서대로 인덱스가 부여된 배열로 사용됨
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체 선택_가져오기2" onclick="getDom2();"/><br/>
</body>
</html>

7. 문서객체의 스타일 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM07</title>
    <script type="text/javascript">
        function changeStyle(){
            var header=document.getElementById('header_1');
            header.style.border='1px solid black';
            header.style.color='orange';
            header.style.backgroundColor='yellow';
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체스타일조작" onclick="changeStyle();"/><br/>
</body>
</html>

8. 문서객체 제거

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM08</title>
    <script type="text/javascript">
        function removeDom(){
            var willRemove=document.getElementById('header_1');
            document.body.removeChild(willRemove); 
// body 문서 객체 바로 아래 수준에 제거하고자 하는 문서객체가 있을 때 가능한 코드
            var willRemove2=document.getElementById('header_2');
            willRemove2.parentNode.removeChild(willRemove2); 
// 일반적으로 문서 객체를 제거할 때 사용하는 코드
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="문서객체제거" onclick="removeDom();"/><br/>
</body>
</html>

9. 날짜/시간 표시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM09</title>
    <script type="text/javascript">
        function viewDateTime(){
            var clock=document.getElementById('clock');
            setInterval(function(){
                var date=new Date();
                clock.innerHTML=date.toLocaleString();
            },1000);
        }
    </script>
</head>
<body>
    <h1 id="header_1">HEADER</h1>
    <img src="images/Penguins.jpg" width="300">
    <div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
    <h1 id="clock"></h1>
    <input type="button" value="날짜시간표시" onclick="viewDateTime();"/><br/>
</body>
</html>

저작자표시

'VScode > JavaScript' 카테고리의 다른 글

[JavaScript] navigator (0)	2022.09.09
[JavaScript] vaildation, select tag, visibility, check (0)	2022.09.08
[JavaScript] Image (0)	2022.09.08
[JavaScript] BOM (0)	2022.09.08
[JavaScript] function (0)	2022.09.08

ABOUT ME

im hippo im hippo

'VScode > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'VScode > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바