Javascript:HTML로부터 데이터 받기: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
시각위키텍스트
(새 문서: {{Javascript}} == 개요 == DOM 요소로부터 데이터를 받기 위한 기능. <code>data-변수명='넣을데이터'</code> 형태이다. === 자바스크립트 코드에서...)
 
 
1번째 줄: 1번째 줄:
{{Javascript}}
{{Javascript}}


== 개요 ==
==개요==
DOM 요소로부터 데이터를 받기 위한 기능. <code>data-변수명='넣을데이터'</code> 형태이다.
DOM 요소로부터 데이터를 받기 위한 기능. <code>data-변수명='넣을데이터'</code> 형태이다.


=== 자바스크립트 코드에서 받기 ===
===자바스크립트 코드에서 받기===
{| class="wikitable"
{| class="wikitable"
|+
|+
11번째 줄: 11번째 줄:
|-
|-
|JQuery
|JQuery
|<syntaxhighlight lang="jquery">
|요건 작동 안하더라. 수정 필요.<syntaxhighlight lang="jquery">
데이터=$(this).data("변수명");
데이터=$(this).data("변수명");
console.log(데이터);
console.log(데이터);

2022년 8월 2일 (화) 17:12 기준 최신판

틀:Javascript

  1. Javascript:개요
  2. Javascript:변수, 상수
    1. Javascript:자료구조
  3. Javascript:연산자
  4. 분기문
    1. Javascript:조건문
    2. Javascript:반복문
  5. Javascript:선택자
    1. Javascript:요소 내용 변경
    2. Javascript:HTML로부터 데이터 받기
  6. Javascript:이벤트
    1. Javascript:클릭 이벤트
  7. Javascript:AJAX
    1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
  8. Javascript:활용
    1. Javascript:표 정렬

개요[편집 | 원본 편집]

DOM 요소로부터 데이터를 받기 위한 기능. data-변수명='넣을데이터' 형태이다.

자바스크립트 코드에서 받기[편집 | 원본 편집]

의도 예시코드
JQuery 요건 작동 안하더라. 수정 필요.
데이터=$(this).data("변수명");
console.log(데이터);
javascript 
var input=document.querySelector('#태그아이디');
console.log(input.dataset);  //사전형으로 저장되어 있는 데이터셋을 모두 볼 수 있다.
console.log(input.dataset['키'])  // 특정 키로 접근하고 싶은 경우.

해당 값을 변경하면 DOM 요소에도 변경된 것이 담긴다.

원본 주소 "https://smwiki.info/index.php?title=Javascript:HTML로부터_데이터_받기&oldid=7156"