JavaScript에서 데이터 속성 값에 액세스하고 사용하는 방법은 무엇입니까?

JavaScript에서 데이터 속성 값 얻기

HTML에서 데이터 속성을 사용하면 스타일이나 내용에 영향을 주지 않고 요소 내에 데이터를 저장할 수 있습니다. JavaScript로 작업할 때 이러한 속성 값에 액세스하고 활용할 수 있습니다.

다음 HTML 마크업을 고려하세요.

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

이제 데이터 속성을 캡처해야 한다고 가정해 보겠습니다. "data-"로 시작하고 특정 값의 JSON 표현을 추출합니다. 처음에는 이 작업을 시도할 때 null 값이나 오류가 발생할 수 있습니다.

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});</code>

이 문제를 해결하려면 모든 데이터 속성의 지도와 같은 컬렉션을 제공하는 데이터 세트 속성에 액세스해야 합니다. 수정된 JavaScript 코드는 다음과 같습니다.

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
    var json = JSON.stringify({
        id: parseInt(this.dataset.typeId),
        subject: this.dataset.type,
        points: parseInt(this.dataset.points),
        user: "Luïs"
    });
});</code>

이렇게 하면 원하는 값이 성공적으로 캡처됩니다.

{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

데이터 세트 속성을 활용하면 JavaScript의 데이터 속성에 쉽게 액세스하고 조작할 수 있습니다. 코드를 더욱 효과적으로 제어하고 유연성을 확보할 수 있습니다.

위 내용은 JavaScript에서 데이터 속성 값에 액세스하고 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!