반응형
27. Text 객체 값 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>
28. Text 객체 조작 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>
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 javascript 정리 - 기본동작의 취소 (0) | 2017.08.15 |
|---|---|
| 생활코딩 javascript 정리 - 이벤트 등록방법(inline) (0) | 2017.08.13 |
| 생활코딩 javascript 정리 - 이벤트 (0) | 2017.08.09 |
| 생활코딩 javascript 정리 - 문서의 기하학적 특성 (0) | 2017.08.06 |
| 생활코딩 javascript 정리 - Text 객체 (0) | 2017.08.05 |
| 생활코딩 javascript 정리 - Document 객체 (0) | 2017.08.01 |
| 생활코딩 javascript 정리 - 문자열로 노드 제어 (0) | 2017.07.31 |
| 생활코딩 javascript 정리 - jQuery Node 변경 API (0) | 2017.07.30 |