JavaScript: 효율성 극대화를 위해 HTML5 데이터 속성 활용

이 기사에서는 JavaScript를 사용하여 HTML5 데이터 속성을 얻는 방법에 대해 설명합니다. 일반 JavaScript 및 jQuery에서 이러한 데이터 속성을 사용하는 방법을 보여주기 위해 몇 가지 실제 예제를 살펴보겠습니다.

JavaScript는 인터넷의 핵심 기술 중 하나입니다. 대부분의 웹사이트에서 사용되며 플러그인 없이도 모든 최신 웹 브라우저에서 지원됩니다. 이 시리즈에서는 일상적인 JavaScript 개발에 도움이 되는 팁과 요령에 대해 논의하겠습니다.

웹 애플리케이션이나 웹사이트에 다양한 HTML 요소와 함께 몇 가지 추가 정보를 저장해야 하는 경우가 많습니다. 이는 사용자에게 아무런 의미가 없을 수도 있지만 해당 정보를 기반으로 조치를 취하려는 경우 도움이 될 수 있습니다.

예를 들어 데이터베이스의 행을 포함하는 HTML 테이블이 있는 경우 각 행에 해당하는 데이터베이스 ID를 저장할 수 있습니다. 이렇게 하면 편집 및 기타 작업이 더 쉬워집니다. 이는 사용자 정의 데이터 속성에 유용하게 사용됩니다.

이러한 사용자 정의 데이터 속성이 도입되기 전에는 개발자가 클래스 속성을 사용하여 이러한 정보를 저장하는 경우가 많았지만 클래스 속성은 실제로 이러한 목적으로 사용되지 않으며 이로 인해 코드 및 사이트 마크업을 이해하는 데 혼란이 발생할 수 있습니다.

HTML5 사용자 정의 데이터 속성이 도입되면서 HTML에서 사용자 정의 데이터를 저장하고 검색하는 것이 매우 쉬워졌습니다.

바닐라 JavaScript를 사용하여 데이터 속성에 액세스

이 섹션에서는 일반 JavaScript를 사용하여 HTML5 데이터 속성을 얻는 다양한 방법에 대해 설명합니다.

HTMLElement.dataset 속성

dataset 속성을 사용하면 요소의 데이터 속성에 쉽게 액세스할 수 있습니다.

다음 예를 살펴보겠습니다.

먼저, 데이터 속성을 각 <li> 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 ID。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 <li> 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getEmpId 函数，该函数最终获取 employee 的值 - id 与相应 <li> 요소와 연결합니다.

getEmpId 함수에서는 첫 번째 매개변수로 전달되는 <li> 요소의 getEmpId 函数中，我们使用了 <li> 元素的 dataset 属性，该属性作为第一个参数传递。 dataset 属性返回 DOMStringMap 속성을 사용합니다.

이 속성은 개별 속성을 가져오는 데 사용할 수 있는 DOMStringMap 개체를 반환합니다.

dataset 属性获取各个属性时，有一些重要的事情。 data- 前缀已从属性名称中删除。任何后跟连字符的小写字符都会转换为大写字符，并删除连字符。换句话说， dash-style 属性名称将转换为 camelCase

속성을 사용하여 개별 속성을 가져올 때 몇 가지 중요한 사항이 있습니다. data- 접두사가 속성 이름에서 제거되었습니다. 소문자 뒤에 하이픈이 오면 대문자로 변환되고 하이픈이 제거됩니다. 즉, dash 스타일 속성 이름은 camelCase 객체 키로 변환됩니다. 다른 역할은 변경되지 않습니다.

data-employee-id 属性将转换为 employeeId。因此，您可以使用 element.dataset.employeeId 来获取 data-employee-id이 예에서는 이러한 규칙을 사용하여

속성 값.

dataset이것이 바닐라 JavaScript에서

가 올바르게 작동하는 방법입니다.

getAttribute()

방법

getAttribute이 섹션에서는

메서드를 사용하여 데이터 속성의 값을 가져오는 방법에 대해 설명합니다.

이전 섹션에서 설명한 예제를 수정하겠습니다.

getAttribute 方法获取自定义数据属性非常简单。您只需传递整个属性名称以及 data-보시다시피 HTML 요소의

메소드를 사용하면 사용자 정의 데이터 속성을 얻는 것이 매우 간단합니다. 속성 값을 가져오려면 data- 접두사와 함께 전체 속성 이름을 전달하기만 하면 됩니다.

jQuery 라이브러리를 사용하여 데이터 속성에 액세스

이 섹션에서는 jQuery 라이브러리를 사용하여 HTML5 데이터 속성을 얻는 방법에 대해 설명합니다.

data()

방법

datajQuery

메소드를 사용하면 요소의 데이터 속성을 쉽게 얻을 수 있습니다.

다음 예제를 통해 jQuery 데이터 메서드가 어떻게 작동하는지 살펴보겠습니다.

보시다시피 해당 값을 얻으려면 데이터 속성 이름의 camelCase 버전을 전달하기만 하면 됩니다.

attr()

방법

attrjQuery에서는

메서드를 사용하여 요소의 특정 속성 값을 가져올 수도 있습니다. 🎜

jQuery에서 attr 메소드를 사용하는 방법을 간단히 살펴보겠습니다.

으아악

보시다시피 attr 方法的工作方式与普通 JavaScript 中的 getAttribute 메소드는 일반 JavaScript의 getAttribute 메소드와 동일하게 작동합니다.

jQuery에서 data와 data 和 attr 方法的区别在于 data 메서드의 차이점은 data 메서드는 내부적으로 data 속성에서 얻은 문자열을 숫자, 부울과 같은 해당 유형으로 변환한다는 것입니다. 가치관 등

jQuery를 사용하여 쉽게 데이터 속성을 얻는 방법입니다.

결론

오늘은 JavaScript를 사용하여 HTML5 데이터 속성을 얻는 방법에 대해 논의했습니다. 몇 가지 실제 예제를 통해 HTML5 데이터 속성이 일반적인 JavaScript 및 jQuery 라이브러리와 작동하는 방법을 배웠습니다.

위 내용은 JavaScript: 효율성 극대화를 위해 HTML5 데이터 속성 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!