01 문서 객체(document) 모델
● 동적으로 문서 객체 만들기
○ 정적으로 문서 객체 생성 : 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는 것
○ 동적으로 문서 객체 생성 : 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것
1) 요소 노드 : HTML 태그
2) 텍스트 노드 : 요소 노드 안에 들어 있는 글자
3) 택스트 노드를 갖는 문서 객체 / 갖지 않는 문서 객체로 구분 가능
● 문서 객체 생성
1) 텍스트 노드를 갖는 문서 객체 생성
■ 요소 노드와 텍스트 노드를 생성하고 텍스트 노드를 요소 노드에 붙여 줌
■ document 객체의 노드 생성 메서드
□ createElement(tagName) : 요소 노드 생성
□ createTextNode(text) : 텍스트 노드 생성
window.onload = function () { // 변수 선언
var header = document.createElement('h1’);
var textNode = document.createTextNode('Hello DOM');
}；
□ 이 노드들을 서로 연결해 줘야 함
■ appendChild(node) 객체에 노드를 연결
<script>
window.onload = function () {
// 변수 선언
var header = document.createElement('h1');
var textNode = document,createTextNode('Hello DOM');
// 노드 연결
header.appendChiId(textNode);
document.body.appendChild(header);
}；
</script>
2) 텍스트 노드를 갖지 않는 노드 생성
■ img 태그
□ window.onload = function () {
// 변수를 선언하고 속성을 지정!
var img = document,createElement('img');
img.src = 'Penguins.jpg';
img.width = 500;
img.height = 350;
// 노드를 연결합니다.
document.body.appendChild(img);
}；
□ 객체 속성 메서드 사용해서 지정
□ data-property 속성은 setAttribute 메서드 사용해야만 함
img.setAttribute(‘src‘, 'Penguins.jpg');
img.setAttribute('width', 500);
img.setAttribute('height’, 350);
img.setAttribute('data-property‘, 350);
3) 문서 객체의 innerHTML속성 사용하여 문서 객체 만들기
■ innerHTML 속성 : 태그의 내부를 의미하는 속성(document 객체 내 모든 태그 가능)
■ 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체를 생성
■ 복합 대입연산자로 문자열 추가하면 됨
window.onload = function () {
// 변수를 선언합니다.
var output = ‘ ‘；
output += ’〈ul>‘;
output += ' 〈li〉〕avaScript</li〉’；
output += ' <li>jQuery</li>'；
output += ' <li〉Ajax〈/li〉‘；
output += '</ul>'；
// innerHTML 속성에 문자열을 할당합니다.
document.body.innerHTML = output;
};
● 문서 객체 가져오기
1) getElementById(id) : 태그 속성이 id인 매개변수와 일치하는 문서 객체 가져옴
■ 한 번에 한 가지 문서 객체만 가져올 수 있음
■ var headerl = document.getElementById('header-1');
<body>
<h1 id="header-1 ''>Header</h1>
</body>
■ 문서 객체 속성 변화 (innerHTML 메서드로 내부에 넣기)
headerl.innerHTML = 'with getElementByld( )’;
2) get티ementsByName(name), getElementsByTagName(tagName)
■ 한 번에 여러 개의 문서 객체를 가져옴
■ get티ementsByName(name) : 태그 속성이 name인 매개변수와 일치하는 문서 객체를 배열로 가져옴
■ getElementsByTagName(tagName) : tagName 매개변수와 일치하는 문서 객체를 배열로 가져옴
var headers = document,getElementsByTagName('hi');
■ headers[i]로 for 반복문 사용해 인덱스로 접근하면서 접근하면 됨.
■ for in 반복문은 문서 객체 이외의 속성에도 접근하므로 사용하면 안됨
3) queryselector(선택자), querySelectorAII(선택자)
■ CSS 선택자로 문서 객체를 선택하는 메서드
■ queryselector(선택자) : 선택자로 가장 처음 선택되는 문서 객체를 가져옴
■ querySelectorAII(선택자) : 선택자를 통해 선택되는 문서 객체를 배열로 가져옴
■ var headerl = document.querySelector(' #header-1');
■ 자바스크립트는 특수기호 ‘-‘를 식별자로 사용 X -> 스타일 속성의 –를 없애고 카멜 표기로 바꿔서 사용해야 함
● 문서 객체 제거
○ removeChild(child)
■ 문서 객체의 자식 노드를 제거
var willRemove = document,getElementById(‘will-remove’);
// 문서 객체를 제거합니다.
document. body. removeChild(willRemove);
■ 제거 대상인 태그에서 부모 노드로 이동하고, 부모 노드에서 자식 노드를 삭제함
'JavaScript & JQuery' 카테고리의 다른 글
| [Javascript][이론]이벤트 (0) | 2020.09.10 |
|---|---|
| [Javascript][이론]브라우저 객체 (0) | 2020.09.09 |