Language/JavaScript

[JavaScript] 노드의 조작

노드의 값 변경 nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있다. 또한, setAttribute() 메소드는 속성 노드의 속성값을 변경할 수 있게 해준다. 요소 노드의 텍스트 요소 노드는 자신이 직접 텍스트값을 가지지는 않는다. 요소 노드의 텍스트는 요소 노드의 자식 노드인 텍스트 노드(text node)에 저장된다. 따라서 요소 노드의 텍스트 값을 확인하거나 변경하고자 할 때는 요소 노드에 포함된 텍스트 노드에 접근해야 한다. 텍스트 노드의 값 변경 nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경할 수 있다. var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함. function changeText..

[JavaScript] 노드의 관리

노드의 추가 다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다. appendChild() insertBefore() insertData() appendChild() 메소드 appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다. function appendNode() { var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택함. var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함. parent.appendChild(newItem); // 해당 요소의 맨 마지막 자식 노드로..

[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"); // 모든 요소를 선..