04/26 Javascript 아코디언 예제: 노드 순회하기 , 버블링, 타겟팅

저번시간에
이벤트 버블링과 Event.target 속성(toggle)을 알아봤다

 

 

 

 

-> 이때 타이틀 컨테이너에 각각 클릭이벤트를 달아주면 안됨

 

 

 

무엇을 클릭하든 t가 출력되는 스크립트 코드 작성

 

 

 

 

 

 

 

 

 

 

타이틀 누르면 그 아래 동생 콘텐츠가 보이게 하기

 

 

 

 

 

 

 

누르면 콘텐츠박스가 열림

 

 

 

여기서 Element를 써주지 않으면 모든 것들을 노드로 취급할 수 있기 때문에

Element 노드만 대상으로 할 수 있도록 써줘야 한다

 

 

->

readonly attribute Node    parentNode; 
readonly attribute Node    firstChild; 
readonly attribute Node    lastChild; 
readonly attribute Node    previousSibling; 
readonly attribute Node    nextSibling; 
readonly attribute List<Node> childNodes;

readonly attribute Element    parentElementNode; 
readonly attribute Element    firstElementChild; 
readonly attribute Element    lastElementChild; 
readonly attribute Element    previousElementSibling; 
readonly attribute Element    nextElementSibling; 
readonly attribute List<Element> children;

하지만 부모자식간에는 중간에 끼는 텍스트나 주석..등등이 없을 확률이 높아

Element 안쓰고 Node만 써도 될 확률이 높다

 

 

 

remove를 toggle로 바꿔주면 열었다 닫았다 할 수 있음

 

 

 

 

 

 

 

다른예제 준비하기 : 8번째 확인예제

 

두줄의 코드둘다 버튼인데 아래꺼는 버튼모양에 이미지를 입히고 싶을때 사용

 

 

 

css maker이용해서 편하게 속성 다운받아 적자

 

 

 

 

 

ex8. 아코디언 : 확인예제

 

 

 

자 여기서 위, 아래, 선택 버튼만을 눌러야 반응하는 클릭함수 만들어보자

 

 

 

 

-> 저 세개의 버튼이 아니면 반응하지 않는 클릭이벤트이다

 

 

 

 

input 은 현재 up버튼과 down버튼의 형제 중에 있다 

-> 그 버튼들의 부모노드에서 input을 select해주면 되는 것. 

 

-> 그 인풋의 value를 정수변환해주어 +- 1 해주면 버튼을 누를때마다 그에 상응하는 이벤트 발생

 

 

 

 

 

 

그리고나서 

 

선택버튼을 누르면 해당하는 아이템박스에 점선으로 표시나게 해주는 코드

 

 

-> 간단하게 부모노드에 스타일입혀주기