클래스 속성 제어하기 클래스 속성을 제어하여 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 이순..

노드 생성, 추가 함수 설명 createElement() 요소를 생성 createTextNode() //몰라도됨 innerHTML로 대체 텍스트를 생성 appendChild() 요소를 부모 자식 관계로 넣어줌 innerHTML= 요소를 html방식으로 생성 insertBefore(삽입노드 , 기준노드) 기준노드 앞에 삽입노드 추가 버튼을 누르면 아래 태그 생성 링크가 나옴 태그 생성 버튼을 누르면 위에 check box 생성 태그 생성 할 일을 입력하고 추가버튼을 누르면 아래에 입력한 할 일을 추가 > To Do List 추가 버튼을 누르면 기존 10개 리스트에서 아래 리스트가 추가됨 추가 1개 버튼을 누르면 1개의 행 추가, 5개 버튼 누르면 5개의 행 추가 중앙유치원 * 수업 내용 작성하기 + 5개 ..

1. 노드의 css속성을 바꿀 떄는 style속성을 이용합니다. 2. css 속성은 카멜 표기법을 따릅니다. (하이픈이 제거되고 카멜표기법) ex) text-aligin = textAlign 태그를 얻어와 style속성으로 접근한다. 3. 노드의 style에 전달되는 값은 문자열로 작성합니다. 규칙 노드.style.css속성 = "값" 예제 1) li의 배경색 변경 목록1 목록2 목록3 css속성변경하기 퀴즈1 ) 옵션의 value 값에 따라 이미지 변경 / color 값에 따라 border 색상 변경 select 안에 option의 value 값을 얻으려면 select.value change 이벤트로 한번에 변경하기 봄 여름 가을 겨울 퀴즈2 ) 아이디와 비밀번호의 조건 충족 focus : input에..

자바스크립트의 두번째 강력한 기능 BOM (Browser Object Model) 브라우저상의 동작 브라우저 객체 모델이라 하며, 자바스크립트 안에 들어있는 내장 함수들을 의미합니다. window(생략가능), location, history, document등이 포함됩니다. DOM (Document Object Model) 태그 핸들링 문서 객체 모델이라 하며, document객체를 의미합니다. (화면을 핸들링하는 객체) 화면에 있는 태그를 선택하고 삭제 생성등을 위해 사용합니다. ! BOM 안에 DOM 이 있음 - 모던 javascript 튜토리얼 이미지 찾아 넣기 https://ko.javascript.info/ document.으로 시작! 다양한 방법으로 태그를 선택할 수 있다. Element( 태..