yadameda
170
2019-05-28 22:24:15
6
408

현업에서 많이 쓰는 jquery에서 dom element를 선택하는법?


전에도 비슷한 질문을 했는데, 보통현업에서는 어떤방법을 쓰는지 궁금합니다.

조작하거나 값을 가지고 오고싶은 element를 선택할때

jquery의 기본 selector를 사용하는경우, 여러단계를 거쳐서(parent, child, find) 요소를 선택하게 되는데,

성능상으로도 안좋을것 같고 html 코드가 변경되면 바로 jquery select부분도 변경을 해야하는데,

이런경우에는 어떻게 하나요? 


이전 답변에서는  select 를 위해 style이 없는 class를 추가하는 방법이 있다고 했는데,

아래처름 쓰는게 널리 사용하는 방법인가요? 

<button class="red jquery-member-add-button">추가</button>


그리고 dom element에 data가 있어야 편한 경우가 있는데,  이런경우는 어떤 attribute를 사용하나요?

아래처럼 표준 attribute가 아닌 attribute를 추가해서 사용하는건 좋지가 않다는데,

<button data-member-id="3">삭제<button>


만약 <input type="hidden" value="3"> 이런식으로 hidden input 을 추가하면,

button.onclick 에서 다시 값을 select해야하고 여간 불편한게 아닌데,

이런경우는 어떻게하나요?


프론트엔드쪽에서 일하시는분들은 어떻게 작성하는지 궁금합니다.

0
0
  • 답변 6

  • 사는게힘듭니다
    2019-05-28 22:42:02

    event.srcElement.value 를 사용하시면

    사용자가 직접 마우스로 클릭한 값을 가져오실 수 있습니다.

    1
  • 이리나이
    1k
    2019-05-28 23:09:49 작성 2019-05-28 23:10:05 수정됨

    프론트엔드로 일하는 사람은 제이쿼리를 안쓰는 추세입니다. 기존 개발방식에선 많이 쓰죠.

    0
  • 훈마로
    378
    2019-05-29 09:39:31

    1. data-* attribute는 w3g 표준입니다. 사용하셔도 무방합니다.

    2. id와 class, html element 셋 모두를 이용해서 style 을 입힙니다. 어느 경우에 id, class, element를 selector를 써야하는지는 검색과 공부와 경험을 통해 익히셔야 할 부분 같네요.

    http://www.nextree.co.kr/p8468/

    위의 링크 중반에 id, class 사용 기준에 대해 대강의 설명이 나와있습니다.

    3. 데이터를 주고 받는 프로세스에 따라 다를텐데요.

    비동기 통신이면 응답에 따라 업데이트해줘야 할 엘리먼트의 특정 요소들을 다 업데이트 해주셔야합니다.

    말씀하신 상황이 정확히 어떤 상황인지 모르겠네요. 

    특정 row에 해당하는 button이 있고 data attribute에 특정 value값이 있어서 button.onclick 시 button의 데이터를 input hidden에 넣어야 된다.. 라고 이해하면 될까요?

    jquery는 기본적으로 이벤트 기반 dom 조작 방식이라 생각하신대로 특정 event를 발생시켜 특정 element에서 필요한 데이터를 가져오셔야 합니다.

    뭔가 데이터 이동을 자연스럽게 하시려면.. 데이터 드리븐 방식으로 프론트엔드 프레임워크들이 그런 방식을 씁니다. 예로 들면, 테이블을 vue 컴포넌트로 작성하여 테이블의 데이터를 비동기로 서버에서 가져와 data에 담습니다. 그 때 vue 컴포넌트에서 특정 data (row)를 삭제시 실제로 data 자료구조에서 해당 data가 삭제가 됩니다. 그러면서 화면은 자연스럽게 삭제된 데이터의 row가 사라집니다.

    이걸 jquery로 하려면 일일이 이벤트 발생시키고 셀렉터를 이용해서 html dom 을 조작해야되는 불편함이 있죠.


    1
  • yadameda
    170
    2019-05-29 15:22:40

    //훈마로

    답변 감사합니다. 

    jquery에서 조작하고 싶은 element를 선택할때 아래처럼 써도 되는건가요?

    <button class="red jquery-member-add-button">추가</button>

    아니면, css는 표현 부분이니깐, 이부분은 건들지 많고,

    jquery에서 적용하는 selector 함수들, (parent, child, find) 로 element를 선택해야 하는건가요?




    0
  • 훈마로
    378
    2019-05-30 10:34:05
    0
  • yadameda
    170
    2019-05-30 16:57:34

    //훈마로
    감사합니다.
    element select를 위한 class추가 보다는, jquery select함수를 효율적으로 사용하는 방법을 익히는게 낫다는 것 이군요!

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.