createElement , createTextNode , appendChild, setAttribute , getAttribute
문서 객체는 가장 기본적으로 텍스트 노드를갖는 문서 객체와 텍스트 노드를 갖지 않는 문서 객체로 구분할 수 있다.
다음은 텍스트 노드를 갖는 h1태그를 생성하면서 문서 객체를 생성하는 방법을 보여준다.
<body>
</body>body 태그에는 내용이 없기때문에 아무것도 출력하지 않는다.
텍스트 노드를 갖는 문서 객체를 생성하기 위해서는 요소 노드와 텍스트노드를 생성하고, 텍스트 노드를 요소 노드에 붙여준다.
노드를 생성하는 메서드이다.
createElement(tagName) : 요소 노드를 생성한다.
createTextNode(text) : 텍스트 노드를 생성한다.
window.onload = function (){
var header = document.createElement('h1');
var textNode = document.createTextNode('Hi Dom');
}코드를 실행하면 아무런 결과가 나타나지 않는다.
트리구조로 나타내면 아래와같은 상황이다.
html
┌────┴────┐
head body
│
script h1 "Hi Dom"
document 문서 객체에 h1 요소노드와 "Hi Dom" 텍스트노드를 생성하긴 했지만 h1태그의 요소노드를 생성한 문서객체가 body 문서 객체에 연결되어있지 않았기 때문이다.
또한 요소노드와 텍스트노드가 서로 연결되어야 한다.
문서 객체에서 노드와 노드를 연결할 때 사용하는 메서드는 다음과 같다.
appendChild(node) : 객체에 노드를 연결한다
window.onload = function (){
//문서객체에 노드 생성
var header = document.createElement('h1');
var textNode = document.createTextNode('Hi Dom');
//생성한 노드 연결
header.appendChild(textNode);
document.body.appendChild(header);
}appendChild( )메서드로 body문서에 header문서 객체를 추가한다 (body노드에 header노드를 연결한다)
속성 메서드
다음은 텍스트 노드를 갖지 않는 노드를 생성하는 방법을 살펴본다
텍스트 노드를 갖지 않는 대표적인 HTML 태그는 img이다.
img태그는 텍스트 노드 대신 많은 속성이 있다.
자바스크립트의 문서 객체 모델은 속성도 하나의 노드로 갖는다.
window.onload = function () {
var img = document.createElement('img');
document.body.appendChild(img);
}문서 객체에 img 요소노드를 생성한 후 img 변수에 저장하고난 뒤 저장된 img 문서객체를 문서객체의 body태그에 추가하여 노드를 연결한다.
img태그에 이미지를 넣으려면 src속성을 지정해야한다.
window.onload = function () {
var img = document.createElement('img');
img.src = 'img.jpg';
img.width = 500;
img.height = 350;
document.body.appendChild(img);
}문서 객체에 img요소노드를 생성한 후 img변수에 저장하고 저장된 img 요소노드 문서객체의 src 속성과 width, height 속성들의 값을 각각 초기화한 다음, 작업이 완료된 객체를 문서객체의 body태그 요소노드에 추가하여 노드를 연결한다.
이렇게 속성을 초기화하는 방법은 웹 표준이 정의하거나 웹 브라우저가 지원하는 태그의 속성에만 사용할 수 있다.
웹 브라우저가 지원하지 않는 속성은 특정 메서드를 사용해야 속성을 넣을 수 있으며 해당 메서드는 다음과 같다
setAttribute(name, value) : 객체의 속성을 지정한다.
getAttribute(name) : 객체의 속성을 가져온다.
window.onload = function () {
var img = document.createElement('img');
img.setAttribute('src', 'img.jpg');
img.setAttribute('width',500);
img.setAttribute('height',350);
img.setAttribute('data-property',350);
document.body.appendChild(img);
}data-property는 웹 표준이 정의하지 않은 속성이므로 이전 방식으로는 속성을 추가할 수 없기 때문에 setAttribute( ) 메서드를 통해 속성을 추가한다.
data-*
data-property 속성은 개발자가 임의로 지정한 속성으로, 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두. data-*속성은 표준이 아닌속성이나 추가적인 DOM 속성 등 다른 조작을 하지않고도, 의미론적으로 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다.
HTML5에서 지원한다.
img[data-property=350] {
//속성 제어
}css에서 위의 코드와 같이 접근할 수 있다.
innerHTML
지금까지 구현해본 문서객체를 생성하는 방법은 노드를 만들고 연결하는 방법이다.
보다 더 쉬운방법으로는 innerHTML속성을 사용한다.
innerHTML 속성은 태그의 내부를 의미하는 속성이다.
<h1> Hi Dom ~! </h1>
── ───── ──
여는태그 innerHTML속성 닫는태그
innerHTML 속성은 다음과 같이 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체를 생성해 준다.
window.onload = function () {
var output = '';
document.body.innerHTML = output;
}
innerHTML 속성을 사용하여 문서 객체를 생성해보자
window.onload = function () {
var output = '';
output += '<ul>';
output += ' <li>Java Script</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '<ul>';
document.body.innerHTML = output;
}
문서 객체를 생성하고 내용을 더 추가하고 싶다면 innerHTML속성에 복합대입연산자 +=를 사용하여 문자열을 추가한다.
window.onload = function () {
var output = '';
output += '<ul>';
output += ' <li>Java Script</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '<ul>';
document.body.innerHTML = output;
document.body.innerHTML += '<h1>Document Object Model</h1>';
}
textContent
만약 문자열 '<h1>Document Object Model</h1>' 을 그대로 화면에 출력하고 싶으면 어떻게 해야할까?
그런 경우에는 innerHTML속성에 '<h1>Document Object Model</h1>' 와 같이 형태를 바꿔야 한다.
< 는 < (lessthan) 을 뜻하고 > 는 > (greather than)을 뜻하는 특수기호이다.
이렇게 기호를 변경하여 사용하면 많은 귀찮음이 발생하므로 다음과 같이 textContent속성을 사용한다.
window.onload = function () {
var output = '';
output += '<ul>';
output += ' <li>Java Script</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '<ul>';
document.body.textContent = output;
document.body.textContent += '<h1>Document Object Model</h1>';
}코드가 딱 두곳이 변경되었다.
바로 innerHTML속성 대신 textContent를 사용하였다.
'JavaScript > DOM & Event' 카테고리의 다른 글
| 이벤트 - DOM Level 0 : 고전 이벤트 모델 (0) | 2022.01.20 |
|---|---|
| 문서객체 스타일조작, 제거 removeChild( ), parentNode, appendChild( ), childNode (0) | 2022.01.19 |
| 문서객체 가져오기 getElementBy (Id, Name,TagName, class) / querySelector (0) | 2022.01.19 |
| 문서객체 DOM (Document Object Model) (0) | 2022.01.18 |
| window객체와 이벤트 (BOM/DOM) window.onload (0) | 2022.01.18 |