DOM을 제어하는 것 : HTML을 제어하는것
(DOM = document - HTML)
*선택자*
- 태그를 선택, 변경, 추가, 삭제, 생성 가능하다
-CSS에서는 원래 있는 태그에서만 사용가능 하다
(생성 삭제 가능한 js와의 차이점)
- 선택하는 방법 : 아이디, 클래스, 속성, 태그, 나, +) 부모와 자식, 형제
*이벤트*
- Event : 사용자의 행위, 패턴
ex) 클릭, 드래그, 사이즈변경, 마우스 올리거나 내리거나, 키보드 누를때 .
< DOM control >
*코드를 작성할때의 편리함을 위해 document를 doc변수에 넣어놓았다,*
*선택된 태그의 확인을 위해 아래의 함수를 미리 만들어놓았다*
1. id로 control하기
getElementById('아이디')
<HTML>
<화면>
<실행>
console.log에 찍으면 태그 자체가 나온다.
<함수실행>
open 이라는 변수에 open이라는 id를 가진 태그를 선택했다.
변수 item이 하나의 객체. item 객체 안에 있는 addEventListener라는 함수를 실행한 것이다.
실행해 보면 item id를 가진 두 태그 중 위의 태그만 item 변수에 선택되어 들어간 것을 볼 수 있다.
↓
*id가 고유해야 하는 이유*
( 단수 )
같은 아이디가 여러개 있을 경우 : 위에서부터 읽어 내려오면서 맨 위에 있는 태그만 js가 잡는다
(CSS-둘다 잡음)
그 이유로 getElementById에서 'Element'라는 단수형을 사용한다.
2 . 태그로 control하기
getElementsByTagName('태그명') ->nodelist반환
- 복수라서 Element(단수)가 아닌 Element's' (복수)
- 여러개가 잡히므로 배열과 비슷한 형태로 잡힌다
- 배열과 형태만 비슷할 뿐 배열이 아닌 nodelist 이다.
- index와 길이를 반환한다
* node : Element와 비슷한 요소. element를 포함하는 요소이다
<HTML>
<화면>
<getElementsByTagName 실행>
↓
배열과 비슷한 형태로 console에 찍힌다.
위에서 부터 찾아서 있는 p를 다 넣는다.
안에 있는 내용.. 정보들이 다 나옴
길이가 있다.
<함수 실행하기>
1. 변수명 통째로 함수를 실행할 순 없다.
2. 요소 하나하나에 적용해야 한다
* for문으로 간단하게 나타내기 *
3. class로 control하기
getElementsByClassName('클래스명') : 여러개 찾기 -> node list 반환
<HTML>
1)
<getElementsByClassName 실행>
↓nodelist 형태로 여러개가 다 잡힌다.
4. querySelector(All)
querySelector('.클래스명 or 태그명 or #아이디') : 하나만 찾기
querySelectorAll ('.클래스명 or 태그명 or #아이디') : 여러개 찾기 -> node list 반환
( 아래 코드는 바로 위의 클래스 control의 HTML코드와 같은 것을 사용했다)
1)
<querySelctor실행>
단일 클래스를 찾기 위한것.
뒤의 선택자를 꼭 .class~~ 로 써야한다,
(1) box1찾기 ( 하나만 있는 class )
↓ console에 찍힌 내용
코드 자체가 찍힘
(2) box 찾기 (여러개 있는 class)
↓ 하나만 찍힘
위에서 아래로 내려가면서 찾다가 가장 먼저 만나는 태그만 변수에 넣는다.
2)
<querySelectorAll 실행>
여러개의 태그를 찾는다
Nodelist로 나타냄.
5. 복합구조
<HTML>
1. querySelector로 .menu 태그 잡기
↓ console.log 찍힌내용
2. ultag내의 li태그를 getElementByTagName로 잡기
↓ console.log 찍힌 내용
(nodelist)
3. litag의 젓번째, 두번째 태그에서 a 태그 잡기
↓
console찍힌 내용
: nodelist지만 하나만 들어있다.
함수 실행
'프론트엔드 > JavaScript' 카테고리의 다른 글
| <JS> DOM제어 예제1. 버튼 마다 다른함수 주기 (0) | 2017.08.10 |
|---|---|
| <JS> DOM제어하기(2) 자식태그, 부모태그, 형제태그 (0) | 2017.08.10 |
| <JS> 지역변수(local)와 전역변수(global) (0) | 2017.08.05 |
| <JS> function 예제 (0) | 2017.08.05 |
| <JS> 함수 (function) (~es5) (0) | 2017.08.05 |