아코디언메뉴, 노드순회 parentNode, parentElement/nextElementSibling

grace-go.tistory.com/79

자식태그, 부모태그, 형제태그

querySelector()사용 : p태그 / .클래스명 / #id명

---

 

각각 클릭이벤트달면안됨

div끼리 붙어있었다면 previousSibling적용

타이틀안에 콘텐트가펼처진다. 리무브가 실행되면서 다시펼쳐진다.

모든노드대상시 - 빈공백도 텍스트로 여긴다 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;

모든노드대상 : 주석,텍스트,빈공백 모두 노드

모든노드가 아니라 element노드만 할때는 nextElementSibling

특정 앨리먼트만 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;

Node와 ElementNode는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.

타이틀이 펼쳤다 접혔다한다

 

nextElementSibling

//다음형제태그이름에 d-none을 제거

e.target.nextElementSibling.classList.toggle("d-none");

title를 클릭하면 title의 형제인 content가 출력된다. 

nextElementSibling vs nextSibling 차이

nextSibling은 태그사이의 공란(텍스트)가 출력된다.

온클릭은 부모에게한번만

업버튼을 누르면 숫자가 올라가고 다운을누르면 숫자가 내려간다. 선택을 누르면 각 아이템박스에 dotborder가생긴다

item.parentNode : 위(up)버튼을 눌렀다면 up의 부모 div =" item "

item.parentNode.querySelector("input") : 부모노드중 input을 선택