문서 객체 모델

문서 객체 모델

넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다.

요소노드란 HTML 태그를, 텍스트 노드는 요소노드 안에 있는 글자를 의미한다.

웹페이지가 처음  HTML  페이지에 적혀 있는 태그들을 읽으며 생성하는 것을 "정적으로 문서 객체를 생성한다"라고 표현한다.

반면, 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것을 "동저긍로 문서 객체를 생성한다"라고 표현한다.

-----------------------------------------------------------------------------------------

createElement(tagName)

요소 노드를 생성한다

createTextNote(text)

텍스트 노드를 생성한다

appendChild(node)

객체에 노드를 연결한다.

예제)

<script>

window.onload = function(){

//변수 선언

var header = document.createElement('h1');

var textNode = document.createTextNode("Hello DOM");

//노드연결

header.appendChild(textNode);

document.body.appendChild(header);

}

</script>

-----------------------------------------------------------------------------------------

문서 객체의 속성 지정

<script>

window.onload = function(){

//변수 선언

var img = document.createElement('img');

img.src = 'Penguins.jpg';

img.width = 500;

img.height = 350;

// 노드 연결

document.body.appendChild(img);

}

</script>

But, 웹브라우저가 지원하지 않는 속성을 추가할때는 다른 메서드를 사용해야한다.

setAttribute(name, value)

객체의 속성을 지정합니다.

getAttribute(name)

객체의 속성을 가져옵니다.

-----------------------------------------------------------------------------------------

innerHTML

문자열을 innerHTML 속성에 넣기만 하면 문서 객체를 생성해줌.

예제

<script>

window.onload = function(){

// 변수 선언

var output = '';

// innerHTML 속성에 문자열 할당

document.body.innerHTML = output;

}

</script>

-----------------------------------------------------------------------------------------

문서객체가져오기

getElementById(id)

태그의 id 속성이 id와 일치하는 문서 객체를 가져옵니다.

getElementsByName(name)

태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옵니다.

getElementsByTagName(tagName)

tagName과 일치하는 문서 객체를 배열로 가져온다.

document.querySelector(선택자)

선택자로 가장 처음 선택되는 문서 객체를 가져온다.

document.querySelectorAll(선택자)

선택자로 선택되는 문서 객체를 배열로 가져온다.

-----------------------------------------------------------------------------------------

문서 객체 제거

removeChild(child)

문서 객체의 자식 노드를 제거한다.

*일반적으로 문서 객체를 제거할 때는 부모 노드로 이동해서 자식 노드를 삭제하는 방법을 사용한다.