![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/pQuDb/btsHqKvcA9B/3GJcMyCTyPyi6EGw4e8Hq0/img.png)
✏️ DOM 요소에 함수 직접 연결이벤트 처리기 함수가 간단한 경우에는 DOM 요소에 직접 함수를 연결할 수 있습니다. 아래의 예제 코드를 보면 img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기를 직접 연결합니다. 이미지를 클릭하면 창이 나타나지만 그 외의 다른 곳을 클릭하면 아무것도 나타나지 않습니다. ✏️ 함수 이름을 사용해 연결이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있습니다. 이 경우에는 함수 이름 다음에 괄호를 추가하지 않습니다. 아래 예제는 이미지를 cup 변수로 저장한 후 이벤트가 발생했을 때 changePic() 함수를 실행합니다. 빨간 컵을 클릭하면 파란색 컵으로 색깔..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b2VW9Q/btsHrxV84kY/RuuYnByhVTtNg6eJNrkq11/img.png)
✏️ DOM에 접근 - getElementById() 메서드document.getElementById("heading")// getElementById() 메서드를 사용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있습니다.// 기본형 => 요소명.getElementById("id명") ✏️ DOM에 접근 - getElementsByClassName() 메서드document.getElementByClassName("bright")// getElementsByClassName() 메서드는 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근할 수 있습니다. class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로 getElementsByClassName() 메서드를 사용하면 반환 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/oMBRw/btsHqqQpM6O/8MKmRHrguVBnoogJk6u3vk/img.png)
✏️ 문서 객체 모델(DOM)자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 말합니다. HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있습니다. DOM은 웹 문서를 하나의 객체로 정희하고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 객체로 정의합니다.웹 문서 자체는 document 객체이고 삽입한 이미지는 image 객체입니다. ✏️ DOM 트리자바스크립트로 DOM을 조작하기 위해서는 DOM으로 어떻게 표현되는지를 알아야 합니다. DOM은 웹 문서의 요소들을 부모 요소와 자식 요소로 구분합니다. 마치 트리처럼 말이죠. Do it! // 위의 코드들을 CSS에서..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bacmuR/btsHqQOnTnc/JB0ik3QBBIXaktzFBkKeIk/img.png)
✏️ 브라우저 관련 객체종류설명window브라우저 창이 열릴 때마다 하나씩 만들어지고 브라우저 창 안의 요소 중에서 최상위document웹 문서마다 하나씩 있으며 태그를 만나면 만들어짐, HTML 문서의 정보가 담겨 있음navigator현재 사용하는 브라우저의 정보가 들어 있음history현재 창에서 사용자의 방문 기록을 저장location현재 페이지의 URL 정보가 담겨 있음screen현재 사용하는 화면 정보를 다룸✏️ window 객체의 프로퍼티종류설명document브라우저 창에 표시된 웹 문서에 접근 가능frameElement현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환innerHeight내용 영역의 높이를 나타냄innerWidth..
- Total
- Today
- Yesterday
- 반복문
- 자바스크립트
- 유클리드 호제법
- CSS
- 백준 풀이
- 자료구조
- DFS
- 최단 경로
- 에라토스테네스의 체
- 투 포인터
- 우선순위 큐
- C++ Stack
- 알고리즘 공부
- 유니온 파인드
- c++ string
- 스택
- DP
- html
- 백준
- 이분 매칭
- BFS
- 자바
- HTML5
- 카운팅 정렬
- 세그먼트 트리
- java
- 알고리즘
- C++
- Do it!
- js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |