FEDev Story

Text 객체 - 조작 API 본문

Javascript/DOM

Text 객체 - 조작 API

지구별72 2017. 2. 13. 21:23

텍스트 노드가 상속 받은 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 > DOM' 카테고리의 다른 글

Viewport  (0) 2017.02.13
요소의 크기와 위치  (0) 2017.02.13
Text 객체 - 값 API  (0) 2017.02.13
Text 객체  (0) 2017.02.13
Document 객체  (0) 2017.02.12
'Javascript/DOM' Related Articles more
Comments