웹브라우저 JavaScript

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

주요기능

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

  • data
  • nodeValue

조작

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

생성

 

댓글

댓글 본문
작성자
비밀번호
  1. 감사해요
  2. tachyon
    감사합니다
  3. JustStudy
    2016.07.08 금
    고맙습니다 3.
  4. JustStudy
    2016.07.02 토
    고맙습니다 2.
  5. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  6. 이주환
    2016. 04. 27
    잘보고 갑니다~!
    오늘은 여기까지하고 내일 다시 공부를 이어가도록 하겠습니다/
  7. JustStudy
    고맙습니다
  8. Peater Han
    하단의 생성의링크 목록에
    'docuemnt.createTextNode()' 오타 같네요.
  9. 2015-11-13
    css에서도 공백을 텍스트로 인식하나요?
    이게 약간 헷갈리는데 css에서 가상 선택자를 사용할때 말이죠.
    <ul>
    <li>1</li>
    <li>2</li>
    </ul>

    위와 같은 html이 있다면
    css에서 가상선택자로
    ul:first-child {}를 쓴다면 공백이 아니라 바로 <li>1</li>를 의미하잖아요.
  10. 코딩!
    공백!!
  11. 땡깡쟁이
    잘 봤습니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기