웹브라우저 자바스크립트 - Text 객체
Text 객체 - https://opentutorials.org/course/1375/6744
<p>생활코딩</p>에서 p태그는 Element노드이다.
그 사이에 있는 '생활코딩'은 Text객체, Text노드이다.
Text객체는 CharacterData를 상속받는다. CharacterData는 문서에서 나타나지는 않는다.
예제를 통해 Text객체에 접근하는 방법을 알 수 있다.
<!DOCTYPE html>
<html>
<body>
<!--공백이나 줄바꿈이 없음-->
<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);
try{
console.log(t2.firstChild.nodeValue);
} catch(e){
console.log(e);
}
console.log(t2.nextSibling.firstChild.nodeValue);
</script>
</body>
</html>
해당 예제를 실행하고 콘솔창에서 확인해보면 아래와 같다.
빨간줄을 기준으로
t1 변수를 만들어서 target1의 엘리먼트에 접근하여 firstChild를 통해 텍스트들을 알 수 있다. -> 공백이 없는 경우
t2 변수를 만들어서 target2의 엘리먼트에 접근하여 firstChild, nextSibling을 통해 알 수 있다. -> 공백이 있는 경우
주요기능
값
텍스트 노드의 값을 가져오는 API
- data
- nodeValue
조작
- appendData()
- deleteData()
- insertData()
- replaceData()
- subStringData()