이 게시물에서는 JavaScript에서 데이터 속성을 사용하는 방법을 설명합니다.
JavaScript에서 데이터 속성을 사용하는 방법은 무엇입니까?
자바스크립트에서는 “ 데이터 ” 속성은 웹 페이지에 표시되지 않는 추가 정보를 저장하는 데 사용됩니다. 이 정보는 사용자의 요구 사항에 따라 동적으로 작성, 액세스, 읽기 및 변경될 수 있습니다. 이 섹션에서는 데이터 속성에 관해 논의된 작업을 실제로 수행했습니다.
통사론
< 요소 데이터 -*= '어떤 값' >
위 구문에서:
- “ 요소 ”는 data 속성이 사용되는 HTML 요소를 나타냅니다.
- “ 데이터-* ”는 접두사(data-)로 시작하는 다중(*) 데이터 속성을 나타냅니다. 즉, 하이픈이 뒤에 오는 데이터 키워드입니다.
- 어떤 값: 데이터 속성의 값을 지정합니다.
이제 위 구문을 사용하여 데이터 속성을 만듭니다.
데이터 속성 생성
< 사업부 ID = '내 사업부' 데이터 - 이름 = '앨빈' 데이터 - 나이 = '40' 데이터 - 성별 = '남성' > div >명시된 한 줄 HTML 코드는 다음을 생성합니다. 데이터 이름 ',' 데이터 시대 ', 그리고 ' 데이터 성별 id가 'myDiv'인 'div' 요소 내부의 속성입니다.
생성된 데이터 속성을 읽고 액세스해 보겠습니다.
예 1: 'dataset' 속성을 사용하여 데이터 속성 읽기/액세스
이 예에서는 'dataset' 속성을 적용하여 특정 또는 모든 데이터 속성을 읽고 액세스합니다.
먼저 “를 보세요. 단추 '를 호출하는 ' 요소 jsFunc() '연결된 경우' 클릭하면 ” 이벤트는 버튼 클릭 시 트리거됩니다.
< 버튼 클릭 = 'jsFunc()' > 데이터 속성에 액세스 단추 >이제 'jsFunc()' 정의로 넘어갑니다:
< 스크립트 >함수 jsFunc ( ) {
const 요소 = 문서. getElementById ( '내 사업부' ) ;
콘솔. 통나무 ( 요소. 데이터 세트 ) ;
}
스크립트 >
위의 코드 줄에서:
- “ jsFunc() ”는 먼저 “를 적용하는 변수 “elem”을 선언합니다. document.getElementById() ” 메소드를 사용하여 ID “myDiv”를 통해 추가된 div 요소에 액세스합니다.
- 다음으로 “ 콘솔.로그() ” 메소드는 “를 사용할 것입니다 데이터 세트 ” 속성을 사용하여 액세스된 div 요소의 데이터 속성에 액세스하고 이를 웹 콘솔에 표시합니다.
산출
F12를 눌러 웹 콘솔을 엽니다.
주어진 버튼을 클릭하면 콘솔에 ' DOMStringMap ”에는 div 요소의 모든 데이터 속성이 포함되어 있습니다.
특정 값에 액세스
사용자가 특정 데이터 속성에 액세스하려는 경우 다음과 같이 'dataset' 속성을 사용하여 해당 이름을 지정합니다.
< 스크립트 >함수 가져오기 ( ) {
const 요소 = 문서. getElementById ( '내 사업부' ) ;
콘솔. 통나무 ( 요소. 데이터 세트 . 이름 ) ;
}
스크립트 >
이때 “name” 데이터 속성은 “를 사용하여 액세스됩니다. 데이터 세트 ' 재산.
산출
콘솔은 버튼 클릭 시 지정된 데이터 속성의 값만 표시하는 것을 볼 수 있습니다.
예제 2: 'getAttribute()' 메소드를 사용하여 데이터 속성 읽기/액세스
이 예에서는 'getAttribute()' 메서드를 사용하여 데이터 속성을 읽거나 액세스합니다.
이 시나리오에는 첫 번째 예의 버튼 요소도 포함됩니다.
< 버튼 클릭 = 'jsFunc()' > 데이터 속성에 액세스 단추 >'getAttribute()' 메소드의 기능을 살펴보겠습니다.
< 스크립트 >함수 jsFunc ( ) {
const 요소 = 문서. getElementById ( '내 사업부' ) ;
콘솔. 통나무 ( 요소. getAttribute ( '데이터 이름' ) ) ;
콘솔. 통나무 ( 요소. getAttribute ( '데이터 시대' ) ) ;
콘솔. 통나무 ( 요소. getAttribute ( '데이터 성별' ) ) ;
}
스크립트 >
위의 코드 조각에서:
- 'elem' 변수는 ' document.getElementById() ” 메소드를 사용하여 ID “myDiv”를 사용하여 추가된 div 요소에 액세스합니다.
- 다음으로는 “ 콘솔.로그() ” 메소드는 “ get속성() ” 메서드를 사용하여 가져온 div 요소의 지정된 “data” 속성 값을 가져온 다음 이를 웹 콘솔에 표시합니다.
- 지정된 나머지 데이터 속성에 액세스하기 위해 동일한 작업이 수행됩니다.
메모: 'getAttribute()' 메소드는 접두사 'data' 뒤에 하이픈(-), 즉 'dataset()' 속성을 사용하는 동안 필요하지 않은 (data-)를 사용하여 데이터 속성을 지정합니다.
산출
위 출력에는 버튼 클릭 시 지정된 모든 데이터 속성 값이 표시됩니다.
예 3: 'dataset' 속성을 사용하여 데이터 속성 쓰기
이 예에서는 'dataset' 속성을 사용하여 데이터 속성을 작성합니다.
버튼 요소의 내용은 현재 시나리오에 따라 변경됩니다.
< 버튼 클릭 = 'jsFunc()' > 데이터 속성 쓰기 단추 >이제 추가된 div 요소에 새 데이터 속성을 작성합니다.
< 스크립트 >함수 jsFunc ( ) {
const 요소 = 문서. getElementById ( '내 사업부' ) ;
요소. 데이터 세트 . ID = '사람'
콘솔. 통나무 ( 요소. 데이터 세트 ) ;
}
스크립트 >
위의 코드 블록에서:
- “ 데이터 세트 ” 속성은 지정된 문자열 값을 사용하여 새 데이터 속성 이름 “id”를 작성합니다.
- 다음으로는 “ conolse.log() ”는 “dataset” 속성을 사용하여 웹 콘솔에 새로 작성된 데이터 속성이 포함된 “DOMStringMap” 인터페이스를 표시합니다.
산출
여기서 콘솔은 'dataset' 속성을 사용하여 작성된 새 데이터 속성 'id'가 포함된 'DOMStringMap'을 표시합니다.
예 4: 데이터 속성 값 업데이트
이 예에서는 'dataset' 속성을 사용하여 특정 데이터 속성의 기존 값을 업데이트합니다.
버튼 요소의 텍스트는 주어진 시나리오에 따라 변경됩니다.
< 버튼 클릭 = 'jsFunc()' > 데이터 속성 업데이트 단추 >이제 JavaScript 섹션으로 이동하세요.
< 스크립트 >함수 jsFunc ( ) {
const 요소 = 문서. getElementById ( '내 사업부' ) ;
요소. 데이터 세트 . 이름 = '남자'
콘솔. 통나무 ( 요소. 데이터 세트 . 이름 ) ;
}
스크립트 >
위의 코드 블록에서 지정된 'name' 데이터 속성 값은 ' 데이터 세트 ' 재산.
산출
버튼을 클릭하면 콘솔에 지정된 데이터 속성의 업데이트된 값이 표시됩니다.
예 5: 데이터 속성 삭제
이 예에서는 'delete' 키워드를 활용하여 특정 데이터 속성을 삭제합니다.
버튼 요소의 텍스트는 요구 사항에 따라 변경됩니다.
< 버튼 클릭 = 'jsFunc()' > 데이터 속성 삭제 단추 >이제 JavaScript 코드 블록을 따르십시오.
< 스크립트 >함수 jsFunc ( ) {
const 요소 = 문서. getElementById ( '내 사업부' ) ;
요소를 삭제합니다. 데이터 세트 . 나이 ;
콘솔. 통나무 ( 요소. 데이터 세트 . 나이 ) ;
}
스크립트 >
위의 코드 조각은 ' 삭제 ” 키워드를 “dataset” 속성과 함께 사용하여 액세스한 데이터 속성을 삭제합니다.
산출
콘솔에 ' 한정되지 않은 ” 버튼을 클릭하면 접근된 데이터 속성이 삭제되었음을 명확하게 확인할 수 있습니다.
결론
JavaScript에서는 데이터 속성을 요구 사항에 따라 읽기, 액세스, 쓰기, 업데이트, 삭제 등 다양한 방식으로 사용할 수 있습니다. 이러한 모든 작업은 내장된 ' 데이터 세트 ' 재산. 그러나 사용자는 '를 사용하여 데이터 속성에 하나씩 액세스할 수도 있습니다. get속성() ' 방법. 이번 포스팅에서는 JavaScript에서 데이터 속성을 사용하는 방법을 실질적으로 설명했습니다.