동작 특성 및 클래스
속성 노드 작업
텍스트 노드 콘텐츠 수집 및 수정 :
구문 : (. 요소 노드의 속성 이름) elementNode.attributeName은
또한 사용할 수있는 "[]"(요소 노드 [속성 이름])
참고 : 일반적으로 우리의 속성 노드에서 작동 할 때 요소 노드를 통해 직접 값 (/ 수정) 프로퍼티 노드를 프로퍼티 노드를 얻을 수 있지만, 얻을 필요가 없습니다.
특히, 단지 다른 이름의 일부 속성 이름 JS 키워드 나 예약어 충돌 :
클래스 속성 : 클래스 명 (class 키워드)를 작성합니다.
속성 라벨 라벨 : 작성 htmlFor.
노드의 속성을 조작하는 방법으로 :
element.getAttribute (여기서 attributeName) 요소 노드의 지정된 속성 값을 반환
element.setAttribute (attributeName와,의 AttributeValue)를 설정하거나 지정된 값에 지정된 속성을 변경
element.removeAttribute (여기서 attributeName) 요소에서 지정된 속성을 삭제
ement.hasAttribute (여기서 attributeName) 요소가 지정된 속성이있는 경우, true를 돌려
둘째, 사용자 지정 속성
사용자 정의 속성 : HTML 태그는 속성의 자신의 정의를 작성.
객체에 속성을 추가하는 것은 매우 간단하지만,하지만, DOM에서 노드가 요소 사용자 정의 속성 노드에 추가, HTML5는 사용자 지정 특성 노드가 '데이터 -'시작이 될 필요
예를 들어, 사용자 지정 속성 abc 방송으로 작성해야합니다 :
데이터는 ABC
따라서, 데이터 세트의 속성에 의해 조작 될 수 사용할 수있다 :
예를 들면 : 태그 사용자 정의 속성 'ABC'
<a href="" 사용할 data-abc='123'> </a>에 <script> 하자 aEle = document.querySelector ( "A"); CONSOLE.LOG (aEle.dataset.abc); // 123 </ script>
참고 : 속성 사용자 지정 특성을 포함하여, 방법은 어떤 속성을 작동 할 수 관련 (사용자 정의 속성에 대한 사용에 추가해야합니다 '데이터 -')
세 가지 새로운 동작, HTML5 클래스 속성에
사용 classList는 요소 노드에있는 모든 클래스 값을 얻을 :
<BODY> <P 아이디 = "TEST1"클래스 = "ABC QWE"> 로렘 입숨 슬픔이 AMET 앉아 </ P>. <스크립트> TEST1하자 = document.getElementById를 ( "TEST1을" ); CONSOLE.LOG (test1.classList); // DOMTokenList (2) "ABC", "QWE", 값 "ABC QWE"] CONSOLE.LOG (test1.classList [0]); // ABC CONSOLE.LOG (test1.classList [1]); // QWE </ script> </ BODY>
classList 관련 방법 :
element.classList.add (클래스 이름)의 값을 추가 할 클래스의 이름을 지정합니다
element.classList.remove는 (클래스 명) 지정된 클래스 이름의 값을 삭제
element.classList.contains (클래스 명)는 지정된 클래스의 이름의 값을 결정
element.classList.toggle (클래스 명) 주어진 이름 스위칭 클래스 값이 삭제되고 더 추가되지
운영 스타일
모든 스타일은 문자열입니다.
첫째, 인라인 스타일
싱글 스타일 :
element.style.styleName;
예 : divEle.style.width = '200 픽셀';
element.style [개의 styleName] ;.
예 : divEle.style는 [ '폭'] = "200 픽셀 ';
참고 :의 스타일 이름 '-'제거 및 교체 혹라는.
HTML을 학습, 적은 시간 CSS 인라인 스타일은 대부분의 경우에 따라서 JS, CSS JS 작업을 남길하기 위해이 방법의 사용을 사용해야합니다.
여러 스타일 :
라인 패턴의 전체 문자열 값 element.style.cssText (/ 수정)에 직접 액세스
例子 : box.style.cssText = "높이 : 100 픽셀, 배경 색 : 빨강;";
참고 :이 방법으로 기본 적용.
둘째, 스타일 시트 스타일
(인라인 및 아웃 리치 포함) 스타일 시트 :
document.styleSheets [0] .rules [0] = .style.backgroundColor "블루";
스타일 시트 : 스타일 시트 배열 (스타일 시트에 스타일 태그)
규칙 : 모든 규칙 배열 (는 "{}"원칙적으로)
, 따라서 의미 : 0 번째 스타일의 0 번째 규칙 backgroundColor로 수정 "블루".
참고 :이 방법의 기본이 필요합니다.
셋째, 궁극적 인 스타일
때문에 호환성 문제로, 궁극적으로 쓰는 두 가지 스타일이있다 :
낮은 버전 즉, currentStyle과 재산 :
element.currentStyle.styleName;
파이어 폭스와 getComputedStyle의 방법으로 (현대 브라우저) 크롬 :
getComputedStyle (요소) .styleName;
참고 : 필요하지만, 궁극적으로 계산 된 스타일은 읽기 전용, 스타일, 그리고 수정할 수 없습니다 사용한다.
호환성 패키지 :
함수 및 getStyle (OBJ 이름) { IF (obj.currentStyle) { // currentStyle [이름]을 사용하여 IE 브라우저가 리턴 obj.currentStyle [이름] } 다른 { // 파이어 폭스 브라우저 크롬 getComputedStyle (OBJ 거짓) [이름] 리턴 (obj에 getComputedStyle를 거짓으로 ) [이름]; } }
추가 : 요소 노드의 크기와 위치를 가져옵니다
크기 :
ELement.clientWidth
ELement.clientHeight 패딩 + 함량 (채워진 박스)
ELement.offsetWidth
ELement.offsetHeight 요약 패딩 + + 테두리 (박스)
위치 :
ELement.offsetLeft의
하우징의 위치 ELement.offsetTop 테두리는 부모 구성 요소의 위치를 기준으로 위치 결정