조작 API
* 문자를 제어하는 API
- 종류
* appendData() : 인자로 추가 할 텍스트를 넘겨주어 마지막에 추가한다.
* deleteData() : 첫번째 인자부터 두번째 인자까지 텍스트 삭제
* insertData() : 두번째 인자로 삽입할 텍스트를 넘겨주어 첫번째 인자부터 텍스트를 삽입한다.
* replaceData() : 세번째 인자로 변경할 텍스트를 넘겨주어 첫번째 인자부터 두번째인자까지 변경한다.
* substringData() : 첫번째 인자부터 두번째 인자까지의 텍스트를 반환한다.
- 예제
<body> <p id="target">HTML! CSS</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" onclick="AppendData()" /> <input type="button" value="deleteData" onclick="DeleteData()" /> <input type="button" value="insertData" onclick="InsertData()" /> <input type="button" value="replaceData" onclick="ReplaceData()" /> <input type="button" value="substringData" onclick="SubstringData()" /></p> <script> var target = document.getElementById('target').firstChild; // 텍스트 노드를 변수로 넘겨줌. var data = document.getElementById('datasource'); var start = document.getElementById('start'); var end = document.getElementById('end'); // 이벤트 함수 function AppendData(){ target.appendData(data.value); } function DeleteData(){ target.deleteData(start.value, end.value); } function InsertData(){ target.insertData(start.value, data.value); } function ReplaceData(){ target.replaceData(start.value, end.value, data.value); } function SubstringData(){ alert(target.substringData(start.value, end.value)); } </script>
- 결과
HTML! CSS
data :
start :
end :
'WEB > JavaScript' 카테고리의 다른 글
| 이벤트 (0) | 2016.10.16 |
|---|---|
| 요소의 위치와 크기 (0) | 2016.10.16 |
| Text 객체 : 값 API (0) | 2016.10.16 |
| Text 객체 (0) | 2016.10.16 |
| Document 객체 (0) | 2016.10.16 |
