자바스크립트 23

[JS] DOM 탐색과 조작

노드 탐색자바스크립트를 이용하면 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며, 부모, 형제, 자식 노드 등을 탐색할 수 있습니다. 자식 노드(child node, children)는 바로 아래의 자식 요소를 나타냅니다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만듭니다. 와 는 요소의 자식 노드입니다.후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 의미합니다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.자식 노드 탐색자식 노드를 탐색하기 위해서 다음과 같은 프로퍼티들을 사용합니다.element.children: element의 자식 요소 모음(HTMLCollection)을 반환합니다. 자식 요소 모음은 텍스트..

[JS] DOM 트리구조

웹 브라우저의 구조Window 객체 window 객체는 루트 객체로 최상단에 위치하며 브라우저 창을 대변합니다. window 객체는 다음과 같은 기능을 합니다.자바스크립트 코드의 전역 객체로 자바스크립트 코드 어디서나 접근이 가능합니다.브러우저 창을 대변하고, 이를 제어할 수 있는 기능을 제공합니다.(프로퍼티나 메소드 모두 전역 객체 내부의 것이기 때문에 window.을 생략 할 수 있습니다.) DOM 트리구조DOM은 노드 객체의 계층적인 구조로 구성되는데 이러한 계층 구조를 나무에 비유해 DOM 트리라고 합니다. DOM (Document Object Model)DOM은 한국어로 문서 객체 모델로 웹 페이지 내의 모든 콘텐츠를 객체로 표현한 것입니다. 각 객체를 노드(Node)라는 용어로 표현하고, 태그..

[JS] JavaScript 기초 - Dom 요소 선택하기

JavaScript란? JavaScript는 “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 스크립트 언어” 다. 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역은 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리를 잡고 있다.JavaScript로 브라우저에서 가능한 동작페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)쿠키를 가져오거나 설정하기사용자에게 질문을 건네거나 메시지 보여주기 클라이언트 측에 데이터 저장하기(로컬 스..