[JavaScript] Text 객체


Text 객체



1. 소개

텍스트 객체는 텍스트 노드에 대한 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);

try{

    console.log(t2.firstChild.nodeValue);   

} catch(e){

    console.log(e);

}

console.log(t2.nextSibling.firstChild.nodeValue);

</script>

   

-->DOM에서는 공백조차도 분명히 존재하는 객체에 매핑되어 있다.

실행결과)

Hello world

TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}

Hello world


2. 주요 기능


(1)  값

텍스트 노드의 값을 가져오는 API

- data

- nodeValue


(2) 조작

- appendData()

- deleteData()

- insertData()

- replaceData()

- subStringData()


(3) 생성

- docuemnt.createTextNode()


3. 값 API

텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다

- nodeValue

- data

<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>


t.nodeValue="!!": 텍스트의 문자 값이 '!!'로 바뀐다.


4. 조작 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>

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 이벤트 등록방법  (0) 2014.12.25
[JavaScript] 이벤트  (0) 2014.12.25
[JavaScript] Document 객체  (0) 2014.12.23
[JavaScript] Node 객체  (1) 2014.12.23
[JavaScript] Element 객체  (0) 2014.12.22