이미지 출처 : https://commons.wikimedia.org/wiki/File:JavaScript-logo.png
해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: Text 객체
텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받습니다.
아래는 텍스트 노드를 찾는 예제입니다.
우리가 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점입니다.
<p id="target1"><span>Hello world</span></p>
<p id="target2">
<span>Hello world</span>
</p>
<script>
var t1 = document.getElementById('target1').firstChild;
var t2 = document.getElementById('target2').firstChild;
console.log(t1.firstChild.nodeValue);
console.log(t2.nextSibling.firstChild.nodeValue);
</script>
target1의 첫번째 자식은 p 엘리먼트 입니다. 사이에 공백이 없기 때문이죠.
반면 target2 의 첫번째 자식은 text 입니다.
줄바꿈이나 공백 같은 것도 하나의 객체라고 인식하기 때문입니다.
따라서 Hello world 를 출력하고 싶다면, 첫번째 자식의 형제 관계를 찾아야하는 겁니다.
자바스크립트 기본 문법 :: Text 객체 주요기능
값
아래 리스트는 텍스트 노드의 값을 가져오는 API입니다.
- data
- nodeValue
조작
아래 리스트는 텍스트 노드의 값을 조작할 수 있는 API 입니다.
- appendData()
- deleteData()
- insertData()
- replaceData()
- subStringData()
생성
Text 노드를 생성하러면 document 의 createTextNode 메소드를 이용해야합니다.
- docuemnt.createTextNode()
자바스크립트 기본 문법 :: Text 객체 주요기능( 값 변경)
<ul>
<li id="target">html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
var t = document.getElementById('target').firstChild;
console.log(t.nodeValue);
console.log(t.data);
</script>
위의 예제코드를 실행시키면 아래와 같은 결과가 출력됩니다.
text 노드의 값을 조회할 수 있는 것 뿐만 아니라 변경하는 것도 가능합니다.
<ul>
<li id="target">html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
var t = document.getElementById('target').firstChild;
t.nodeValue = '~~change~~';
console.log(t.nodeValue);
t.data = '===hahahaha===';
console.log(t.data);
</script>
자바스크립트 기본 문법 :: Text 객체 주요기능( 값 조작)
<!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>
첫번째 callAppendData() 을 실행시키면,
target 바로 뒤에 datasouce id 를 가진 엘리먼트의 value 를 추가합니다.
callDeleteData() 를 실행시키면,
첫번째 인자로 주어진 start.value 부터 end.value 까지 의 Text 를 삭제합니다.
우선 두개를 먼저 실행시킨 결과를 확인해보도록 하겠습니다.
callInsertData() 를 실행시키면,
첫번째 인자인 start.value 를 시작으로 해서 data.value 를 추가합니다.
callReplaceData() 를 실행시키면,
첫번째 인자인 start.value 부터 end.value 까지 data.vale 로 치환합니다.
callSubstringData() 를 실행시키면,
첫번째 인자인 start.value 부터 end.value 까지를 리턴합니다.
문서를 새로고침하고, callInsertData 를 실행시킨 결과부터 봅시다.
또다시 문서를 새로고침하고, callReplaceData 를 실행시킨 결과를 보겠습니다.
또다시 문서를 새로고침하고, callSubstringData 를 실행시킨 결과를 보겠습니다.
alert 창으로 ng ev 라는 값이 출력됩니다.
왜 4개가 출력되지? 라고 생각하시는 분이 계실 것 같아 덧붙이자면,
중간에 들어있는 공백도 문자 취급을 하기 때문에 총 5개가 출력되는 것이 맞습니다.