도큐먼트 객체
Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용됩니다.
HTMLDocument 객체
HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있습니다.
아래 코드는 이를 보여주고 있습니다.
JavaScript
//document 객체는 window 객체의 소속이다.
console.log(window.document);
//document 객체의 자식으로는 Doctype과 html이 있다.
console.log(window.document.childNodes[0]);
console.log(window.document.childNodes[1]);
노드 생성 API
document 객체의 주요 임무는 새로운 노드를 생성해주는 역할입니다.
이에 대한 내용은 노드 변경 API에서 확인할 수 있습니다.
- createElement()
- createTextNode()
문서 정보 API
- title
- URL
- referrer
- lastModified
Text 객체
텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받습니다.
아래는 텍스트 노드를 찾는 예제입니다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점입니다.
html
<p id="target1"><span>Hello world</span></p>
<p id="target2">
<span>Hello world</span>
</p>
<script>
var t1 = document.getElementById('target1').firstChild;
var t2 = document.getElementById('target2').firstChild;
console.log(t1.firstChild.nodeValue);
try{
console.log(t2.firstChild.nodeValue);
} catch(e){
console.log(e);
}
console.log(t2.nextSibling.firstChild.nodeValue);
// 콘솔 실행 결과
Hello world
TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}
Hello world
</script>주요 기능
텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 아래는 값을 가져오는 두개의 API 입니다.
값 : 텍스트 노드의 값을 가져오는 API
- data
- nodeValue
html
<ul>
<li id="target">html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
var t = document.getElementById('target').firstChild;
console.log(t.nodeValue);
console.log(t.data);
</script>텍스트 조작하기
텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공합니다.
아래는 조작과 관련된 API들의 목록입니다.
- appendData()
- deleteData()
- insertData()
- replaceData()
- subStringData()
html
<!DOCTYPE html>
<html>
<head>
<style>
#target{
font-size:77px;
font-family: georgia;
border-bottom:1px solid black;
padding-bottom:10px;
}
p{
margin:5px;
}
</style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p> start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" />
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" />
<input type="button" value="insertData(start,data)" onclick="callInsertData()" />
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" />
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p>
<script>
var target = document.getElementById('target').firstChild;
var data = document.getElementById('datasource');
var start = document.getElementById('start');
var end = document.getElementById('end');
function callAppendData(){
target.appendData(data.value);
}
function callDeleteData(){
target.deleteData(start.value, end.value);
}
function callInsertData(){
target.insertData(start.value, data.value);
}
function callReplaceData(){
target.replaceData(start.value, end.value, data.value);
}
function callSubstringData(){
alert(target.substringData(start.value, end.value));
}
</script>
</body>
</html>텍스트 생성하기
- docuemnt.createTextNode()
[출처] 생활코딩
Jaehee's e-room
'JavaScript > DOM(Document Object Model)' 카테고리의 다른 글
| HTMLElement, HTMLCollection 객체와 DOM 트리 (0) | 2016.03.07 |
|---|---|
| event 란 무엇인가? (0) | 2016.03.04 |
| Node Object(노드 객체) (0) | 2016.03.02 |
