doeunn.log

▶DOM 이벤트 이벤트(Event)는 어떠한 일(또는 인터랙션)이 발생했을 때, 그 시점에 발생하는 신호를 의미합니다. DOM에서는 요소를 클릭하거나, 특정 키를 입력했을 때처럼 다양한 상황에서 이벤트가 발생합니다. 프런트엔드 개발자에게 이벤트를 제어하는 것은 굉장히 중요한 부분입니다. 이벤트의 발생 시점에 맞춰 여러 가지 동작을 추가하여 사용하자와 인터랙션할 수 있기 때문입니다. 1) Event 객체 Event 객체는 DOM 내에서 발생한 이벤트에 대한 정보를 담고 있습니다. Event 객체는 발생한 이벤트의 종류부터 요소에 대한 정보, 갭처링 여부, 이벤트 발생 위치 등 여러 정보를 갖고 있습니다. ▷target과 currentTarget 이벤트가 발생한 요소에 접근하고 싶은 경우, target 혹은..

▶요소 검색하기 이전에 살펴봤던 parentNode, ChildNode 같은 노드 프로퍼티를 사용하면 원하는 노드에 직접 접근할 수 있습니다. 하지만 이 방법은 문서 구조가 자주 변경되거나 계층적으로 깊게 위치한 요소에 접근하는 경우 효율적으로 탐색할 수 없습니다. 이런 경우 querySelector(), getElementById() 같은 요소 검색 메서드를 통해 해당 요소에 바로 접근할 수 있습니다. 1) getElementById() 요소의 id 속성을 이용해 document.getElementById(id)로 접근할 수 있습니다. id는 문서에서 유일하기 때문에 요소를 찾을 때 가장 빠르게 찾을 수 있습니다. 일치하는 id를 가진 요소가 있을 경우 해당 DOM 요소인 Element 객체를 반환하며..

▶DOM Node 추가·제거 DOM API를 사용해 동적으로 기존 노드의 위치를 바꾸거나, 노드를 추가하고, 제거하는 방법에 대해 알아보겠습니다. 1) createElement document.createElement(tagName)을 호출하면 tagName에 맞는 요소 노드를 생성합니다. const divElem = document,createElement('div'); // const liElem = document.createElement('li'); // liElem.className = 'li-class-name'; // class 속성 할당 liElem.id = 'li-id'; // id 속성 할당 liElem.innerHTML = "삽입되는 요소"; // li 내부 HTML 노드 할당 2) ..

▶Node 노드 인터페이스는 전체 문서의 요소들에 대한 객체 형태의 기본 형태의 기본 데이터 타입입니다. DOM 트리의 구성 요소를 나타내며 nodeType이나 nodeName, nodeValue, 자식 노드와 형제 노드에 대한 관계 등 여러 정보를 갖습니다. 또한 appendChild(), removeChild() 같은 노드 조작 메서드 등을 사용할 수 있습니다. 1) 노드의 계층구조 노드 인터페이스는 트리 형태의 계층 구조가 존재합니다. 위 그림에서 알 수 있듯이 계층 구조의 제일 꼭대기에는 EventTarget이 존재합니다. 이 EventTarget 추상 클래스는 이벤트가 발생했을 때 대상이 되는 타깃을 의미합니다. Node는 EventTarget을 상속받은 추상 클래스로 DOM 노드의 기초가 되며..

▶BOM과 DOM 프론트엔드 개발의 발전으로 많은 플랫폼에서 자바스크립트 코드를 구동할 수 있게 되었지만, 여전히 가장 많이 사용되는 플랫폼은 브라우저입니다. 브라우저를 통해 우리들은 컨텐츠를 볼 수 있고 필요한 정보를 검색할 수 있습니다. 그리고 프론트엔드 개발자는 DOM과 다양한 이벤트를 사용하여 사용자가 브라우저 내에서 인터랙션(interaction)을 할 수 있도록 만듭니다. 앞으로 화면 요소에 접근할 수 있는 DOM API와 브라우저 정보를 제공하는 BOM API에 대해 살펴보고, 이를 이용해 페이지를 구성하고 사용자에게 정보를 제공하는 방식에 대해 알아보겠습니다. ▶문서 객체 모델 문서 객체 모델(Document Object Model, DOM)은 XHTML, HTML 문서용 API입니다. D..