clone - 선택된 객체를 복제 - 객체 복구 없이 구조 이동 - html tag 객체(element)이다. - 검색된 객체를 다른 하위에 삽입하였을 경우 복제가 아닌 이동이 된다. 객체 복제 없이 구조 이동 상단 안녕하세요 하단 이동 - 객체 복제 후 삽입 - cloneNode() -> 객체 복제 - cloneNode(true) -> 인수값이 true 일 경우 하위 요소 전체 복제 - cloneNode(false) -> 인수값이 false 일 경우 선택 영역만 복제 객체 복제 후 삽입 상단 안녕하세요 하단 복제 cloneNode 활용 예제 추가 제거 HTML DOM contains() Method var div = document.getElementById("myDIV").contains(span);..

콜백 함수 - 이벤트에 등록 된 함수는 콜백함수이다. 콜백함수 테스트 이벤트 콜백 데이터로 간단한 예제 콜백함수 테스트 한국스마트정보교육원

addEventListener 활용하여 이벤트 걸기 - 검색된 객체에 이벤트를 걸 수 있다. - 검색된 객체에는 addEventListener라는 메서드가 존재 한다. - 구문 : 검색된 객체.addEventListener('이벤트명', 콜백함수); - 콜백 함수에는 사용자의 행동에 관련된 좌표값 브라우저의 상태값 등이 매개변수로 전달된다. 이벤트 걸기 remove - 선택된 대상을 제거 제거 화면에서 제거라기보다 DOM 객체의 트리 구조에서 선택된 대상 객체를 제거하기 때문에 화면에도 변경이 된다. children, childNodes - children : 선택된 대상의 하위 요소 배열로 반환 - childNodes : 선택된 대상의 하위 텍스트 요소 및 태그 요소 포함 배열로 반환 안녕1 안녕2 안..

단일 - html 요소 중 인수에 해당되는 선택자와 일치하는 대상 검색 - 다중 대상을 검색하더라도 단일 1개 객체만 반환한다. - document.querySelector('선택자'); - 검색된대상객체.querySelector('선택자'); 안녕하세요1. 안녕하세요2. 안녕하세요3. 다중 - html 요소 중 인수의 선택자 해당되는 모든 객체를 검색하여 배열로 반환 - document.querySelectorAll('선택자'); - 검색 된 대상.querySelectorAll('선택자'); 안녕하세요1. 안녕하세요2. 안녕하세요3.

- DOM(Document Object Model) 문서 객체 - document API를 활용하여 문서를 다룬다. - documnet API를 활용하여 HTML 객체 생성, 소멸과 HTML 요소의 속성 생성, 소멸을 할 수 있다. - documnet API를 활용 HTML 요소를 검색하여 이벤트 등록 및 문서 제어가 가능하다. document API html 요소 검색 - 이벤트 등록 및 문서 제어를 하기 위해서는 html 요소가 검색이 되어야 한다. - 검색된 대상에 이벤트 등록 혹은 제어가 가능해진다. id 검색 - html 요소 중 id 속성 값을 가진 대상을 검색 - 찾고자 하는 id 값과 일치하는 대상을 찾을 수 있다. - api : document.getElementById('찾을 id');..

- form 태그에 name 속성에 값을 지정하면 해당 지정된 값을 윈도우 객체에 등록해준다. - form 의 하위 요소가 있다면 form 객체 하위에 name키 객체를 등록해준다. 남 여 전송 회원명 : 성별 :