웹브라우저 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. 헤밍웨이
    220825 Text!
  2. 드림보이
    2021.12.28. Text 객체 파트 수강완료
  3. pmxsg
    2021.12.22
  4. labis98
    20210912 좋은 강의 감사합니다.
  5. 박병진
    2020.12.09 완료
  6. 싸알
    완료
  7. anne
    완료
  8. 정승옥
    완료
  9. 한강
    Text 객체 시작합니다~~^^!
    200707
  10. ㅎㅅㅁ
    200211
  11. 굼벵이
    완료
  12. 모든일이일사천리
    Done : 19/11/24 7PM
  13. JuicyFresh
    감사합니다.
  14. 생선과고양이
    20180427 감사합니다
  15. 박인호
    12-30
    수강완료.
  16. 개발자가 되고싶은 고등학생
    감사합니다.
  17. melius17
    감사합니다.
  18. crable
    감사합니다
  19. 망고
    소개 부분에 "텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. " CharacterData 가 CharcterData로 잘못 표기되어 있습니다. 중요한건 아니지만 제보합니다
  20. 꼬딩
    나도잘 모르겠어요
    대화보기
    • hyuna
      감사해요
    • tachyon
      감사합니다
    • JustStudy
      2016.07.08 금
      고맙습니다 3.
    • JustStudy
      2016.07.02 토
      고맙습니다 2.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 이주환
      2016. 04. 27
      잘보고 갑니다~!
      오늘은 여기까지하고 내일 다시 공부를 이어가도록 하겠습니다/
    • JustStudy
      고맙습니다
    • Peater Han
      하단의 생성의링크 목록에
      'docuemnt.createTextNode()' 오타 같네요.
    • 2015-11-13
      css에서도 공백을 텍스트로 인식하나요?
      이게 약간 헷갈리는데 css에서 가상 선택자를 사용할때 말이죠.
      <ul>
      <li>1</li>
      <li>2</li>
      </ul>

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