JavaScript

[JavaScript] Location 객체

Location 객체 location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. 이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있다. location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다. 현재 문서의 URL 주소 location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다. document.write("현재 문서의 주소는 " + location.href + "입니다."); 현재 문서의 호스트 이름 location 객체의 hostname 프로퍼티는 현재 문서의 인터넷 호..

[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 문서를 구성하는 대표적인 노드의 종류는 다음과 같다..