DOM 객체의 구조
이것은 문장입니다.
태그 이름으로 DOM 객체 찾기
저는 빨간 사과를 좋아해서 아침마다 한 개식 먹고 있어요.
운동할 때는 중간 중간에 바나나를 먹지요. 탄수화물 섭취가 빨라
힘이 납니다. 또한 달콤한 향기를 품은 체리와 어름 냄새 물씬
나는 자두를 좋아합니다.
Class 이름으로 DOM 객체 찾기
- 짜장면
- 짬뽕
- 탕수육
- 마라탕
- 훠궈
- 스테이크
- 프렌치 프라이
- 맥앤치즈
- 미트볼 파스타
- 오차즈케
- 낫토
- 우동
- 라멘
문서작성기 만들기
아래박스에 HTML 문서를 작성하고 출력하기 버튼을 누르세요.
HTML 태그의 동적 추가 및 삭제
DOM 트리에 객체를 동적으로 삽입가능
1.HTML태그에 이벤트 리스너 작성
마우스를 올리면 배경색이 바뀜
2. 이벤트 리스너 프로퍼티에 함수 연결
함수연결 방법 = 마우스 올리면 색 바뀜.
3.addEventListener() 함수 이용
마우스 올리면 배경색 바뀜
이벤트 객체 전달
마우스를 올려보세요
클릭해보세요
더블클릭해 보세요...
이벤트 객체 정보 표시
이벤트의 디폴드 행동 취소 preventDefault() 함수 이용
CRIS 홈페이지로 이동하시겠습니까?
이것은
문장입니다.
이벤트의 흐름 (캡쳐단계, 버블단계)
이것은 문장입니다.
간단한 계산기 만들기
계산하고자 하는 수식을 입력하고 계산 버튼을 누르세요.
마우스 이벤트 리스너
마우스 관련
이벤트
가 발생합니다.
마우스 이벤트 객체의 프로퍼티와 onmousemove
이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고, 마우스의
위치를 보여줍니다.
컨텍스트 메뉴 금지
마우스 오른쪽 버튼 클릭 금지
마우스 이벤트 리스너
마우스 관련
이벤트
가 발생합니다.
라디오 버튼 활용
체크박스 활용
물품을 선택하면 금액이 자동 계산됩니다.
selest 요소 활용
과일을 선택하면 이미지가 출력됨.
키 이벤트 리스너
텍스트 창에 키를 눌러보세요. Alt, Shift, Ctrl 키도 가능 합니다.
학교식당 메뉴판
주문하세요...