extra) 무한히 증식하는 FORM(혹은, 그 어떤 것이라도)에 관하여 [그 안의 element 선택하기]

여기, 댓글처럼, 무한히 증식하는 FORM 양식이 있다고 가정하자.

대충 일단 3개만 만들어보았다.

이 친구들에게 button을 누르면, log와 함께 p의 값이 바뀌는 코드를 만들고싶다.

 

예전같았으면,

form을 querySelctorAll() 로 전부 잡아

for of 를 돌려서, 전부 eventListener 달아서, submit 연결하고

event.preventDefault() 를 사용해 form을 멈춰서

다시 전부 [ FORM 안에있는  p태그들의 class를  querySelctorAll() 로 전부 잡아 ],

 let i = form.dataset.xx  하고

뭐 if 써서, p[i] 해서 뭐시기 저시기 하거나 했을텐데...

 

아니! 이젠 더 스마트해졌지!

1.  FORM을 전부 잡아, Listener 달고

2.  event.target.querySelector(" ") 을 다시 실행!

3. 각각의 FORM안에있는 첫번째 query된 태그를 선택가능!

4. 맘대로 주물러본다.

 

와 진짜 편하다 이제... 이런 세계가..

자매품 event.taget.parentElement. 

querySelectorAll() 등등 많음