Study Memos/JavaScript Front-End (48) 썸네일형 리스트형 문서의 기하학적 특성 (Section 33) 참고> opentutorials.org/course/1375/7112 1. 문서에 나타나는 Element의 크기, 위치, 스크롤 등을 조작하는 방법을 공부해보자 2. GetBoundingClientRect(): 객체의 기하학적 특징을 알 수 있음 -> IE는 width, height를 제공해주지 않음 3. offsetParent: 기하학적 값들의 기준이 되는 객체를 나타냄 4. Viewport: 문서가 너무 길거나 넓을 경우 사용자에게 보여주는 영역 5. pageYOffset: 사용자가 세로 스크롤을 움직인 offset 6. 사실 GetBoundingClientRect()로 얻는 값은 body 태그와의 거리가 아닌 Viewport와의 거리이다. 7. scrollTo() 함수: 스크롤을 파라미터로 전달받은.. Text 객체 - 조작 API (Section 32) 참고> opentutorials.org/course/1375/6746 1. appendData(), deleteData(), insertData(), replaceData(), substringData() : 문자열(TEXT) 조작 함수들 Text 객체 - 값 API (Section 31) 참고> opentutorials.org/course/1375/6745 1. nodeValue, data : Text 객체의 값을 제공 Text 객체 (Section 30) 참고> opentutorials.org/course/1375/6744 1. Text 객체 : CharacterData 객체를 상속함. 2. DOM에서는 줄바꿈, 공백조차도 노드와 매핑이 되어 있다..!! Document 객체 (Section 29) 참고> opentutorials.org/course/1375/6740 1. HTMLDocument 객체: Document 객체를 상속받은 객체. HTML 문서를 대표하는 객체. 2. Document - HTMLDocument 관계는 Element - HTMLElement 관계와 비슷. HTML 문서에서 실제적인 조작은 HTMLElement가 한다. 3. 노드 생성 등의 역할을 함 문자열로 노드 제어 (Section 28) 참고> opentutorials.org/course/1375/6738 1. innerHTML: 자기를 제외한 자식들만 보여줌 -> 읽기를 통해 target 노드의 하위 노드를 손쉽게 할당할 수 있음. 2. outerHTML: 자기를 포함한 전체를 보여줌 3. innerText, outerText: 하위 노드로 쓰는 게 아니라 정말 Text로 취급. 4. insertAdjacentHTML: 특정 HTML 문을 특정 위치에 낑겨넣음 - 첫번째 인자로 주는 옵션: beforebegin, afterbegin, beforeend, afterend Node 객체 - jQuery 노드 변경 API (Section 27) 참고> opentutorials.org/course/1375/6743 1. before(), after() : 노드의 앞, 뒤에 추가 2. prepend(), append() : 노드의 하위 카테고리의 앞, 뒤에 추가 3. remove() : 노드 제거 4. empty() : 노드의 값을 지움 5. replaceWith(), replaceAll() : 노드의 내용을 교체함 - replaceWith(): 제어 대상을 먼저 지정 - replaceAll(): 제어 대상을 인자로 전달 6. clone() : 노드 복사 Node 객체 - Node 변경 API (Section 26) 참고> opentutorials.org/course/1375/6701 1. 객체 생성은 document 객체의 createElement() 함수를 사용해서 할 수 있음. 2. appendChild(), removeChild(), replaceChild() 이전 1 2 3 4 5 6 다음