조작 API

문자를 제어할 수 있는 다양한 API 제공

조작API(CharacterData 객체)

appendData(data) : data를 선택된 text요소 뒤에 붙임
deleteData(start, end) : text요소의 start index 부터 end의 개수만큼 삭제
insertData(start, data) : text요소의 start index 에 data를 붙임
replaceData(start, end, data) : text요소의 start index에서 부터 end 개수 만큼의 문자열과 data를 바꿈
substringData(start, end) : text요소의 start index에서 부터 end 개수 만큼 문자열을 반환

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1 id="target">Hello World!!</h1>
  <p>data : <input type="text" id="dataSource" value="test"></p>
  <p>start : <input type="text" id="start" value=5></p>
  <p>end : <input type="text" id="end" value=5></p>
  
  <input type="button" value="appendData(data)" onclick="fn_appendData()">
  <input type="button" value="deleteData(start, end)" onclick="fn_deleteData()">
  <input type="button" value="insertData(start, end)" onclick="fn_insertData()">
  <input type="button" value="replaceData(start, end)" onclick="fn_replaceData()">
  <input type="button" value="substringData(start, end)" onclick="fn_substringData()">
  
  <script>
    var target = document.getElementById('target').firstChild;
    var data = document.getElementById('dataSource').value;
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    
    function fn_appendData() {
      target.appendData(data);
    }
    
    function fn_deleteData() {
      target.deleteData(start, end);
    }
    
    function fn_insertData() {
      target.insertData(start, data);
    }
    
    function fn_replaceData() {
      target.replaceData(start, end, data);
    }
    
    function fn_substringData() {
      alert(target.substringData(start, end))
    }
  </script>
</body>
</html>

Previous값API Next문서의 기하학적 특성

Last updated 3 years ago

Was this helpful?

조작API(CharacterData 객체)

appendData(data) : data를 선택된 text요소 뒤에 붙임

deleteData(start, end) : text요소의 start index 부터 end의 개수만큼 삭제

insertData(start, data) : text요소의 start index 에 data를 붙임

replaceData(start, end, data) : text요소의 start index에서 부터 end 개수 만큼의 문자열과 data를 바꿈

substringData(start, end) : text요소의 start index에서 부터 end 개수 만큼 문자열을 반환

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1 id="target">Hello World!!</h1>
  <p>data : <input type="text" id="dataSource" value="test"></p>
  <p>start : <input type="text" id="start" value=5></p>
  <p>end : <input type="text" id="end" value=5></p>
  
  <input type="button" value="appendData(data)" onclick="fn_appendData()">
  <input type="button" value="deleteData(start, end)" onclick="fn_deleteData()">
  <input type="button" value="insertData(start, end)" onclick="fn_insertData()">
  <input type="button" value="replaceData(start, end)" onclick="fn_replaceData()">
  <input type="button" value="substringData(start, end)" onclick="fn_substringData()">
  
  <script>
    var target = document.getElementById('target').firstChild;
    var data = document.getElementById('dataSource').value;
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    
    function fn_appendData() {
      target.appendData(data);
    }
    
    function fn_deleteData() {
      target.deleteData(start, end);
    }
    
    function fn_insertData() {
      target.insertData(start, data);
    }
    
    function fn_replaceData() {
      target.replaceData(start, end, data);
    }
    
    function fn_substringData() {
      alert(target.substringData(start, end))
    }
  </script>
</body>
</html>