[웹 프로그래밍 기초] JS 문서 객체 모델

18889 단어 CSSJavaScripthtmlCSS

1. 문서 객체 모델 기본 용어

  • 문서 객체 모델(DOM) : 웹 브라우저가 HTML 페이지를 인식하는 방식, 웹 브라우저가 HTML 파일을 분석하고 표시하는 방식
  • 문서 객체는 태그(또는 요소)를 자바스크립트에서 사용할 수 있는 객체로 만든 것
  • 문서 객체를 조작한다 = 태그를 조작한다.

요소 노드
<h1> 태그와 <script> 태그 처럼 요소를 생성하는 노드
텍스트 노드
화면에 출력되는 문자열

정적 생성
웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것
동적 생성
웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것

2. 실행 순서에 따른 문서 객체 사용 오류

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <script>
        document.querySelector('h2').style.color='red';
    </script>
</head>
<body>
    <h1>h1 첫 번째</h1>    
    <h2>h2 두 번째</h2>
</body>
</html>

웹 실행은 위에서 아래로 실행되기 때문에 script 태그를 읽는 시점에 h1과 h2태그는 생성되지 않아서 오류가 발생한다.

해결 방법1) script 태그의 위치를 옮긴다.

<body>
    <h1>h1 첫 번째</h1>    
    <h2>h2 두 번째</h2>
    <script>
        document.querySelector('h2').style.color='red';
    </script>
</body>

해결 방법2) 이벤트 활용하기
onload(메서드/익명함수) : 웹 브라우저에 있는 모든 내용을 읽은 후 실행해라 

    <script>
        window.onload=function(){
        document.querySelector('h2').style.color='red';
        };
    </script>

3. 문서 객체 선택

document

  • 웹 페이지에서 가장 최상위라 할 수 있는 html을 포함하고 있는 객체
  • 즉, 문서 전체를 대표하는 객체

문서 객체 선택
이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것
즉, 자바스크립트를 사용해 실행 중에 내부 글자를 변경하거나 스타일을 변경할 수 있다.

구분메서드설명
1개 선택document.getElementById(아이디)아이디 1개로 선택
document.querySelector(선택자)선택자로 1개 선택
여러 개 선택document.getElementsByName(이름)name 속성으로 여러개 선택
document.getElementsByClassName(클래스)class 속성 여러 개 선택
document.querySelectorAll(선택자)선택자로 여러개 선택

예시1) getElementById() 메서드를 사용해 문서 객체 1개 선택하기 

<head>
	...
    <script>
        window.onload=function(){
        document.getElementById('header').style.color='red';
        };
    </script>
</head>
<body>
    <h1 id="header">header</h1>    
</body>


예시2) querySelector() 메서드를 사용해 문서 객체 1개 선택하기 

<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>
    <script>
        window.onload=function(){
        document.querySelector('h1').style.color='blue';
        };
    </script>
</head>
<body>
    <h1 id="header">header</h1>    
</body>

예시3) querySelectorAll() 메서드를 사용해 문서 객체 여러개 선택하기
배열의 형태로 문서 객체가 반환 

<head>
     ...
    <script>
        window.onload=function(){
            var headers = document.querySelectorAll('h1')
            for (var i =0;i<headers.length;i++)
                headers[i].style.color='green'

        };
    </script>
</head>
<body>
    <h1>header</h1>    
    <h1>header</h1>    
    <h1>header</h1>    
</body>

4. 문서 객체 조작

글자 조작

속성설명
textContent문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
innerHTML문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경

스타일 조작

자바 스크립트로 CSS속성 값을 추가/제거/변경

스타일시트의 스타일 속성자바스크립트의 스타일 식별자
background-imagebackgroundImage
background-colorbackgroundColor
box-sizingboxSizing
list-stylelistStyle

속성 조작

메서드설명
setAttribute(속성 이름,속성 값)속성 지정
getAttribute(속성 이름)속성 추출
Wecode 2차 프로젝트 후기(男의집)
Visual Studio Code에서 Python3의 venv 사용하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage