[JavaScript] DOM 확장

1. 표현 모드
W3C 가 DOM 에 대한 요구 에 따라 브 라 우 저 는 자체 적 으로 속성 과 방법 을 추가 하여 기능 을 강화 할 수 있다.DOM 을 확장 하 는 방법 은 이미 상당히 보편적 이 고 개발 에 도 큰 도움 이 된다.
IE6 가 표준 모드 와 혼합 모드 를 구분 하기 시작 하면 서 브 라 우 저가 어떤 모드 에 있 는 지 확인 하 는 것 도 필요 하 다.IE 는 브 라 우 저가 어떤 모드 에 있 는 지 표시 할 수 있 도록 document 대상 에 copatMode 속성 을 추가 했다. 표준 모드 라면 document. copatMode 의 값 은 'CSS 1 Compat' 과 같 고 혼합 모드 라면 document. copatMode 의 값 은 'BackCompat' 과 같다.
이후 Firefox, Opera, Safari, Chrome 은 모두 이 속성 을 실현 했다.IE8 은 document 대상 에 document Mode 라 는 새로운 속성 을 도입 했다.IE8 은 3 가지 서로 다른 표현 모델 이 있 기 때문에 이 속성 을 도입 한 것 은 바로 이러한 모델 을 분별 하기 위 한 것 이다.이 속성의 값 이 5 이면 혼합 모드 를 나타 내 고 7 이면 IE7 시 뮬 레이 션 모드 를 나타 내 며 8 이면 IE8 표준 모드 를 나타 낸다. 예 를 들 어:

if (document.documentMode > 7) {
  alert("IE8+ Standards Mode");
}

2. 스크롤
DOM 규범 은 페이지 영역 을 어떻게 굴 리 는 지 에 대해 규정 하지 않 았 다.이 를 위해 각종 브 라 우 저 는 스크롤 을 다른 방식 으로 제어 하 는 방법 을 실 현 했 습 니 다. 이 방법 들 은 모두 HTML Element 형식의 확장 으로 존재 하기 때문에 모든 요소 에서 사용 할 수 있 습 니 다.
1) scrollIntoView (align WithTop): 현재 요 소 를 볼 수 있 도록 브 라 우 저 창 이나 용기 요 소 를 스크롤 합 니 다.
2) scrollIntoViewIfNeeded (align Center): 현재 요소 가 시각 에서 보이 지 않 는 경우 에 만 브 라 우 저 창 이나 용기 요 소 를 스크롤 하여 현재 요 소 를 볼 수 있 도록 합 니 다.
3) scrollByLines (lineCount): 요소 의 내용 을 지정 한 줄 의 높이 로 스크롤 하여 플러스 또는 마이너스 일 수 있 습 니 다.
4) scrollbyPages (pageCount): 요소 의 내용 을 지정 한 페이지 의 높이 로 스크롤 하고 구체 적 인 높이 는 요소 의 높이 에 의 해 결 정 됩 니 다.Safari 와 Chrome 은 이 방법 을 실현 했다.
scrollIntoView () 와 scrollIntoViewIfNeeded () 는 요소 의 창 역할 을 하고 scrollByLines () 와 scrollByPages () 는 요소 자체 에 영향 을 미친다.
3. children 속성
IE 는 다른 브 라 우 저 와 텍스트 노드 의 공백 문자 에 대한 설명 이 일치 하지 않 아 children 속성 이 나타 납 니 다.HTML Collection 으로서 children 속성 에 요소 만 포 함 된 하위 노드 중 그것 도 요소 의 노드 입 니 다.즉, 요소 의 하위 노드 가 모두 요소 노드 인 상황 에서 children 속성 은 childNodes 와 같 습 니 다. 예 를 들 어:

var childCount = element.children.length;
var firstChild = element.children[0];

Firefox 를 제외 한 다른 브 라 우 저 는 children 집합 을 지원 합 니 다.IE 의 children 집합 은 주석 노드 를 포함 합 니 다.
4. contains () 방법
개발 자 는 특정한 노드 가 다른 노드 의 후손 인지 확인 해 야 한다. IE 는 먼저 contains () 방법 을 도입 하면 이 정 보 를 알 수 있다. 예 를 들 어:

alert(document.documentElement.contains(document.body));

IE, Safari 3 및 더 높 은 버 전, Opera 8 및 더 높 은 버 전, Chrome 은 모두 contains () 방법 을 지원 합 니 다.Firefox 는 지원 하지 않 지만 Firefox 는 DOM 3 급 구현 에서 대체 compare DocumentPosition () 방법 을 제공 합 니 다.
5. 조작 내용
텍스트 와 HTML 코드 를 삽입 하 는 기능 을 제공 하기 위해 IE4 는 먼저 innerText, innerHTML, outerText 와 outerHTML 등 속성 을 도입 했다.
innerText 속성 을 통 해 요소 에 포 함 된 모든 텍스트 내용 을 조작 할 수 있 습 니 다. 브 라 우 저 마다 공백 문 자 를 처리 하 는 방식 이 다 르 기 때문에 출력 된 텍스트 는 원본 HTML 코드 의 들 여 쓰기 를 포함 하지 않 을 수도 있 습 니 다. 예 를 들 어:

mydiv.innerText = "Hello World!";

innerText 를 설정 하면 현재 노드 의 하위 텍스트 노드 만 생 성 되 기 때문에 텍스트 를 HTML 인 코딩 합 니 다. 이 점 을 이용 하여 HTML 탭 을 걸 러 낼 수 있 습 니 다. 예 를 들 어:

mydiv.innerText = mydiv.innerText;

IE, Safari, Opera, Chrome 은 innerText 속성 을 지원 합 니 다.Firefox 는 지원 되 지 않 지만 비슷 한 textContent 속성 을 지원 합 니 다.
innerHTML 과 innerText 는 여러 면 에서 비슷 하 다.innerHTML 은 현재 요소 의 모든 하위 노드 의 HTML 표현 을 되 돌려 줍 니 다. 요소, 주석 과 텍스트 노드 를 포함 합 니 다.브 라 우 저 마다 innerHTML 이 되 돌아 오 는 텍스트 가 다 를 수 있 습 니 다.IE 와 Opera 는 항상 모든 탭 을 대문자 로 바 꾸 고 Safari, Chrome, Firefox 는 문서 에서 지정 한 형식 으로 HTML 로 되 돌려 줍 니 다.
innerHTML 에 도 일부 제한 이 있 습 니 다. 예 를 들 어 대부분의 브 라 우 저 에서 innerHTML 을 통 해 삽 입 된 요 소 는 실행 되 지 않 습 니 다.IE 는 이 동작 을 지원 하 는 유일한 브 라 우 저 이지 만 defer 기능 을 지정 해 야 합 니 다.대부분의 브 라 우 저 에서 innerHTML 을 통 해 & lt 쓰기;style>원소 에 도 유사 한 문제 가 존재 한다.lt;/p>
<p>역할 영역 범위 가 호출 을 포함 하 는 노드 로 확대 되 는 것 을 제외 하고 outerText 는 innerText 와 거의 다 르 지 않 습 니 다.정 보 를 읽 을 때 outerText 는 innerText 의 결과 와 똑 같 지만 정 보 를 기록 할 때 outerText 는 호출 된 요소 의 하위 노드 만 바 꾸 는 것 이 아니 라 전체 요 소 를 바 꿉 니 다. </p>
<p>outerHTML 과 innerHTML 의 차이 점 은 outerText 와 innerText 의 차이 점 과 유사 합 니 다.정 보 를 읽 을 때 outerHTML 은 원 소 를 호출 하 는 HTML 코드 를 되 돌려 줍 니 다.정 보 를 쓸 때 outerHTML 은 주어진 HTML 문자열 을 분석 하여 만 든 DOM 서브 트 리 로 노드 를 대체 합 니 다.lt;/p>
<p><br></p>
<p><br></p>
</div>
</div>
</div>
</div>
</div>
<!--PC 와 WAP 자체 적응 버 전 -- & lt;
<div id="SOHUCS" sid="1282044991425757184"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
이 가능 하 다, ~ 할 수 있다,...

Servlet 원리 편 2 - GenericServlet 과 HttpServlet 해독
주 범 양
java HttpServlet 원리 GenericService 소스 코드

MySQL 성능 최적화
bijian1013
데이터베이스 mysql

ThreadPool 정시 재 시도
dai_lm
java ThreadPool thread timer timertask

Oracle 데이터베이스 연결 현황 보기
주 범 양
sql Oacle 연결

상속
주 휘 휘 휘
java

안 드 로 이 드 부상 창 효과
거 리 낌 없 이
android

hadop 위조 분포 식 구축
임 학 소
hadoop

gdb 디 버 깅 명령
aigo
gdb

알파벳 별 분류:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 기타
첫 페이지 -
우리 -
역 내 검색 -
Sitemap -
권리 침해 신고
모든 IT 지식 창고 저작권© 2000 - 2050 IT 지식 창고 IT610. com, 판권 소유.
경 ICP 비 09083238 호

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

---

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.