JS * 사용자(?) Attribute 만들고 사용하기 ( feat. html )

오늘 코딩을 하다가 충격적인 것을 알게되었다.

html element에 내가 원하는 attribute를 만들 수 있었다 😱.

 

이때까지 그것도 모르고..

'input에선 alt에 정보를 넣어놓자! 근데.. select box랑 radio는 어떻게 해야 하지'라는 멍충이 같은 고민을 하고 있었다니..

 

역시 공부만이 살길이다.

 

 

어떻게 하나?

 html에서 attribute 만들기(?)

<input id="mine" type="text" my-field="내가 만든 애트리뷰트"/>

그냥 저렇게 원하는 애트리뷰트명을 적고 값을 주면 끝이다 🤭.

 

 

Attribute 값 가져오기

위 예시에서 앨리먼트-식별자는 #mine 애트리뷰트-이름은 my-field 가 되겠다!

Javascript

• document.querySelector('앨리먼트-식별자').getAttribute('애트리뷰트-이름');
  querySelector을 사용하면 tag, class, id를 통한 검색이 가능하지만 첫번째 요소만 가져온다!
  속도는 getElementByID() 메소드가 1.2배 정도 더 빠르다고 한다.
• document.getElementById('앨리먼트-아이디').getAttribute('애트리뷰트-이름');
  
  

JQuery

• $('앨리먼트-식별자').attr('애트리뷰트-이름');