일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- json
- array
- input
- Push
- 고차함수
- video
- event
- async
- slice
- 배열
- This
- ES6
- 이벤트
- 비동기
- object
- ajax
- 모듈
- 스크롤
- Promise
- animation
- IntersectionObserver
- 이벤트 루프
- dom
- Flex
- ios
- 애니메이션
- scroll
- 이벤트 위임
- 문자열
- 클로저
- Today
- Total
FEDev Story
텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 값을 가져오는 두개의 API를 알아본다.nodeValuedata html css JavaScript
소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world 실행결과: Hello world TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"} Hello world 주요기능값텍스트 노드의 값을 가져오는 APIdatanodeValue조작appendData()deleteData()insertData()replaceData()subStringData()생성docuemnt.createTextNode()
소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 주요 API노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.createElement()createTextNode()문서 정보 APItitleURLreferrerlastModified