코린이[코딩 어린이]

특수코드표입니다.

Filter()

filter() 메서드는 내장함수로 필터를 통과한 지정된 배열의 요소로만 얕은 복사를 만들어줍니다.

const contents = ['바나나', '망고', '포도', '파인애플', '사과', '배'];


const result = contents.filter(content => content !== '파인애플');

console.log(result);
// output : ['바나나', '망고', '포도', '사과', '배'];

위 배열은 파인애플을 제외한 배열의 요소로만 얕은 복사를 해줍니다.

readline 모듈이란?

자바스크립트에서 내장모듈인 readline 모듈을 이용하면 콘솔을 통해서 값을 입력받을 수 있습니다.

index.js

// 모듈 불러오기
const readline = require("readline");

readline 인터페이스 객체 생성하기

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

변수 입력값

rl.question('answer ', (answer) => {
  
  console.log(`answer 내용: ${answer}`);
  // close를 해주지 않으면 무한히 입력을 받습니다.
  rl.close();
});

고양이 출력하기

아래 내용을 출력해주세요.

|\_/|
|q p|   /}
( 0 )"""\
|"^"`    |
||_/=\\__|

해결 방법

백틱, \ ( 역 슬래쉬 )

\n : 엔터효과

\' : ' 따옴표

\" : " 쌍따옴표

\\ : \ 역 슬래쉬 표시

:: 백틱을 사용 할 때도 \를 사용해줍니다.

결과

console.log(`|\\_/|
|q p|   /}
( 0 )\"\"\"\\
|\"^\"\`    |
||_/=\\\\__|
`);

이전 고양이와 내용은 같습니다.

ADD : Boolean 값에 따라 class 적용

<div [ngClass]="{ 'abc': check, 'bbb': !check }">안녕하세요</div>
<div [class.ccc]="check">안녕히계세요</div>

ADD : Multiple class 적용

<div [ngClass]="{'abc bbb': check}">안녕하세요</div>
<div [ngClass]="{abc: check, bbb: check2, ccc:check3}">안녕히계세요</div>

ADD : 3항 연산자에 class 적용 [ 왼쪽(abc) : true일 때 적용, 오른쪽(bbb) : false일 때 적용 ]

<div [ngClass]="check ? 'abc' : 'bbb'">안녕하세요</div>

ADD : 함수 호출 적용

<div [ngClass]="checked('type')">안녕하세요</div>

checked(list: String) {
    let className = '';
    if(list === 'type') {
      className = 'abc';
    }
    // 리턴할 클래스 이름
    return className;
}

이벤트

웹 브라우저에서 사용자가 화면을 클릭 하거나, 키보드를 클릭하거나 하는 다양한 일들이 일어납니다. 이러한 일들을 이벤트(Event)라고 부릅니다.

용어

• 이벤트 이름 : 이벤트의 이름을 나타냅니다.
• 이벤트 속성 : 특정 요소(태그)에 이벤트를 직접 연결할 때 활용하는 속성을 나타냅니다.
• 이벤트 리스너 또는 핸들러 : 특정 요소(태그)의 이벤트 속성에 연결한 함수를 나타냅니다.
• 디폴트 이벤트 : 요소(태그)가 가지고 있는 기본적인 이벤트를 나타냅니다. 예로 'a 태그를 클릭하면 href 속성에 정의한 곳으로 이동한다.' 등이 있습니다.
• 이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다. 최신 웹 브라우저는 '표준 이벤트 모델', '인라인 이벤트 모델', '기본 이벤트 모델'을 지원하지만, 구버전의 인터넷 익스플로러는 '마이크로소프트 인터넷 익스플로러 이벤트 모델', '인라인 이벤트 모델', '기본 이벤트 모델'을 지원합니다. 따라서 모든 웹 브라우저에서 정상적으로 이벤트를 사용할 수 있게 하려면 구버전과 최신 버전의 차이를 보완하는 방법이 필요합니다.

이벤트 종류

이벤트는 키보드를 이용해 버튼을 입력하거나, 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미합니다.

• 마우스 이벤트
• 키보드 이벤트
• HTML 프레임 이벤트
• HTML 입력 양식 이벤트
• 유저 인터페이스 이벤트
• 구조 변화 이벤트
• 터치 이벤트

이벤트 관련 용어 정리

window 객체의 load 이벤트

window.onload = function() {};

이렇게 window 객체의 onload 속성에 함수 자료형을 할당하는 것을 '이벤트를 연결한다'고 합니다.

이때 load를 이벤트 이름 또는 이벤트 타입(Event Type)이라고 하며 onload를 이벤트 속성이라고 합니다. 또한 이벤트 속성에 할당한 함수를 이벤트 리스너(Event Listener) 또는 이벤트 핸들러(Event Handler)라고 합니다.

이벤트 용어 연습 예

<h1 id="header">Header</h1>

window.onload = function() {
    var header = document.getElementById('header');

    function whenClick() {
        alert('click');
    }
    header.onclick = whenClick;
}

두 가지 이벤트를 연결했습니다. window 객체는 전과 같으며 header 객체의 이벤트 이름은 click, 이벤트 속성은 onclick, 이벤트 리스너는 whenClick() 함수 입니다.

header 객체

• 이벤트 이름 : click
• 이벤트 속성 : onclick
• 이벤트 리스너 : whenClick() 함수

문서 객체에 이벤트를 연결하는 방법을 이벤트 모델이라고 합니다. 이벤트 모델은 아래처럼 DOM Level 단계에 따라 두 가지로 분류할 수 있고, 다시 두 가지로 각각 나뉩니다. 따라서 총 네 가지 방법으로 이벤트를 연결할 수 있습니다.

• DOM Level 0
  - 인라인 이벤트 모델
  - 기본 이벤트 모델
• DOM Level 2
  - 마이크로소프트 인터넷 익스플로러 이벤트 모델
  - 표준 이벤트 모델

NodeJS 다운 바로가기

필요 프로그램

• NodeJS

Bundling

번들링이란 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 것을 알 수 있게 해줍니다. 정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화 시켜주는 작업을 뜻합니다. 즉, 분리된 모듈들을 하나로 합쳐준다 라고 이해하면 편합니다.

:: 모듈( Module ) : 분리된 파일

파일을 분리하는 이유는 작업의 효율성을 위해서 입니다. 스크립트의 크기가 커지고 복잡해지면 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡성이 감당이 되지 않습니다.

그렇기 때문에 하나하나 따로 떼어내 모듈로서 작업을 할 필요가 있는 것입니다.

그렇다고 모듈들이 각각 하나만으로 존재하는 독립적인 존재는 아닙니다. 다른 모듈들과 연계성을 띄어주어야 합니다.

그래서 모듈 내부에 import로 외부 모듈의 기능을 가져오고, export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보내줍니다.

이렇게 보면 import와 export하면 된다고 생각할 수 있지만, 여러 파일들을 브라우저에서 로딩하면 네트워크가 그만큼 소모되어 속도가 저하될 수 있습니다. 또한 여러 파일들을 로딩한다는건 각 모듈간의 변수 충돌등의 위험성도 일어날 수 있다는 뜻이됩니다.

이런 각각의 분리된 자바스크립트를 모아서 묶어주는 작업을 하는 것이 번들링입니다.

Bundling 도구

requireJS, AMD, UMD, ES6 모듈 등 다양하게 존재합니다. 웹팩은 이 모두를 지원해줍니다. 그리고 파일 분할 기능이 있기 때문에 원하는 코드만 따로 분리해서 압축하는 것도 가능합니다.

이러한 장점들 때문에 크고 복잡하며 다양한 리소스들이 존재하는 프로젝트에서는 웹팩을 사용하는 것이 좋습니다.

webpack 사용해보기

1. 원하는 폴더 npm init

// 생성한 폴더 내부
$ npm init

2. html, js 생성

index.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>bundling</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    
</body>
</html>

src/app.js

alert('app.js 생성완료');

3. npm install

$ npm install webpack --save-dev

$ npm install webpack-cli

// 의존성 설치
$ npm install --dev

4. webpack.config.js 생성

web.pack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

webpack 홈페이지 바로가기

5. webpack 실행하기

$ webpack

// 변경이 있을때마다 반응할 수 있도록 감지해서 번들링을 해주는 기능
$ webpack --watch

dist 파일에 bundle.js 파일이 생성된 것을 확인 할 수 있습니다.

jQuery와 함께 사용하기 + app.js에 새로운 js파일 require시키기

app.js

const data = require('./data.js');
const $ = require('jquery');

window.onload = function() {
    // 단일
    $('body').append(`<h1>이름 : ${data.group[0].name}`);
    
    // 반복문
    $.each(data.group, function(key, value) {
        $('body').append(`<h1>name${key} : ${value.name}`);
    });
}

:: window.onload : 페이지의 모든 요소들이 로드 된 이후에 호출됩니다. [ 한 페이지에 하나만 적용됩니다. 두 개 이상 사용시 뒤쪽에 사용한 window.onload가 작동합니다. ]

data.js

const group = [
    {
        name: 'shiro'
    },
    {
        name: 'new'
    },
    {
        name: 'alpha'
    },
    {
        name: 'bbb'
    },
];

module.exports = {
    group: group
}

app.js에서 css 가져오기

1. npm install

$ npm install css-loader style-loader --save-dev

2. 규칙설정하기

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
        ]
    },
    mode: 'development'
}

mode: 'development' 적용 이유

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

mode가 설정되지 않아서 production모드인지 development모드인지를 설정해 줍니다.

dev-server 설치하기

1. npm install

$ npm install webpack-dev-server --save

$ npm install --save-dev html-webpack-plugin

html-webpack-plugin : webpack 번들을 제공하는 html파일 생성을 단순화 시켜줍니다.

2. package.json 설정하기

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --entry ./src/app.js --output-filename ./dist/bundle.js --open"
  },

3. webpack.config.js 설정하기

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
        ]
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
}

4. npm start

$ npm start

실행시켜주면 아래 그림처럼 localhost:8081이 작동됩니다.

babel 설정하기

1. npm install

$ npm install --save-dev babel-loader @babel/cli @babel/core @babel/preset-env

@babel/cli : 터미널에서 바벨 명령어를 사용할 수 있도록 도와줍니다.

@babel/core : 바벨의 핵심 기능을 포함합니다.

@babel/preset-env : ES6의 문법을 ES5의 문법으로 사용할 수 있도록 ES6의 문법을 트랜스파링을 해주는 플러그인입니다.

2. webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    presets: ['@babel/preset-env']
                }
            },
        ]
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
}

3. ./dist/index.html 열어보기

index.html 파일이 생성되고, 실행시켰을때 정상작동되는 것을 확인할 수 있습니다.

문서 객체의 스타일 조작

문서 객체의 style 속성을 사용하면 해당 문서 객체의 스타일을 변경할 수 있습니다.

body 태그 구성

<body>
    <h1 id="header">Header</h1>
</body>

문서 객체의 스타일 지정 예

window.onload = function() {
    var header = document.getElementById('header');

    header.style.border = '1px solid #DDD';
    header.style.color = 'orange';
    header.style.fontFamily = 'helvetica';
}

위 코드처럼 style을 지정해서 여러 스타일을 넣을 수 있습니다.

스타일 속성 이름

자바스크립트에서는 특수 기호 '-'를 식별자에 사용할 수 없으므로 입력하면 오류가 발생합니다.

스타일 식별자 변환

문자열로 접근하면 두가지 방법 모두 사용할 수 있습니다.

문자열로 문서 객체의 스타일 지정 예

document.body.style['backgroundColor'] = 'red';
document.body.style['background-color'] = 'red';

문서 객체 제거

문서 객체를 제거할 때는 문서 객체가 갖는 제거 메서드를 사용합니다.

문서 객체의 제거 메서드

body 태그 구성

<body>
    <h1 id="will-remove>Header</h1>
</body>

문서 객체의 제거

window.onload = function() {
    var willRemove = document.getElementById('will-remove');

    document.body.removeChild(willRemove);
}

위 코드는 body 문서 객체 바로 아래에 제거하고자 하는 문서 객체가 있으므로 사용 가능한 코드입니다.

일반적으로 문서 객체를 제거할 때는 아래와 같이 사용합니다.

window.onload = function() {
    var willRemove = document.getElementById('will-remove');

    willRemove.parentNode.removeChild(willRemove);
}

아래 그림처럼 h1 태그에서 부모 노드로 이동하고 부모 노드에서 자식 노드를 삭제한 것입니다.

parentNode와 childNode의 관계

문서 객체를 사용한 시계

body 태그 구성

<body>
    <h1 id="clock"></h1>
</body>

문서 객체 설정

window.onload = function() {
    var clock = document.getElementById('clock');
};

아래 코드처럼 setInterval() 함수로 1초마다 clock 문서 객체의 innerHTML 속성을 현재 시각으로 변경합니다.

현재 시각 표시

window.onload = function() {
    var clock = document.getElementById('clock');

    setInterval(() => {
        clock.innerHTML = new Date().toString();
    }, 1000);
};

setInterval() 함수를 사용했기 때문에 1초마다 시간이 바뀌게 됩니다.

문서 객체를 사용한 움직임 구현

body 태그 구성

<h1 id="sun">@</h1>
<h1 id="earth">0</h1>
<h1 id="moon">*</h1>

문서 객체

window.onload = function() {

    var sun = document.getElementById('sun');
    var earth = document.getElementById('earth');
    var moon = document.getElementById('moon');

    // 문서 객체의 스일 속성 변경
    sun.style.position = 'absolute';
    earth.style.position = 'absolute';
    moon.style.position = 'absolute';
    sun.style.left = 250 + 'px';
    sun.style.top = 200 + 'px';

    // 변수 선언
    var earthAngle = 0;
    var moonAngle = 0;

    // 애니메이션 시작 [ 30FPS(Frames Per Second) ]
    setInterval(function() {
        var earthLeft = 250 + 150 * Math.cos(earthAngle);
        var earthTop = 200 + 150 * Math.sin(earthAngle);
        var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
        var moonTop = earthTop + 50 * Math.sin(moonAngle);

        // 위치 이동
        earth.style.left = earthLeft + 'px';
        earth.style.top = earthTop + 'px';
        moon.style.left = moonLeft + 'px';
        moon.style.top = moonTop + 'px';

        // 각도 변경
        earthAngle += 0.1;
        moonAngle += 0.3;
    }, 1000 / 30)
};

문서 객체와 객체지향을 사용한 움직임 구현

보조함수

// 랜덤한 정수를 생성
function nextRandomInteger(limit) {
    return Math.round(Math.random() * limit);
}

// 랜덤한 알파벳을 리턴하는 함수
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

function randomAlphabet() {
    return alphabet.charAt(nextRandomInteger(25));
}

// 양수와 음수로 랜덤한 속도를 생성하는 함수
function randomSpeed(maxSpeed) {
    return Math.random() * maxSpeed - Math.random() * maxSpeed;
}

생성자 함수

// MovingText의 생성자 함수
var canvasWidth = 700;
var canvasHeight = 400;

function movingText() {
    // 위치와 속도 속성
    this.x = nextRandomInteger(canvasWidth);
    this.y = nextRandomInteger(canvasHeight);
    this.vx = randomSpeed(5);
    this.vy = randomSpeed(5);

    // 문서 객체를 생성
    this.body = document.createElement('h1');
    this.body.innerHTML = randomAlphabet();
    this.body.style.position = 'absolute';

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

movingText.prototype.move = function() {
    // 범위 검사
    if(this.x < 0 || this.x > canvasWidth) this.vx *= -1;
    if(this.y < 0 || this.y > canvasHeight) this.vy *= -1;

    // 이동
    this.x += this.vx;
    this.y += this.vy;

    // 화면에 이동 표시
    this.body.style.left = this.x + 'px';
    this.body.style.top = this.y + 'px';
};

window.onload 부분

// 변수 선언
var movingTexts = [];

// 배열에 movingText 객체를 100개 생성
for(var i = 0; i < 100; i++) {
    movingTexts.push(new movingText());
}

setInterval(() => {
    for(var i in movingTexts) {
        movingTexts[i].move();
    }
}, 1000 / 30);

클로저 활용하기

랜덤한 알파벳을 리턴하는 함수

// 랜덤한 알파벳을 리턴하는 함수
function randomAlphabet() {
    var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    
    return alphabet.charAt(nextRandomInteger(25));
}

여러 프로그램에 으용할 수 있는 내용이므로 복사해서 사용하기 좋지만 해당 코드에서 변수 alphabet을 재정의하면 안되기 때문에 위처럼 내부 변수로 만들어주는 것이 안전합니다.

하지만 이 함수를 100번 사용하면 변수 alphabet이 메모리에서 100번 생성되고 100번 제거되는 일이 발생합니다. 따라서 아래처럼 외부에는 공개되지 않는 변수를 생성하는 것이 좋습니다.

클로저 활용 예

var randomAlphabet = (function() {
    var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    
    return function() {
        return alphabet.charAt(nextRandomInteger(25));
    }
})();

문서 객체 가져오기

웹 페이지에 이미 존재하는 HTML 태그를 자바스크립트로 가져오는 방법입니다.

document 객체의 문서 객체 선택 메서드 1

body 태그 구성하기 예

<body>
    <h1 id="header1">Header</h1>
    <h1 id="header2">Header</h1>
</body>

document 객체의 getElementById() 메서드는 id 속성을 갖는 태그만 가져올 수 있으므로 id 속성을 입력했습니다.

getElementById() 메서드 예

window.onload = function() {
    var header1 = document.getElementById("header1");
    var header2 = document.getElementById("header2");
};

문서 객체의 innerHTML 속성 변경

window.onload = function() {
    var header1 = document.getElementById("header1");
    var header2 = document.getElementById("header2");

    header1.innerHTML = 'with getElementById()';
    header2.innerHTML = 'with2 getElementById()';
};

문서 객체 가져오기 2

document 객체의 getElementById() 메서드는 한 번에 한 가지 문서 객체만 가져올 수 있습니다. 반면에 document 객체가 갖는 아래 표에 있는 메서드를 사용하면 한 번에 여러 개의 문서 객체를 가져올 수 있습니다.

document 객체의 문서 객체 선택 메서드 2

document.getElementByTagName() 메서드

window.onload = function() {
    var headers = document.getElementsByTagName('h1');
};

변수 headers는 문서 객체를 갖는 배열이며, HTML 페이지의 h1 태그가 순서대로 들어옵니다.

문서 객체 배열의 사용 예

window.onload = function() {
    var headers = document.getElementsByTagName('h1');
    for(var i = 0; i < headers.length; i++) {
        headers[i].innerHTML = `with${i + 1} getElementsByTagName()`;
    }
};

코드를 실행하면 문서 객체의 innerHTML 속성이 변경된 것을 확인할 수 있습니다.

문서 객체 배열에 for in 반복문을 사용하면 안되는 이유

for in 반복문을 사용하면 안되는 이유는 문서 객체 이외의 속성에도 접근하기 때문입니다.

잘못된 문서 객체 배열의 사용 예

window.onload = function() {
    var headers = document.getElementsByTagName('h1');

    output = '';
    for(var i in headers) {
        output += i + '\n';
    }
    console.log(output);
};

/*
0
1
length
item
namedItem
*/

위 코드를 실행하면 웹 브라우저마다 출력하는 속성과 메서드의 종류와 개수에 차이가 있을 수 있습니다.

따라서 getElementsByTagName() 메서드로 가져온 객체는 꼭 단순 for 반복문을 사용합니다.

getElementsByName() 메서드도 사용 방법이 같습니다.

문서 객체 가져오기 3

HTML5부터 document 객체에 아래와 같은 메서드가 추가되었습니다.

document 객체의 문서 객체 선택 메서드 3

이는 CSS 선택자로 문서 객체를 선택하는 메서드입니다.

document.querySelector() 메서드 예

window.onload = function() {
    var header1 = document.querySelector('#header1');
    var header2 = document.querySelector('#header2');

    header1.innerHTML = 'width';
    header2.innerHTML = 'width2';
}

문서 객체

문서 객체는 가장 기본적으로 텍스트 노드를 갖는 문서 객체와 텍스트 노드를 갖지 않는 문서 객체로 구분할 수 있습니;다.

body 태그 구성

<body>

</body>

현재 body 태그에는 내용이 없으므로 아무것도 출력하지 않습니다.

텍스트 노드를 갖는 문서 객체를 생성하려면 요소 노드와 텍스트 노드를 생성하고 텍스트 노드를 요소 노드에 붙여줍니다.

document 객체의 노드 생성 메서드

문서 객체 생성 예

window.onload = function() {
    var header = document.createElement('h1');
    var textNode = document.createTextNode('hello DOM');
};

위 코드 상황

화면에 문서 객체를 출력하려면 생성한 문서 객체를 body 문서 객체에 연결해야 합니다.

문서 객체의 연결 메서드

appendChild() 메서드로 body 문서 객체에 header 문서 객체를 추가합니다.

문서 객체 연결 예

window.onload = function() {
    var header = document.createElement('h1');
    var textNode = document.createTextNode('Hello DOM');

    // 노드 연결하기
    header.appendChild(textNode);
    document.body.appendChild(header);
};

코드를 실행하면 아래처럼 모델을 형성합니다.

HTML 페이지의 DOM 형태

문서 객체 2

텍스트 노드를 갖지 않는 노드 생성 방법. 텍스트 노드를 갖지 않는 대표적인 HTML 태그는 img로 텍스트 노드 대신에 많은 속성이 있습니다. 사실 자바스크립트의 문서 객체 모델은 속성도 하나의 노드로 갖습니다.

문서 객체 생성

window.onload = function() {
    var img = document.createElement('img');

    document.body.appendChild(img);
}

img 태그를 생성하고 body 문서 객체에 연결합니다.

img 태그에 이미지를 넣으려면 src 속성을 지정해야 합니다. 속성을 지정하는 방법은 아래 코드와 같습니다.

문서 객체의 속성 지정 예

window.onload = function() {
    var img = document.createElement('img');
    img.src = './img/test.png';
    img.width = 500;
    img.height = 300;

    document.body.appendChild(img);
}

이 방법은 웹 표준에서 정의하거나 웹 브라우저가 지원하는 태그의 속성에만 사용할 수 있습니다. 그렇지 않다면 이 방법을 사용할 수 없습니다. 예를 들어 SVG 태그는 웹 브라우저에서 이러한 방식을 지원하지 않기 때문에 이 방법을 사용할 수 없습니다. 웹 브라우저가 지원하지 않는 속성은 아래 표의 메서드를 사용해야 속성을 넣을 수 있습니다.

문서 객체의 속성 메서드

문서 객체의 속성 지정2 예

window.onload = function() {
    var img = document.createElement('img');
    img.setAttribute('src', './img/test.png');
    img.setAttribute('width', 500);
    img.setAttribute('height', 300);

    // setAttribute() 메서드를 사용하지 않으면 불가능합니다.
    img.setAttribute('data-property', 300);

    document.body.appendChild(img);
}

위 코드에 data-property 속성은 이전 코드 방식으로는 넣을 수 없습니다.

문서 객체 3

위 문서 객체 1, 2는 노드를 만들고 연결하는 방법입니다. 일반적으로는 위 코드보다 더 쉬운 방법을 사용합니다.

바로 문서 객체의 innerHTML 속성을 사용하는 것입니다.

문서 객체의 innerHTML 속성은 아래처럼 태그의 내부를 의미하는 속성입니다.

innerHTML 속성은 아래 코드처럼 사용합니다. 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체를 생성해줍니다.

문서 객체의 innerHTML 속성

window.onload = function() {
    var output = '';

    document.body.innerHTML = output;
};

innerHTML 속성을 사용한 문서 객체 생성 예

window.onload = function() {
    var output = '';
    output +=
    `
        <ul>
            <li>Javascript</li>
            <li>jQuery</li>
            <li>Ajax</li>
        </ul>
    `;

    document.body.innerHTML = output;
};

문서 객체에 내용을 추가하고 싶다면 innerHTML 속성에 아래처럼 복합 대입 연산자로 문자열을 추가합니다.

document.body.innerHTML += '<h1>document object model</h1>';

textContent 속성

만약 화면에 문자열 '<h1>document object model</h1>'을 화면에 그대로 출력하고 싶은 경우에는 innerHTML에 &lt;h1&gt;document object model&lt;/h1&gt;를 적으면 되지만 복잡하고 귀찮기 때문에 textContent 속성을 사용합니다.

문서 객체의 textContent 속성 예

window.onload = function() {
    var output = '';
    output +=
    `
        <ul>
            <li>Javascript</li>
            <li>jQuery</li>
            <li>Ajax</li>
        </ul>
    `;

    document.body.textContent = output;
    document.body.textContent += '<h1>document object model</h1>';
};

단, textContent 속성은 인터넷 익스플로러 7 버전 이하에서는 지원하지 않습니다.