dataset 요약

HTML 5 사용자 정의 속성 대상 Dataset 안내
by zhangxinxu from http://www.zhangxinxu.com 본문 주소:http://www.zhangxinxu.com/wordpress/?p=1693
DataSet 은 ADO. NET 의 중심 개념 이다.DataSet 을 메모리 의 데이터베이스 로 사용 할 수 있 습 니 다. DataSet 은 데이터베이스 에 의존 하지 않 는 독립 된 데이터 집합 입 니 다.독립 이란 데이터 링크 를 끊 거나 데이터 베 이 스 를 닫 아 도 DataSet 은 여전히 사용 할 수 있다 는 것 이다. DataSet 은 내부 에서 XML 로 데 이 터 를 묘사 하 는 것 이다. XML 은 플랫폼 과 무관 하고 언어 와 무관 한 데이터 기술 언어 이 며 부자 관계 의 데이터 등 복잡 한 관 계 를 묘사 할 수 있 기 때문이다.따라서 DataSet 은 실제 적 으로 복잡 한 관 계 를 가 진 데 이 터 를 수용 할 수 있 고 데이터 베이스 링크 에 의존 하지 않 는 다.
html 5 사용자 정의 속성 소개
HTML 5 에서 저 희 는 data- 접 두 사 를 사용 하여 사용자 정의 속성 을 설정 하여 데 이 터 를 저장 할 수 있 습 니 다. 예 를 들 어 텍스트 단추 에 해당 하 는 id 를 저장 해 야 합 니 다.

테스트

여기 data- 접 두 사 는 스 크 립 트 를 통 해 정의 할 수 있 고 CSS 속성 선택 기 를 사용 하여 스타일 설정 을 할 수 있 습 니 다.수량 은 제한 을 받 지 않 고 데 이 터 를 제어 하고 렌 더 링 할 때 매우 강력 한 통 제 를 제공 합 니 다.
2. Dataset 기초
다음은 요소 가 data 속성 을 응용 하 는 예 입 니 다.

¥20.12

어떤 속성의 값 을 가 져 오 려 면 아래 와 같이 dataset 대상 을 사용 할 수 있 습 니 다:

var expenseday2 = document.getElementById('day2-meal-expense');  
var typeOfDrink = expenseday2.dataset.drink;

주의해 야 할 것 은 연결 문자 가 있 는 이름 을 사용 할 때 낙타 피크 화, 즉 대소 문자 조합 으로 작성 해 야 한 다 는 것 입 니 다. 이것 은 요 소 를 사용 하 는 style 대상 과 유사 합 니 다. data 예 를 들 어 위의 예 에서 현재 다음 과 같은 data 속성 이 있다 고 가정 하면 dom.style.borderColor 우 리 는 해당 하 는 값 을 얻 으 려 면 사용 할 수 있다.

expenseday2.dataset.mealTime

data-meal-time 속성 은 기본적으로 모든 브 라 우 저 를 지원 하지만 data 대상 은 신 귀 에 속 합 니 다. 현재 Opera 11.1 +, Chrome 9 + 에서 만 자바 스 크 립 트 를 통 해 사용자 정의 dataset 속성 을 사용 할 수 있 습 니 다.다른 브 라 우 저 에 대해 서 는 FireFox 6 + (미 출) 및 Safari 6 + (미 출) 가 지원 dataset 대상 이 며, IE 브 라 우 저 에 대해 서 는 아직 기약 이 없 는 추세 로 보인다.
3. 우 리 는 왜 dataset 이 필요 합 니까?
전통 적 인 방법 으로 속성 치 를 얻 으 면 다음 과 유사 할 것 입 니 다:

var typeOfDrink = document.getElementById('day2-meal-expense').getAttribute('data-drink');

지금 은 우리 가 여러 개의 사용자 정의 속성 치 를 얻 으 려 면 고생 하 는 일이 생 길 것 이 라 고 가정 합 니 다. 우 리 는 다음 과 같은 N 줄 코드 를 사용 하여 이 루어 질 수 있 습 니 다.

var attrs = expenseday2.attributes,
expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

그리고 data 속성 을 사용 하면 우 리 는 당신 이 원 하 는 그 값 을 얻 기 위해 순환 할 필요 가 없습니다. 직접 초살:

expense = document.getElementById('day2-meal-expense').dataset;

dataset 전형 적 인 의미 의 자 바스 크 립 트 대상 이 아니 라 개 dataset 이 고 dataset 는 HTML 5 의 새로운 여러 개의 이름 - 값 쌍 을 포함 하 는 상호작용 변수 이다.
4. dataset 의 조작
아래 와 같이 이름 을 조작 할 수 있 습 니 다. - 값 이 맞습니다.

chartInput = [];
for (var item in expense) {
  chartInput.push(expense[item]);
}

위의 몇 줄 코드 는 모든 사용자 정의 속성 값 을 배열 에 넣 는 역할 을 합 니 다.
만약 당신 이 하 나 를 지우 고 싶다 면 DOMStringMap 이렇게 할 수 있 습 니 다.

delete expenseday2.dataset.meal;

만약 당신 이 원소 에 속성 을 추가 하고 싶다 면, 이렇게 할 수 있 습 니 다:

expenseday2.dataset.dessert = 'icecream';

5. getAttribute 와 비교 하 는 속도
사용 DOMStringMap 조작 data 이 사용 dataset 보다 조금 느 리 고,
그러나 우리 가 소량의 data 데 이 터 를 처리 하 는 것 이 라면 이런 속도 차이 로 인 한 영향 은 거의 없다.오히려 data  조작 자가 적응 속성 을 사용 하 는 것 이 다른 유사 getAttribute 형식 보다 골 치 아 픈 번 거 로 움 이 적 고 가 독성 이 있다 는 것 을 알 아야 한다.따라서 평가 해 보면 사용자 정의 속성 dataset 작업 이 선택 되 었 습 니 다.
dataset
사용자 정의 data 속성 을 사용 할 때마다 getAttribute 를 사용 하여 이름 을 얻 습 니 다. - 값 은 좋 은 선택 입 니 다.현재 많은 브 라 우 저 들 이 dataset 를 모 르 는 외계 생물 로 생각 하고 있 음 을 감안 하여 실제 사용 할 때 특징 검 사 를 통 해 지원 여 부 를 확인 할 필요 가 있다 dataset. 아래 와 유사 하 게 사용 할 필요 가 있다.

if(expenseday2.dataset) {
  expenseday2.dataset.dessert = 'icecream';
} else {
  expenseday2.setAttribute('data-dessert', 'icecream');
}

메모: 프로그램 이 자주 업데이트 dataset 값 을 업데이트 할 경우, 매번 dataset 을 통 해 업데이트 하 는 것 이 아니 라 자 바스 크 립 트 대상 을 사용 하여 데이터 관 리 를 하 는 것 을 권장 합 니 다.
7. CSS 의 data 속성
데이터 속성 값 을 기반 으로 해당 요소 에 대한 CSS 스타일 을 설정 할 수 있 습 니 다. 예 를 들 어 다음 과 같은 예 입 니 다.
HTML 코드 는 다음 과 같 습 니 다.

CSS代码如下：