Text 객체
1. 소개
텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다.
아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다.
<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);
</script>
-->DOM에서는 공백조차도 분명히 존재하는 객체에 매핑되어 있다.
실행결과)
Hello world
TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}
Hello world
2. 주요 기능
(1) 값
텍스트 노드의 값을 가져오는 API
- data
- nodeValue
(2) 조작
- appendData()
- deleteData()
- insertData()
- replaceData()
- subStringData()
(3) 생성
- docuemnt.createTextNode()
3. 값 API
텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다
- nodeValue
- data
<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>
t.nodeValue="!!": 텍스트의 문자 값이 '!!'로 바뀐다.
4. 조작 API
텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.
- appendData()
- deleteData()
- insertData()
- replaceData()
- substringData()
<!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>
'WebFont-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 이벤트 등록방법 (0) | 2014.12.25 |
|---|---|
| [JavaScript] 이벤트 (0) | 2014.12.25 |
| [JavaScript] Document 객체 (0) | 2014.12.23 |
| [JavaScript] Node 객체 (1) | 2014.12.23 |
| [JavaScript] Element 객체 (0) | 2014.12.22 |