5개의 div요소를 각각 접근하는 방법을 알아본다.
jQuery를 이용해 변수에 div태그를 배열로 저장한다.
eq( ) - jQuery
divList에는 div태그들이 배열로 저장되어있고 eq를 사용하면 해당 인덱스의 요소를 호출할 수 있다.
이때 eq는 jQuery객체를 리턴해주므로 jQuery문법을 사용해 다룬다.
인덱스 1의 div의 배경색이 파란색으로 변경됬다.
get( ) - js element
get메소드는 eq와 다르게 js의 순수 엘리먼트 요소 형식으로 넘어온다.
사용법은 비슷하지만 js의 문법을 통해 다뤄야한다.
인덱스 0의 div의 배경색이 하늘색으로 변경됬다.
arr[ ]
메소드 없이 배열 자체로 취급하여 다룰 수 있다.
이때도 js의 element형식으로 넘어온다.
인덱스 4의 div에 노란색 테두리가 생성되었다.
'Front-end > JavaScript' 카테고리의 다른 글
| [자바스크립트] DOM구조를 통한 태그 접근, Children, Contents, parent, prev, next, first, last (0) | 2022.05.21 |
|---|---|
| [자바스크립트] js 지정태그 모두 접근하기, each (0) | 2022.05.20 |
| [자바스크립트] js로 노드요소 생성 및 제거하기, 게시판 만들기 (0) | 2022.05.15 |
| [자바스크립트] js 배열 정렬, 오름차순 정렬, 내림차순 정렬, sort (0) | 2022.05.12 |
| [자바스크립트] js 배열원소 추가, 삭제, push, pop, splish, shift, unshift (0) | 2022.05.12 |