EverGiver

노드 리스트 DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트(node list)를 사용해야 한다. DOM에 접근할 때 querySelectorALl() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다. 노드 정보를 여러 개 저장한 것이 노드 리스트이다. (배열과 비슷하게 동작한다.) document.querySelectorAll("li")​ 노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있다. document.querySelectorAll("li")[1]​ 새로운 노드 추가 과정 1. 모든 HTML 태그는 요소(element) 노드이다. 2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다. 3. HTML 태그에 있..

DOM 요소에 함수 직접 연결하기 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. // img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결 함수 이름을 사용해 연결하기 이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. (함수 이름 다음에 괄호(())를 추가하지 않는다.) DOM의 event 객체 알아보기 DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어 있다. event 객체에는 이벤트 정보만 들어 있다. 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를..

DOM에 접근하기 class, id, 태그 등을 선택자(selector)라고 한다. id 선택자로 접근하는 getElementById() 메서드 - HTML 태그의 id 속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자이다. - 특정한 id가 포함된 DOM 요소에 접근할 수 있다. 요소명.getElementById("id명") // ex) document.getElementById("heading") class값으로 접근하는 getElementsByClassName() 메서드 - 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근한다. 요소명.getElementsByClassName("class명") // ex) document.getElementsByClassName..

문서 객체 모델 문서 객체 모델(DOM)의 정의 - 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 개체로 정의한다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. DOM은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다. 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다. DOM 트리에서 가지가 갈려져 나간 항목을 노드(node)라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트(root) 노드라고 한다. 루트..

브라우저와 관련된 객체 알아보기 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어 낸다. 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다. (이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가진다.) 종류 설명 window 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있다. document 웹 문서마다 하나씩 있으며 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있다. navigator 현재 사용하는 브라우저의 정보가 들어 있다. history 현재 창에서 사용자의 방..

Array 객체 Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. (배열이란 하나의 변수에 값을 여러 개 저장할 때 사용한다.) Array 객체로 배열 만들기 - 초기값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 된다. - 초깃값이 없는 경우 var numbers = new Array();// 배열의 크기를 지정하지 않음 var numbers = new Array(4);// 배열의 크기를 지정함​ - 초깃값이 있는 경우 var numbers = ['one','two','three','four'];// 배열 선언 var numbers = Array('one','two','three','four');// Array 객체를 사용한 배열 ..