[daily study] Text객체_조작API

16166 단어 textJavaScriptJavaScript

*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다




1. 조작 API

🌹 텍스트 노드가 상속받은 CharacterData객체는 문자를 제어할 수 있는 다양한 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>

👉 코드가 길고 복잡해서 알아보기 조금 힘들지만 input버튼을 누르면 각 기능에 따라 글자가 추가되거나 삭제된다. 처음보면 이해하기가 좀 힘들다.




*본 글은 생활코딩 조작API 페이지에서 이론적인 내용을 가져왔음을 밝힙니다.

출처 : https://opentutorials.org/course/1375/6746

미 단 2017 년 Codem 퀄 리 파 잉 게임 문제 풀이
업데이트:FreeBSD에 데몬 작성 및 자동 배포

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage