Location 객체 현재 브라우저에 표시된 HTML 문서의 주소를 얻을때 사용 브라우저에 새 문서를 불러올 때 사용 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있음 location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있음 현재 문서의 URL 주소 location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환 예제 document.write("현재 문서의 주소는 " + location.href + "입니다."); // 현재 문서의 URL 주소는 http://www.tcpschool.com/examples/tryit/tryhtml.php?filename=j..

브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있음 이때 사용할 수 있는 객체 모델 > 브라우저 객체 모델(BOM, Browser Object Model) 브라우저 객체 모델(BOM) 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아님 하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있음 Window 객체 웹 브라우저의 창(window)을 나타내는 객체 대부분의 웹 브라우저에서 지원 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가..

노드의 값 변경 nodeValue 프로퍼티 - 특정 노드의 값을 변경할 수 있음 setAttribute() 메소드 - 속성 노드의 속성값을 변경할 수 있게 해줌 요소 노드의 텍스트 요소 노드 자신이 직접 텍스트값을 가지지는 않음 요소 노드의 텍스트 요소 노드의 자식 노드인 텍스트 노드(text node)에 저장됨 요소 노드의 텍스트 값을 확인하거나 변경하고자 할 때 > 요소 노드에 포함된 텍스트 노드에 접근해야 함 텍스트 노드의 값 변경 nodeValue 프로퍼티 텍스트 노드의 값을 변경 예제 var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함. function changeText() { para.firstChild.nodeValue ..

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

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

노드로의 접근 HTML 문서에서 HTML DOM 노드에 접근하는 방법 1. getElementsByTagName() 메소드를 이용하는 방법 2. 노드 간의 관계를 이용하여 접근하는 방법 getElementsByTagName() 메소드를 이용하는 방법 getElementsByTagName() 메소드 - 특정 태그 이름을 가지는 모든 요소를 노드 리스트의 형태로 반환 따라서 이 메소드가 반환하는 노드 리스트를 이용하면 원하는 노드에 접근할 수 있음 이 메소드에 대한 더 자세한 사항은 자바스크립트 DOM 요소 수업에서 확인 자바스크립트 DOM 요소 수업 확인 => 노드 간의 관계를 이용하여 접근하는 방법 HTML DOM에서 노드 간의 관계는 다음과 같은 프로퍼티로 정의 1. parentNode : 부모 노드 ..