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>

이러한 데이터 속성의 값을 검색하려면 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>

dataset 속성은 요소의 모든 데이터 속성을 포함하는 객체를 반환합니다. 여기서 속성 이름은 "data- " 접두사가 제거되었습니다. 위 코드에서는 이 개체를 사용하여 추가 처리에 사용하거나 서버로 보낼 수 있는 JSON 개체를 채웁니다.

이 코드의 결과는 개체를 나타내는 JSON 문자열입니다.

<code class="json">{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "Luïs"
}</code>

이는 데이터세트 속성을 사용하여 JavaScript 코드의 데이터 속성 값에 액세스하는 방법을 보여주며, 이를 통해 다양한 목적으로 이 정보를 쉽게 추출하고 조작할 수 있습니다.

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