Topic

자바스크립트

A collection of 197 posts
자바스크립트

remove() 와 removeChild() 의 차이

remve() 와 removeChild() 는 기본적으로 같은 기능을 합니다. 다만, 사용하는데 있어서 몇가지 사소한 차이점들이 있습니다. 차이점  remove()  removeChild()  인터넷 익스플로러 미지원  지원  부모 엘리먼트  불필요  필요  반환값 없음  삭제한  노드 참조 반환. 노드 리스트 삭제 미지원 미지원  하위 노드 삭제 지원 지원 remove() 는 노드를 메모리에서 삭제하고 종료합니다. 하는데 반해,
2 min read
자바스크립트

[javascript] 아이프레임 제어와 데이터 교환

아이프레인 제어 기초 아이프레임은 HTML 페이지 안에 또 다른 HTML 페이지가 있는 창을 배치하는 것입니다. 아이프레임 안에 로딩된 페이지는 원래의 부모 페이지와는 독립된 DOM 객체와 페이지 정보를 가집니다. 아이프레임은 DOM에 HTMLIFrameElement 노드 타입으로 정의됩니다. 별도의 전용 노드 타입과 함께 contentWindow, contentDocument 속성 또한 가지고 있어, 이 속성을 이용해 아이프레임 도큐먼트와
10 min read
자바스크립트

이벤트 타입과 속성의 이해

자바스크립트는 웹페이지에서 발생하는 모든 이벤트를 제어할 수 있습니다. 웹페이지에서 발생하는 이벤트의 대부분은 키보드, 마우스 이벤트이며, 이들 이벤트를 제어하고 실행하는 부분을 중점적으로 다루어봅니다. 자바스크립트는 발생하는 이벤트를 처리하기 위해 이벤트 리스너라는 전역 메서드를 사용합니다. 이벤트 리스너는 특정 이벤트 타입이 발생하면, 콜백 함수라는 정해진 함수를 실행해 이벤트에 대한 사용자 처리를 할 수 있도록
10 min read
자바스크립트

이벤트 캡쳐링(Capturing)과 버블링(Bubbling)의 이해

자바스크립트는 이벤트가 발생하면 이벤트가 발생한 노드(Event Target)를 찾기 위해 DOM 트리를 탐색을 합니다. 탐색 과정은 도큐먼트 루트, 또는 가장 바깥쪽 노드에서부터 이벤트가 트리거 된 타겟 노드까지 내려가는 탐색 방식과, 반대 방향으로 다시 올라오는 탐색 방식으로 구분합니다. 타겟 노드까지 내려가는 탐색 방식을 이벤트 캡쳐링(Event Capturing), 반대 방향으로 올라오는
4 min read
자바스크립트

DOM 이벤트 기초

자바스크립트는 이벤트를 처리하는 다양한 경로를 제공합니다. 대표적으로 HTML 페이지 태그에 인라인으로 태그에 이벤트를 등록할 수 있습니다. 또는, 자바스크립트 코드로 직접 이벤트를 등록할 수도 있습니다. 인라인으로 HTML 태그에 이벤트를 등록하는 방법은 어떤 이벤트가 등록되었고, 어떤 함수가 실행되는지 바로 알 수 있는 장점이 있는 반면, HTML 태그와 스크립트 코드가 분리되지 않아 코드
9 min read
자바스크립트

DOM 엘리먼트 노드의 CSS 관리

다른 용도로 사용하는 "class" 키워드와의 혼동을 줄이기 위해 DOM 엘리먼트 노드의 CSS는 HTML 태그의 속성과 다른 이름을 사용합니다. DOM 엘리먼트 노드의 CSS 클래스 접근은 엘리먼트노드.className 으로 합니다. HTML 태그의 CSS 속성은 class="클래스명" 으로 합니다. HTML 속성인 class 어트리뷰트를 관리하는 메서드를 사용해 setAttribute('class', '클래스명'); 로 적용하면 동일하게 DOM
6 min read
자바스크립트

JSON 데이터로 HTML 내용 추가하기

자바스크립트로 HTML 페이지를 제어할 때 가장 많이 하는 작업중 하나를 꼽으면 HTML 페이지에 새로운 내용을 추가하는 것입니다. 원격 서버에서 추가할 데이터나 HTML 내용의 일부를 받을 수도 있고, 또는 템플릿만 있는 HTML 페이지에 JSON 데이터를 받아 페이지 레이아웃을 새롭게 만들 수 도 있습니다. HTML 페이지에 내용을 추가하는 방법은 3가지가 있습니다. JSON
3 min read
자바스크립트

DOM 노드의 생성, 수정, 삭제 기초

자바스크립트를 사용하면 DOM 의 모든 노드들을 생성, 수정, 삭제, 복사, 이동 할 수 있습니다. DOM 노드를 제어하는데 필요한 모든 속성과 메서드를 제공하기 때문에 메서드와 속성의 갯수가 많기 때문에, DOM 을 제어할 때 적절한 메서드를 사용해야 원하는 결과를 얻을 수 있습니다. 자바스크립트의 노드 제어를 위한 속성과 메서드들을 먼저 알아보겠습니다. 특별히 속성이나
14 min read
자바스크립트

[javascript] 문서 객체 모델(DOM)과 노드, 그리고 태그의 이해

Document Object Model, 줄여서 DOM(돔이라고 읽음), 한글로는 문서 객체 모델이라고 합니다. HTML, 또는 XML 페이지의 구조와 요소들을 제어할 수 있도록 제공하는 프로그래밍 인터페이스, 또는 구조화된 데이터를 말합니다. 자바스크립트는 이 프로그래밍 인터페이스(API)인 DOM에 접근할 수 있으며, DOM 생성 후, 화면에 웹페이지가 표시되기 전에 DOM을 제어할 수도 있습니다. 웹브라우저로
7 min read