[ Javascript ] 문서 객체 만들기

2022. 6. 29. 12:36

문서 객체

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

body 태그 구성

<body>

</body>

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

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

document 객체의 노드 생성 메서드

메서드	설명
createElement(tagName)	요소 노드를 생성합니다.
createTextNode(text)	텍스트 노드를 생성합니다.

문서 객체 생성 예

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

위 코드 상황

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

문서 객체의 연결 메서드

메서드	설명
appendChild(node)	객체에 노드를 연결합니다.

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 태그는 웹 브라우저에서 이러한 방식을 지원하지 않기 때문에 이 방법을 사용할 수 없습니다. 웹 브라우저가 지원하지 않는 속성은 아래 표의 메서드를 사용해야 속성을 넣을 수 있습니다.

문서 객체의 속성 메서드

메서드	설명
setAttribute(name, value)	객체의 속성을 지정합니다.
getAttribute(name)	객체의 속성을 가져옵니다.

문서 객체의 속성 지정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에 <h1>document object model</h1>를 적으면 되지만 복잡하고 귀찮기 때문에 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 버전 이하에서는 지원하지 않습니다.

저작자표시 비영리 변경금지

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 문서 객체 스타일 조작 (0)	2022.07.01
[ Javascript ] 문서 객체 가져오기 (0)	2022.06.30
[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model ) (0)	2022.06.28
[ Javascript ] 웹 API (0)	2022.06.28
[ Javascript ] window 객체의 기본 메서드 (0)	2022.06.27

코린이[코딩 어린이]