Languages/Java Script

[Js] Text객체 | 값 API | 조작 API

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

이번 포스팅은 강의의 "Text객체" 의 모든 강의내용을 포함하여 작성하였습니다.

Text 객체

소개

텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다.

예를 들어 <p>haeun</p>라고 한다면 태그를 제외한 'haeun'이 바로 텍스트 이다.

아래는 텍스트 노드를 찾는 예제다. 주목할 것은 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>

실행결과

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

fisrstChild로 처음 출력하면 가르키는 객체 자체가 출력된다.

ex) <span>Hello world</span>

여기서 한번 더 firstChild를 하면 그때 text를 리턴해준다 -> Hello world
그런데 만약 공백이 있다면, 공백을 리턴한다.

즉, Dom에서는 공백 조차도 객체이다 라는 것을 알 수 있다.

주요기능

값

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

data
nodeValue

조작

appendData()
deleteData()
insertData()
replaceData()
subStringData()

생성

docuemnt.createTextNode()

노드 변경 API - 웹브라우저 JavaScript

노드를 추가, 제거, 변경하는 방법을 알아보자. 노드 추가 노드의 추가와 관련된 API들은 아래와 같다. 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능

opentutorials.org

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

조작 API

텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.

appendData()
deleteData()
insertData()
replaceData()
substringData() // 정보 중에 일부의 정보를 가공하는 방법을 제공하는 API

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

위 예제는 꼭 실습해보기! (Text내용을 변경하거나 삭제 수정 추가 모두 가능)

마지막 substringData는 추출이 가능하다. 즉 선택하는 값만 리턴해주기 때문에 이를 이용하여 텍스트 내용을 추출 할 수도 있다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 이벤트 \| 등록방법 & inline \| 프로퍼티 리스너 (0)	2021.02.10
👉🏻[Js] 문서의 기하학적 특성 (0)	2021.02.10
[Js ] Document 객체 (0)	2021.02.10
[Js] 문자열로 노드 제어 (0)	2021.02.10

Contents

새소식

인기 검색어