Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS Text 객체 API (callAppendData() callDeleteData() callInsertData() callReplaceData() callSubstringData() ) 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS Text 객체 API (callAppendData() callDeleteData() callInsertData() callReplaceData() callSubstringData() )

호IT 2021. 2. 9. 01:39

 

 

 

 

 

 

이미지 출처 :    https://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#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

 

 

 

 

- Text 객체 

 

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

 

여기서 중요한점은 DOM에서는 공백이나 줄바꿈도 텍스트 노드입니다.

 

 

- Text 객체 예제

<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 노드의 값을 조회,변경 가능합니다.

 

 

예제2

 

 

<ul>
    <li id="target">html</li> 
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script>
    var t = document.getElementById('target').firstChild;
	t.nodeValue = '바뀌어랏';
    console.log(t.nodeValue);
	t.data = 'hi';
    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="FU11_M00N_test" /></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>

 

 

 

appenData와 deleteData를 실행시킨 모습.

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 까지를 리턴합니다.

 

alert 창으로 ng ev 라는 값이 출력됩니다.

ng ev에는 공백이 하나포함되어 5개가 출력됩니다.

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

 

 

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS 이벤트 ( inline , 프로퍼티 리스너 , addEventListener)  (0) 2021.02.10
[ JavaScript ]문서의 기하학적 특성 (스크롤 제어, Vireport, getBoundingClientRect())  (0) 2021.02.09
[ JavaScript ] JS Document 객체  (0) 2021.02.08
[ JavaScript ] JS 문자열로 노드 제어 (innerHTML,outerHTML, innerText, outerText,insertAdjacentHTML())  (0) 2021.02.08
[ JavaScript ] JS jQuery 노드 (추가,제거,변경,복사,복사,이동)  (0) 2021.02.08
'SUA 정보보안/JavaScript' Related Articles more
Comments