21.12월 모각코) Javascript 2일차

21.12월 모각코) Javascript 2일차 - DOM 구조 학습

2021. 12. 22. 00:14ㆍ2021.12 모각코 javascript

안녕하세요. brandy 입니다. 오늘은 모각코 Javascript 2일차 DOM 구조에 대해 학습하였습니다.

웹 페이지는 일종의 문서 = document입니다.

이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 합니다. 즉, 동일한 문서를 사용하였는데도 다른 형태로 나타날 수 있다는 겁니다(웹 브라우저 화면에 나타나거나 or HTML 소스 자체로 나타나거나)

그중에서도 DOM은 Javascript에서 사용하는 개념으로, 웹 페이지의 객체 지향 표현입니다.

Javascript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다.

* 문서 객체란? <html>이나 <body> 같은 html 문서 태그들을 Javascript가 이용할 수 있는 object(객체)로 만들면 그것이 문서 객체가 된다.

넓은 의미로는 웹 브라우저가 HTML을 인식하는 방식을 의미하고, 좁은 의미로 본다면 document 객체와 관련된 객체의 집합 의미

문서(document)와 요소(element)에 접근하기 위해 DOM을 사용하는 거죠.

DOM이 프로그래밍 언어는 아니지만(프로그래밍 언어와 독립적으로 디자인 되었음)

DOM이 없다면 Javascript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다.

html에 Javascript 코드 연결하는 법 2가지

1) html에 <script> 코드 작성 - 코드가 길고 복잡해지면 수정,재사용성 불리

<script> ~ </script>

2) Javascript 파일 따로 만든 뒤 src를 통해 파일 연결

<script src="hello.js"></script>

외부 파일을 사용하기 떄문에 추후 코드 유지보수 시 유리하다는 장점이 있다.

DOM객체란?

Document Object Model의 약자

단순히 텍스트로 작성된 html 파일을 트리 형태로 표현한 객체

DOM을 통해서 javascript와 html 파일이 연결되고, document객체는 DOM 트리 최상단에 있는 객체에 접근

document를 이용하여 DOM객체에 접근하는 방법

- document.getElementById(id값)

- document.getElementsByTagName(tag명)

- document.getElementsByClassName(class명)

- document.querySelector/querySelectorAll(selector) : 여러 개의 객체들 중에 첫번째 객체만 가져온다. for문에서 배열 인덱스에 접근하면 된다.

Javascript에서는 문서에 HTML 요소를 추가할 수 있는 3가지 방법이 있습니다.

- .createElement() // .createElement('h1') >> <h1></h1>

- .createTextNode() // .createTextNode('Hello World') >> 문자열 만듦

- .appendChild() // 선택한 요소 안에 자식 요소 추가

Javascript를 통해 동적으로 문서객체 생성해보기 -1

<!DOCTYPE html>
<html>
<head>
    <meta-charset="UTF-8"/>
    <title>문서 객체 모델</title>
    <script type="text/javascript"> // 웹 표준은 <script type="text/javascript">가 맞지만, HTML5에서는 디폴트로 지정되어 있어 안적어줘도 되지만, 하위 호환성을 위해 적어주는 것이 좋다. 

    </script>


</head>
<body>
    <h1 id="header1" name="">HEADER-1</h1>
    <div>
        <h1 id="header2">HEADER-2</h1>
    </div>
    <hr>
    <h1 id="clock"></h1>

</body>



</html>

위의 코드에서는 Javascript로 동적 문서객체를 생성하지 않았는데요, document 객체에 접근해서 문서객체를 생성해보았습니다.

<!DOCTYPE html>
<html>
<head>
    <meta-charset="UTF-8"/>
    <title>문서 객체 모델</title>
    <script type="text/javascript"> // 웹 표준은 <script type="text/javascript">가 맞지만, HTML5에서는 디폴트로 지정되어 있어 안적어줘도 되지만, 하위 호환성을 위해 적어주는 것이 좋다. 
        window.onload = function() {
            // 1. 문서 객체 생성 
            var header = document.createElement('h2'); //h2 태그 생성 
            var textNode = document.createTextNode('Hello DOM');

            // 2. 노드(요소/텍스트 연결)
            header.appendChild(textNode);

            // 3. body 문서 객체에 header 문서 객체 추가 
            document.body.appendChild(header);
        }

    </script>


</head>
<body>
    <h1 id="header1" name="">HEADER-1</h1>
    <div>
        <h1 id="header2">HEADER-2</h1>
    </div>
    <hr>
    <h1 id="clock"></h1>

</body>



</html>

Javascript를 통해 동적으로 문서객체 생성해보기 -2

<!@DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript에 HTML 요소 추가하기</title>
</head>
<body> 
    <script> 
        var jbBtn = document.createElement('button'); // button HTML 요소를 만들고 jbBtn 변수에 저장 
        var jbBtnText = document.createTextNode('Click'); // Clcik이라는 텍스트를 만들고 jbBtnText에 저장 
        jbBtn.appendChild(jbBtnText); // jbBtn에 jbBtnText 추가 
        document.body.appendChild(jbBtn); // jbBtn을 body의 자식 요소로 넣기 
    </script>


</body>


</html>