DOM: 3개의 글
참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 1 cs 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다. $(document).ready(function () {} // 단축표기 $(function() {..
참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..
DOM Manipulation DOM Manipulation은 DOM 구조를 변경할 수 있는 jQuery 메서드들이다. 동적으로 문서 구조를 변경할 수 있고, 특정 노드의 내.외부 삽입과 삭제도 가능하다. 1. DOM Insertion, Inside 메서드 기 능 append() 선택된 내부의 맨 뒤에 자식 노드를 새로 추가한다. appendTo(target) 새로운 노드를 target에 해당하는 노드 내부의 마지막에 추가한다. prepend() 선택된 노드 내부의 맨 앞에 자식 노드를 새로 추가한다. prependTo(target) 새로운 노드를 target에 해당하는 노드 내부의 첫 번째로 추가한다. html() 노드 내부의 HTML을 읽고 쓸 수 있다. text() 노드의 텍스트를 읽고 쓸 수 있다..