이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어주게 되어있다. 첫번째 매개값으로 event객체를 넣어줌 이벤트 위임 이벤트 전파는 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임되는 특징입니다. 위임은 많이 사용되는 강력한 이벤트 핸들링 패턴입니다. 이벤트 객체 사용하는 방법 이벤트 객체의 기능 설명 stopPropagation() 이벤트 전파를 막는다. (버블링 중단하기) target 이벤트를 적용한 타겟 속성 currentTarget 실제 이벤트가 걸려있는 타겟 속성 preventDefault() 고유특성을 가진 태그의 이벤트를 제거 ㄴ a와 submit은 고유 이벤트를 가지고 있다. this태그를 대체할 수 있다. 방법1 ) 매개값으로 받는..

토글형태 활용하기 어둡게보기 이름보기 홍길자 20세 능력단위 Java, Oracle, JSP, CSS, Javascript 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다 위키백과

클래스 속성 제어하기 클래스 속성을 제어하여 css를 변경할 수 있습니다. 특히 메뉴 : active 할 때 .className : 클래스 명을 얻음 .classList : 클래스명을 배열로 얻음 Prototype에는.을 찍어서 사용할 수 있는 함수가 들어있음 add , contains , remove , toggle 4가지만 알아두기 클래스 속성 제어하기 버튼 하나의 버튼으로 두가지 작업을 처리하기(toggle) 토글버튼

step1 To Do List 전체삭제 확인 확인

노드 삭제 함수 설명 remove() 노드삭제 removeChild(삭제 할 자식 노드) 자식 노드 삭제 예제 ) 하나씩 삭제 | 일괄 삭제 , 전체 체크 | 전체 체크 해제 css↓↓↓ 더보기 html ↓↓↓ 더보기 하나씩 삭제 일괄 삭제 번호 이름 내용 날짜 1 홍길자 안녕! 2019-01-01 2 김길자 안녕! 2019-01-01 3 이길자 안녕! 2019-01-01 4 고길자 안녕! 2019-01-01 script↓↓↓ //하나씩 삭제 removeChild var delOne = document.getElementById("delOne"); delOne.onclick = function(){ var table = document.querySelector(".table"); //tr의 부모요소 //..

insertBefore(삽입노드, 기준노드) : 기준노드 앞에 삽입노드 추가 부모님 요소 필요 EX) list.insertBefore(삽입노드, 기준노드);

- a 의 부모는? li - 첫번째 li와 마지막 li는 형제 관계 노드 간 부모, 자식을 선택하는 키워드 기능 설명 childNodes 모든 자식 노드 선택 단 , 노드에 생략된 text 도 포함된다 children 모든 자식 노드 선택 parentElement 부모노드 선택 nextElementSibling 다음 형제 노드 선택 previousElementSibling 이전 형제 노드 선택 firstChild 첫번째 자식 노드 선택 lastChild 마지막 자식 노드 선택 console.dir(매개값); 해당 키워드로 어떤 속성을 얻을 수 있는지 알려줌! 보통 element가 붙은 키워드를 사용 html ↓↓↓ 더보기 이동 번호 이름 내용 날짜 ↓↑ 1 홍길자 안녕! 2019-01-01 ↓↑ 2 이순..

border-spacing 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정합니다. 기본 값 : 2px border-collapse https://www.codingfactory.net/10616 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.