웹브라우저 JavaScript

조작 API

텍스트 노드가 상속 받은 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>

 

댓글

댓글 본문
  1. 헤밍웨이
    220825 텍스트 조작!
  2. 임앤강
    2022-02-13 강의 감사합니다.
  3. tekhnolozy
    appendData : 타겟에 [데이터]가 부착됨

    deleteData : [시작] ~ [시작 + 종료] 까지가 삭제됨

    insertData : [시작] 에 [데이터]가 삽입됨

    replaceData : [시작] ~ [시작 + 종료] 까지가 [데이터] 로 대체됨

    substringData : [시작] ~ [시작 + 종료] 리턴
  4. 드림보이
    2021.12.28. Text 객체 - 조작 API 파트 수강완료
  5. pmxsg
    2021.12.22
  6. labis98
    20210912 좋은 강의 감사합니다.
  7. 박병진
    2020.12.09 완료
  8. 싸알
    완료
  9. anne
    완료
  10. 정승옥
    완료
  11. 한강
    appendData(), deleteData(), insertData(), replaceData(), substringData() 잘 배웠습니다~~!!!
    200707
  12. ㅎㅅㅁ
    200211
  13. 굼벵이
    완료
  14. 모든일이일사천리
    Done : 19/11/24 7PM
  15. 최대식
    코드 만들어서 크롬으로 실행시킨 후 요소검사에서
    "Failed to load resource: the server responded with a status of 404 (Not Found)" 와 같이 에러메세지가 나옵니다. 왜 그런건가여?
    죄송합니다 초보적인 질문이라서.......
  16. JuicyFresh
    감사합니다.
  17. 김수
    20180901 가맛해요
  18. 생선과고양이
    20180427 이번강의는 다시복습하겠습니다
  19. 박인호
    12-30
    수강완료.
  20. 개발자가 되고싶은 고등학생
    네^^
  21. crable
    감사합니다
  22. BANIP
    스트링에서 제공하는 메서드가 훨씬 편리해서 실전에서 자주 쓸 것 같지는 않네요..
  23. Byeong Heon Lee
    감사합니다
  24. codeX
    감사합니다~! 17.04.14.
  25. 신입1
    감사합니다.
  26. hyuna
    감사합니다.
  27. tachyon
    감사합니다
  28. JustStudy
    2016.07.08 금
    고맙습니다 3.
  29. JustStudy
    2016.07.02 토
    고맙습니다 2.
  30. 사람구실
    되게 중요한 개념인데 좋은 예시로 쉽게 말해주셔서 고맙습니다
    대화보기
    • 이주환
      2016. 04. 28
      잘보고 갑니다~!
    • JustStudy
      고맙습니다
    • 영수
      제가 헷갈렸던 부분이
      data.value를 하게 되면 JavaScript가 뜨게 되는데 data.value='asd'로 고쳐도 input 태그의
      value값은 그대로 JavaScript였다. 였는데요...생각하다보니 해결이 되서 다른 사람도 비슷한 문제가 생길까봐 적어둬요..이게 아니면 피드백 좀 부탁드려요!

      이는 attribute value와 property value가 다르게 때문이다.
      속성 value는 처음 그 text box에 뜨는 문구이고 프로퍼티 value는 그 입력창에 입력된 값을 가진다.
      따라서 속성 value로 JavaScript가 되어있으니 입력창에 그것이 뜨고 이것은 프로퍼티의 value값으로
      자동으로 들어가게 된다...프로퍼티의 value값을 고쳐도 둘은 다른 값이라 속성 value는 바뀌지 않는다..
    • 코딩!
      감사합니다
    • 호두과자
      정말 감사합니다.^^
    • 호두과자
      감사합니다!!!!!
    • 규빈이아빠
      이해가 너무 잘되네요^^
    • rootxy
      훌륭한 강의 잘 봤습니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기