자바스크립트

[JavaScript] 노드 리스트(node list)

노드 리스트(node list) 노드 리스트는 getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체다. 이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 리스트의 각 노드는 0부터 시작하는 인덱스를 이용하여 접근할 수 있다. // 아이디가 "list"인 요소의 모든 자식 노드들을 선택함. var listItems = document.getElementById("list").childNodes; // 자식 노드들 중 첫 번째 li 요소의 내용을 변경함. listItems[1].firstChild.nodeValue = "HTML 요소의 내용을 변경했어요!"; 위의 예제에서 자식 노드 중 첫 번째 요소를 선택할 때 인덱..

[JavaScript] 노드로의 접근

노드로의 접근 HTML 문서에서 HTML DOM 노드에 접근하는 방법은 다음과 같다. getElementsByTagName() 메소드를 이용하는 방법 노드 간의 관계를 이용하여 접근하는 방법 getElementsByTagName() 메소드를 이용하는 방법 getElementsByTagName() 메소드는 특정 태그 이름을 가지는 모든 요소를 노드 리스트의 형태로 반환한다. 따라서 이 메소드가 반환하는 노드 리스트를 이용하면 원하는 노드에 접근할 수 있다. 노드 간의 관계를 이용하여 접근하는 방법 HTML DOM에서 노드 간의 관계는 다음과 같은 프로퍼티로 정의된다. parentNode : 부모 노드 childNodes : 자식 노드 리스트 firstChild : 첫 번째 자식 노드 lastChild : ..

[JavaScript] 노드

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

[JavaScript] DOM 요소

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

[JavaScript] Document 객체

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

[JavaScript] DOM의 개념

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