웹브라우저 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. 감사합니다.
  2. tachyon
    감사합니다
  3. JustStudy
    2016.07.08 금
    고맙습니다 3.
  4. JustStudy
    2016.07.02 토
    고맙습니다 2.
  5. 사람구실
    되게 중요한 개념인데 좋은 예시로 쉽게 말해주셔서 고맙습니다
    대화보기
    • 이주환
      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 자세히 보기