노드(node) HTML DOM 노드(node)라고 불리는 계층적 단위에 정보를 저장 이러한 노드들을 정의하고, 그들 사이의 관계를 설명 HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장 노드 트리 노드들의 집합 노드 간의 관계를 보여줌 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려감 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 노드의 종류 W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드 HTML 문서를 구성하는 대표적인 노드의 종류 노드 설명 문서 노드(document node) HTML 문서 전체를 나타내는 노드임. 요소 노드(element node..

DOM 요소의 선택 HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 함 자바스크립트에서 특정 HTML 요소를 선택하는 방법 1. HTML 태그 이름(tag name)을 이용한 선택 2. 아이디(id)를 이용한 선택 3. 클래스(class)를 이용한 선택 4. name 속성(attribute)을 이용한 선택 5. CSS 선택자(selector)를 이용한 선택 6. HTML 객체 집합(object collection)을 이용한 선택 HTML 태그 이름(tag name)을 이용한 선택 getElementsByTagName() 메소드 HTML 태그 이름을 이용하여 HTML 요소를 선택 예제 var selectedItem = document.getElementsByTagName("li"); // 모든..

Document 객체 웹 페이지 그 자체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함 Document 메소드 Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공 - HTML 요소의 선택 - HTML 요소의 생성 - HTML 이벤트 핸들러 추가 - HTML 객체의 선택 HTML 요소의 선택 HTML 요소를 선택하기 위해 제공되는 메소드 메소드 설명 document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택함. document.getElementById(아이디) 해당 아이디의 요소를 선택함. document.getElementsByClassName(클래스이름) 해당 클래스에 속한..

문서 객체 모델(DOM)이란? XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됨 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있음 - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있음 - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있음 - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있음 - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있음 - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있음 - 자바스크립트는 HTML 문서에 새로..

Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받음 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있음 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 원본 배열을 변경하는 Array.prototype 메소드 다음 메소드는 원본 배열을 직접 변경하는 메소드 1. push() 2. pop() 3. shift() 4. unshift() 5. reverse() 6. sort() 7. splice() push() 메소드 하나 이상의 요소를 배열의 가장 마지막에 추가 원본 배열은 추가한 요소의 수만큼 길이(length)가 ..

Array 객체 정렬된 값들의 집합으로 정의됨 Array 객체로 다뤄짐 자바스크립트 배열 표현에 대한 더 자세한 사항은 자바스크립트 배열 수업에서 확인 자바스크립트 배열 수업 확인 => Array 메소드 자바스크립트는 사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드를 제공 Array 메소드는 Array 객체에 정의된 배열과 관련된 작업을 할 때 사용하는 메소드 1. Array.isArray() 2. Array.from() 3. Array.of() Array.isArray() 메소드 전달받은 값이 Array 객체인지 아닌지를 검사 예제 Array.isArray([]); // true Array.isArray(new Array()); // true Array.isArray(123); // ..