일부 HTML 태그에 대한 임의의 데이터를 저장하는 방법

338

자바 스크립트가 제공하는 상호 작용이있는 페이지를 만들고 있습니다. 예를 들어 AJAX 요청을 보내 기사의 내용을 가져온 다음 해당 데이터를 div에 표시하는 링크입니다. 분명히이 예에서, 기사의 ID 인 여분의 정보를 저장하려면 각 링크가 필요합니다. 내가 처리 한 방식은 href 링크에 해당 정보를 넣는 것입니다.

<a class="article" href="#5">

그런 다음 jQuery를 사용하여 a.article 요소를 찾고 적절한 이벤트 핸들러를 연결합니다. (여기서 유용성이나 의미에 매달리지 마십시오. 단지 예일뿐입니다)

어쨌든,이 방법은 효과가 있지만 약간 냄새가 나고 전혀 확장 할 수 없습니다 (클릭 기능에 둘 이상의 매개 변수가있는 경우 어떻게됩니까? 그러한 매개 변수 중 일부가 선택적인 경우 어떻게됩니까?)

즉각적인 대답은 요소에 속성을 사용하는 것이 었습니다. 내 말은, 그것이 그들이 원하는 것입니까? (거의).

<a articleid="5" href="link/for/non-js-users.html">

에서 내 최근 질문 이 방법이 유효하면 내가 물었고, 그 다음에 아니, 유효하거나 신뢰성이 아니다, (나는 안) 내 자신의 DTD를 정의하지의 짧은 밝혀졌습니다. 일반적인 반응은 데이터를 class속성 에 넣는 것이 었지만 (내 잘못 선택한 예일 수도 있지만) 나에게는 더 냄새가납니다. 예, 기술적으로 유효하지만 훌륭한 솔루션은 아닙니다.

내가 과거에 사용했던 또 다른 방법은 실제로 일부 JS를 생성하고 <script>태그 의 페이지에 삽입 하여 객체와 연결할 구조체를 만드는 것입니다.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

그러나 이것은 유지하기 위해 엉덩이에 진짜 고통이 될 수 있으며 일반적으로 매우 지저분합니다.

따라서 질문에 도달하기 위해 HTML 태그에 대한 임의의 정보 조각을 어떻게 저장 합니까?

javascript  html 
— 별자리
소스
2
— Tamas Czinege

답변:

361

어떤 버전의 HTML을 사용하고 있습니까?

HTML 5, 가지고 완전히 유효 데이터 -로 시작 속성 정의를 , 예를 들어,

<div data-internalid="1337"></div>

XHTML에서 이것은 실제로 유효하지 않습니다. XHTML 1.1 모드 인 경우 브라우저에서 이에 대해 불평하지만 1.0 모드에서는 대부분의 브라우저가 자동으로 무시합니다.

내가 당신이라면, 스크립트 기반 접근법을 따르겠습니다. 서버 측에서 자동으로 생성하여 유지 관리에 어려움을 겪지 않도록 할 수 있습니다.

— 타마스 치지 네
소스
5
@Tchalvak : 맞습니다. 그러나이 비트는 대부분의 브라우저에서 작동합니다.
— Tamas Czinege
2
다른 사람들은 지원을 기다릴 이유가 없다고 주장했습니다.이 문제의 유일한 문제는 유효성 검사에 실패하고 IE를 중단시키지 않기 때문입니다. TJ Crowler의 답변은 여기를 참조하십시오 : stackoverflow.com/questions/1923278/…
— Chris
42
data-xxx 속성을 사용하고 검색하려는 경우 타사 프레임 워크없이 "domElement.getAttribute ( 'data-whatever')"를 사용하면됩니다.
— Ohad Kravchick
5
— FilmJ
19
주의 : jquery를 통해 데이터 1337을 검색하려면 변수 이름에서 'data'를 제거하십시오. 예를 들어, 다음을 사용하십시오 $(this).data('internalid'); .$(this).data('data-internalid');
— Gideon Rosenthal
134

jQuery를 이미 사용하고 있다면 jQuery를 사용하여 dom 요소에 임의의 데이터를 저장하는 데 권장되는 방법 인 "data"방법을 사용해야합니다.

무언가를 저장하려면 :

$('#myElId').data('nameYourData', { foo: 'bar' });

데이터를 검색하려면

var myData = $('#myElId').data('nameYourData');

그게 전부입니다.하지만 자세한 정보 / 예제 는 jQuery 설명서 를 참조하십시오.

— 프레스 타울
소스
20

또 다른 방법으로, 나는 개인적으로 이것을 사용하지 않지만 작동합니다 (eval ()이 위험하기 때문에 JSON이 유효한지 확인하십시오).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);
— 루카 마테 이스
소스
1
측면 사고의 경우 +1 이 방법을 사용하고 싶지 않을 수도 있지만, 모호하게 실행 가능한 옵션입니다!
— nickf
9
@nickf 대신 jsfiddle.net/EAXmY 를 eval사용 JSON.parse하지 않아도됩니다
— Simon
12

임의의 속성은 유효하지 않지만 최신 브라우저에서는 완벽하게 신뢰할 수 있습니다. 자바 스크립트를 통해 속성을 설정하는 경우 유효성 검사에 대해 걱정할 필요가 없습니다.

대안은 자바 스크립트에서 속성을 설정하는 것입니다. jQuery에는 그 목적을위한 유용한 유틸리티 메소드가 있거나 직접 롤백 할 수 있습니다.

— 에 란 갈 페린
소스
3
왜 data-속성을 대신 사용 하지 않습니까?
— Flimm
10

가능한 모든 브라우저에서 작동하는 해킹은 다음과 같이 공개 클래스를 사용하는 것입니다. <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

이것은 순수 주의자들에게 그다지 우아하지는 않지만 보편적으로 지원되고 표준을 준수하며 조작하기가 매우 쉽습니다. 실제로 가장 좋은 방법처럼 보입니다. 이 경우 serialize, 수정 , 복사 태그를, 또는 다른 거의 아무것도 할,data 것이다 유지 부착 복사 등

유일한 문제는 직렬화 할 수없는 객체를 그런 식으로 저장할 수 없으며 실제로 거대한 것을 넣으면 한계가있을 수 있다는 것입니다.

두 번째 방법은 다음과 같은 가짜 속성 을 사용하는 것입니다.<a articleid='5' href="link/for/non-js-users.html">

이것은 더 우아하지만 표준을 위반하며 지원에 대해 100 % 확신하지 못합니다. 많은 브라우저가 완전히 지원 JS하지만 IE6는 액세스를 지원 하지만 CSS selectors(여기서는 중요하지 않음) 액세스를 지원한다고 생각합니다 . 아마도 일부 브라우저가 완전히 혼란 스러울 수 있으므로 확인해야합니다.

직렬화 및 역 직렬화와 같은 재미있는 작업을 수행하는 것이 훨씬 더 위험합니다.

태그를 복사하려고 할 때를 제외하고는 ids순수 JS해시를 사용하는 것이 대부분 작동합니다. 이있는 경우 tag <a href="..." id="link0">표준 JS방법을 통해 복사 한 다음 data하나의 사본에 첨부 된 파일을 수정하려고 하면 다른 사본이 수정됩니다.

를 복사하지 않거나 읽기 전용 데이터를 tag사용 하는 경우 문제가되지 않습니다 . 를 복사 하고 수정 한 경우 수동으로 처리해야합니다.tag

— 풀다
소스
클래스에 valse를 저장하는 것은 대단합니다
— Saravanan Rajaraman
10

jquery를 사용하여

저장 : $('#element_id').data('extra_tag', 'extra_info');

검색 : $('#element_id').data('extra_tag');

— 사용자
소스
6

현재 jQuery를 사용하고 있지만 onclick 핸들러를 인라인으로 정의하면 어떻게됩니까? 그럼 당신은 할 수 있습니다 :

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>
— 티 반포 손
소스
6

숨겨진 입력 태그를 사용할 수 있습니다. w3.org에서 유효성 검사 오류가 발생하지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

jQuery를 사용하면 (테스트되지 않은) 기사 ID를 얻을 수 있습니다.

$('.article input[name=articleid]').val();

그러나 이것이 옵션이라면 HTML5를 권장합니다.

— phylae
소스
13
style="display: none"숨겨진 입력 필드 에는 실제로 필요하지 않다고 생각 합니다.
— phylae
1
모든 HTML 버전에서 완전히 유효한 좋은 접근 방식. 모든 사용자가 완전히 HTML5 호환 브라우저를 사용한다는 가정하에 코딩을 권장하지 않습니다. 숨겨진 필드에는 display : none이 필요하지 않습니다.
— andreszs
아주 좋아요 이것은 데이터 속성이 유효한 옵션이 아닌 XHTML에 대해 찾은 최고의 솔루션입니다. IMO는 의도하지 않은 방식으로 태그 / 속성을 남용하지 않으며 거의 ​​"냄새"가 없습니다. 그리고 다른 사람들이 말했듯이 : display : none은 실제로 필요하지 않습니다.
— Arahman
4

임의의 데이터를 추가하는 대신 이미 존재하는 의미있는 데이터를 사용하지 않겠습니까?

즉,를 사용 <a href="https://stackoverflow.com/articles/5/page-title" class="article-link">하면 프로그래밍 방식으로 페이지의 모든 기사 링크 (클래스 이름을 통해)와 기사 ID (정규식 /articles\/(\d+)/과 일치 this.href)를 얻을 수 있습니다.

2
이것의 문제점은 또한 확장 할 수 없다는 것입니다.
— ehdv
3

그러기 위해서는 네 가지 선택이 있어야합니다.

  1. id 속성에 데이터를 넣습니다.
  2. 임의의 속성에 데이터를 넣습니다
  3. 클래스 속성에 데이터를 넣습니다
  4. 다른 태그에 데이터를 넣으십시오

http://www.shanison.com/?p=321

— 샤니 슨
소스
@ h4ck3rm1k3 ... id 속성에 포함되어 있지 않습니다. 문서에 고유해야하기 때문에 사이드 바에서 필요한 경우 반복해야합니다. 오래된 질문이지만 여전히 유효합니다
— miguel-svq
2

나는 "rel"속성의 사용을 옹호합니다. XHTML은 유효성을 검사하고 속성 자체는 거의 사용하지 않으며 데이터를 효율적으로 검색합니다.

— 데몬 코류
소스
링크에서 nofollow 속성을 깨뜨릴 수 없습니다
— Carter Cole
2

이것은 좋은 조언입니다. @Prestaul 덕분에

jQuery를 이미 사용하고 있다면 jQuery를 사용하여 dom 요소에 임의의 데이터를 저장하는 데 권장되는 방법 인 "data"방법을 사용해야합니다.

매우 사실이지만 임의의 데이터를 일반 HTML로 저장하려면 어떻게해야합니까? 여기 또 다른 대안이 있습니다 ...

<input type="hidden" name="whatever" value="foobar"/>

숨겨진 입력 요소의 이름 및 값 속성에 데이터를 넣습니다. 서버가 HTML (예 : PHP 스크립트 등)을 생성하고 JavaScript 코드가 나중에이 정보를 사용할 경우에 유용 할 수 있습니다.

분명히 가장 깨끗하지는 않지만 대안입니다. 모든 브라우저와 호환되며 유효한 XHTML입니다. 당신은해야 하지 사용자 지정 특성을 사용하거나 당신이 정말로와 속성을 사용한다 '데이터 -'접두사, 모든 브라우저에서 작동하지 않을 수있다. 또한 문서는 W3C 유효성 검사를 통과하지 못합니다.

— BMiner
소스
확실하지는 않지만 "엄격한"doctype과 함께 사용자 정의 속성을 사용하면 일부 브라우저가 불만을 표시 할 수 있습니다. 어느 쪽이든, 그것은 유효한 XHTML이 아닙니다.
— BMiner
2

임의의 요소 ( <span data-randomname="Data goes here..."></span>) 에 대해 직접 만든 속성의 data- 접두사를 사용할 수 있지만 이는 HTML5에서만 유효합니다. 따라서 브라우저는 유효성에 대해 불평 할 수 있습니다.

<span style="display: none;">Data goes here...</span>태그를 사용할 수도 있습니다 . 그러나이 방법으로 속성 함수를 사용할 수 없으며 css와 js가 꺼져 있으면 실제로 깔끔한 해결책이 아닙니다.

그러나 개인적으로 선호하는 것은 다음과 같습니다.

<input type="hidden" title="Your key..." value="Your value..." />

모든 경우에 입력이 숨겨지고 속성이 완전히 유효하며 <form>태그 내에 있으면 이름이 없어 전송되지 않습니다. 무엇보다도 속성은 기억하기 쉽고 코드는 이해하기 쉽고 멋지게 보입니다. ID 속성을 넣을 수도 있으므로 JavaScript를 사용하여 쉽게 액세스하고으로 키-값 쌍에 액세스 할 수 있습니다 input.title; input.value.

— 예티
소스
나는 당신이 HTML 테이블과 선택을 충분히 사용하지 않았다고 확신합니다. 일부 작업을 저장하기 위해 data-attribute를 더 자주 사용하게됩니다.
1
실제로 'data-'속성을 많이 사용합니다. 그러나 요구 사항에 따라 다릅니다. 예를 들어, <input />을 사용하면 어떤 키도 가질 수 있지만 'data-'의 경우 영숫자가 아닌 문자가없는 소문자 문자열로 제한됩니다.
— Yeti
1

한 가지 가능성은 다음과 같습니다.

  • 모든 확장 / 임의 데이터를 보유 할 새 div 생성
  • 이 div가 보이지 않도록하기 위해 무언가를하십시오 (예 : CSS와 div의 클래스 속성)
  • 확장 / 임의 데이터를이 보이지 않는 div 내에 [X] HTML 태그 (예 : 테이블 셀 내의 텍스트 또는 원하는 다른 것)에 넣습니다.
— ChrisW
소스
1

또 다른 방법은 다음 구문을 사용하여 키 : 값 쌍을 간단한 클래스로 저장하는 것입니다.

<div id="my_div" class="foo:'bar'">...</div>

이것은 유효하며 jQuery 선택기 또는 사용자 정의 함수를 사용하여 쉽게 검색 할 수 있습니다.

— 라파엘
소스
0

이전 고용주에서는 양식 요소에 대한 정보를 보유하기 위해 항상 사용자 정의 HTML 태그를 사용했습니다. 캐치 : 우리는 사용자가 IE를 사용해야한다는 것을 알고있었습니다.

당시 FireFox에서는 제대로 작동하지 않았습니다. FireFox가이를 변경했는지 여부는 알 수 없지만 HTML 요소에 고유 한 속성을 추가하면 독자의 브라우저에서 지원되지 않을 수도 있습니다.

독자가 사용하는 브라우저 (예 : 회사의 내부 웹 애플릿)를 제어 할 수 있다면 반드시 시도하십시오. 무엇을 다칠 수 있습니까?

— 작은 권총
소스
0

이것은 내가 당신에게 아약스 페이지를하는 방법입니다 ... 매우 쉬운 방법입니다 ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

이것이 작동하는 방법은 기본적으로 클래스 'ajx'가있는 모든 URL을보고 키워드를 대체하고 # 기호를 추가하는 것입니다 ... js가 해제되면 URL은 정상적으로 작동합니다 ... 모두 " apps "(사이트의 각 섹션)에는 자체 키워드가 있습니다. 따라서 페이지를 추가하기 위해 위의 js 배열에 추가하기 만하면됩니다 ...

예를 들어 현재 설정은 다음과 같이 설정됩니다.

 var objApps= ['ads','user'];

따라서 다음과 같은 URL이 있으면

www.domain.com/ads/3923/bla/dada/bla

js 스크립트는 / ads / 부분을 대체하므로 내 URL은

www.domain.com/ads/#p=3923/bla/dada/bla

그런 다음 jquery bbq 플러그인을 사용하여 페이지를 적절히로드합니다 ...

http://benalman.com/projects/jquery-bbq-plugin/

— 제이슨
소스
0

메타 데이터 플러그인은 jQuery를 쉽게 검색하고 사용할 수있는 방식으로 html 태그로 임의의 데이터를 저장하는 문제에 대한 훌륭한 솔루션이라는 것을 알았습니다.

중요 : 당신이 포함 실제 파일이 아니라 (5) 킬로바이트가 아니라 37 (전체 다운로드 패키지의 크기) KB

다음은 Google 웹 로그 분석 추적 이벤트를 생성 할 때 사용하는 값을 저장하는 데 사용되는 예입니다 (참고 : data.label 및 data.value는 선택적 매개 변수입니다)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>
— 바이오 프랙탈
소스
0

html에서 속성 이름 앞에 접두사 'data-'를 사용하여 사용자 정의 속성을 저장할 수 있습니다.

<p data-animal='dog'>This animal is a dog.</p>. 설명서 확인

이 속성을 사용하여 jQuery를 사용하여 속성을 동적으로 설정하고 가져올 수 있습니다.

<p id='animal'>This animal is a dog.</p>

그런 다음 위의 태그에 대해 'breed'라는 속성을 작성하려면 다음을 작성할 수 있습니다.

$('#animal').attr('data-breed', 'pug');

언제든지 데이터를 검색하기 위해 다음과 같이 작성할 수 있습니다.

var breedtype = $('#animal').data('breed');

— 아카 쉬 고쉬
소스
0

실제 작업이 서버 측에서 수행되는 한 어쨌든 출력의 html 태그에 사용자 정의 정보가 필요한 이유는 무엇입니까? 서버에서 다시 알아야 할 것은 사용자 정의 정보가있는 모든 종류의 구조 목록에 대한 색인입니다. 정보를 잘못된 곳에 저장하려고 생각합니다.

그러나 불행히도 많은 경우에 올바른 솔루션이 올바른 솔루션이 아니라는 것을 알고 있습니다. 이 경우 추가 정보를 보유 할 자바 스크립트를 생성하는 것이 좋습니다.

많은 시간이 지나고:

이 질문은 data-...속성이 html 5의 출현으로 유효한 옵션이 되기 전에 약 3 년 전에 게시 되었으므로 진실이 바뀌었고 원래의 대답은 더 이상 관련이 없습니다. 이제 데이터 속성을 대신 사용 하는 것이 좋습니다 .

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>
— 크리스
소스
그러면 자바 스크립트에 데이터를 어떻게 전달해야합니까?
— nickf
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.