텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.
- appendData()
- deleteData()
- insertData()
- replaceData()
- substringData()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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> |
