Study Record

여러가지 이벤트 처리   이벤트 리스너/이벤트 핸들러 삭제하기 ① 이벤트 핸들러 삭제하기이벤트 핸들러를 삭제하려면 onxxxxx 메소드에 대해 null 값을 설정하기만 하면 된다.// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.document.addEventListener('DOMContentLoaded', function() { var button = document.getElementById('btn'); // 이벤트 핸들러 등록 button.onclick = function() { window.alert('안녕하세요, 자바스크립트!'); }; // 이벤트 핸들러 삭제하기 button.onclick = null;}, false);  ② 이벤트 리스너 ..

JavaScript 로 스타일 시트 조작하기HTML을 조작하는 방법 외에 DOM을 이용하면 스타일 시트를 조작할 수 있다. DOM 으로 스타일 시트를 조작하는 방법에는 인라인 스타일로 액세스하는 방법과 외부의 스타일 시트를 적용하는 방법이 있다.   인라인 스타일로 액세스하기 - style 프로퍼티인라인 스타일이란 개개의 노드에 대해 설정된 스타일이다. 붉은 문자입니다. 인라인 스타일로 액세스하려면 style 프로퍼티를 사용한다.elem.style.prop [= value]// elem : 요소 객체, prop : 스타일 프로퍼티, value: 설정값 예시 코드) 마우스 포인터를 올려놓은 타이밍에 배경색 변경하기// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.document.addEventListe..

data-xxxxx 속성data-xxxxx 속성은 개발자가 목적에 따라 값을 자유롭게 값을 설정할 수 있는 특별한 겂이다. 주로 스크립트(이벤트 리스너)에서 사용하기 위한 파라미터를 삽입하기 위한 속성이다. 'xxxxx' 부분은 알파벳 소문자, 하이픈 밑줄 등의 문자를 사용하여 자유롭게 명명할 수 있다. 사용자 정의 데이터 속성이라고도 한다.네이버구글  HTMLCollection/NodeList 반복 처리 주의점getElementsByTagName/getElementsByName/getElementsByClassName 메소드는 반환값으로서 HTMLCollection 또는 NodeList 객체를 반환한다. 이 객체들은 살아있는(Live) 객체이다. 살아있다는 것은 객체가 문서 트리를 참조하고 있어 문서 ..

노드 추가/치환/삭제DOM 으로 기존의 노드에 접근하여 값을 설정하거나 취득할 수 있다. 더 나아가 문서 트리에 새 노드를 추가하거나 기존의 노드를 대체 또는 삭제할 수 있다. innerHTML 프로퍼티로도 HTML 코드를 추가할 수 있지만 좀 더 복잡한 콘텐츠를 추가할 경우를 설명하고 있다.   신규 노드 생성하기메소드생성하는 노드createElement(요소명)요소 노드createAttribute(속성명)속성 노드createTextNode(텍스트)텍스트 노드createCDATASection(텍스트)CDATA 섹션createComment(텍스트)주석 노드createEntityReference(실체명)실제 참조 노드createProcessingInstruction(타깃명, 데이터)처리 명령 노드creat..