Study Record

폼 요소에 액세스하기자바스크립트에서 폼(form)은 사용자의 입력을 받는 대표적인 수단이다. 이러한 폼에서 값을 취득하고 설정하는 방법을 알아본다.   입력 상자/선택 상자의 값 취득하기입력 상자/선택 상자의 값을 취득하는 방법은 value 프로퍼티에 액세스하기만 하면 된다. 설정하는 것도 value 프로퍼티의 값을 변경하면 된다.document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var name = document.getElementById('name'); // 입력 상자 값 취득하기 ..

속성값 컨트롤하기스크립트로 페이지를 조작하는 방법이다.   요소 노드 속 같은 이름의 프로퍼티로 액세스 가능대부분의 요소 노드에 액세스했다면 속성값에 액세스하는 것은 간단하다. 대부분의 속성은 요소 노드 속의 동일한 이름의 프로퍼티로 액세스가 가능하기 때문이다. var naver = document.getElementsByClassName('naver');// 속성값 취득console.log(naver[0].href);// 속성값 변경naver[0].href = "http://www.google.com"; 하지만 그렇지 않은 경우도 있다. CSS 클래스를 나타내는 속성명은 'class' 이지만 DOM 프로퍼티는 'className'이다.var naver = document.getElementsByClas..

DOM외부 서비스에서 어떤 입력을 받아 이를 처리한 결과를 페이지에 반영시킨다는 흐름이 자바스크립트의 흐름이다. 결과를 페이지에 반영시킨다는 것은 HTML을 JavaScript에서 편집한다는 뜻이다. DOM 은 마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조로 JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원하고 있다. DOM 은 문서를 문서 트리로서 취급한다. DOM 이라는 이름처럼 문서에 포함되는 요소나 속성, 텍스트를 각각 객체로 보기 때문에 객체의 집합(계층 관계)이 문서라고 생각한다. 문서를 구성하는 요소나 속성, 텍스트 등의 객체를 노드라고 부른다. 종류에 따라 요소 노드, 속성 노드, 텍스트 노드 등으로 부른다. DOM 은 노드를 추출, 추가, 치환, ..