일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Promise
- IntersectionObserver
- scroll
- Push
- slice
- 이벤트 루프
- This
- dom
- 배열
- 비동기
- async
- 클로저
- 모듈
- video
- object
- 이벤트 위임
- ios
- Flex
- 스크롤
- 고차함수
- array
- event
- ajax
- 문자열
- json
- animation
- 이벤트
- input
- 애니메이션
- ES6
- Today
- Total
FEDev Story
Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.Node.childNodes 자식노드들을 유사배열에 담아서 리턴한다.Node.firstChild 첫번째 자식노드Node.lastChild 마지막 자식노드Node.nextSibling 다음 형제 노드Node.previousSibling 이전 형제 노드아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM
소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주로 사용하는 노드 객체는 다음과 같다. 문서 노드(Document) - 전체 문서를 가리키는 Document 객체 요소 노드(Element) - HTML 요소를 가리키는 객체 텍스트 노드(CharacterData) - 텍스트를 가리키는 객체 주요기능 Node 객체의 주요한 임무는 아래와 같다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.parentNode - 이 노드의 부모 노..
속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.Element.getAttribute(name)Element.setAttribute(name, value)Element.hasAttribute(name);Element.removeAttribute(name); opentutorials 속성과 프로퍼티모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. Hello world setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속..