집 > 기사 > 웹 프론트엔드 > JS 고급 프로그램의 DOM 확장

JS 고급 프로그램의 DOM 확장

小云云원래의: 2018-03-07 13:30:131430검색

11.1 선택기 API:

SelectorsAPI의 핵심 두 가지 방법은 querySelector() 및 querySlelctorAll()입니다. 호환되는 브라우저에서는 Domcument 및 Element 유형의 인스턴스를 통해 호출할 수 있습니다.

11.1.1 querySelector() 메소드:

querySelector() 메소드는 CSS 선택기를 수신하고 선택기와 일치하는 첫 번째 요소를 반환합니다. 일치하는 항목이 없으면 null을 반환합니다.

문서를 통해 querySelector() 메서드를 호출하면 문서 요소 범위 내에서 일치하는 요소를 찾습니다.

querySelector() 메소드를 호출하는 Elementquery는 요소의 하위 요소에서만 일치하는 요소를 찾습니다.

11.1.2 querySelectorAll()

var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
//    var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i<li.length;i++){
var list={};
list[i]=li[i].innerHTML;
alert(list[i]);
    }

11.1.3matchesSelector

이 메소드는 CSS 선택기인 하나의 매개변수를 받습니다. 호출됨 메서드가 요소와 일치하면 true를 반환합니다.

11.2 Element Traversal

Elment Traversal API는 DOM 요소에 다음 5가지 속성을 추가합니다.

1: childElementCount: 하위 요소 수를 반환합니다.

2: firstElementChild: 첫 번째 하위 요소인 firstChild 요소 버전을 가리킵니다.

3: lastElementChild: 마지막 하위 요소인 lastChild 요소 버전을 가리킵니다. PreviousElementSibling: 이전 형제 요소를 가리킵니다.

5: nextElementSibling: 다음 형제 요소를 가리킵니다.

11.3HTML5

11.3.1 클래스 관련 확장

1: getElementByClassName() 이 메서드는 하나 또는 more 모든 요소가 지정된 NodeList를 반환하는 클래스 이름의 문자열입니다.

2: classList 속성: (for class="Operation here")

classList 속성은 새로운 컬렉션 유형 DOMTokenList의 인스턴스입니다. 다른 DOM 컬렉션과 유사합니다. 다음과 같은 메소드가 있습니다:

add(value): 주어진 문자열을 목록에 추가합니다.

contains(value): 주어진 값이 목록에 존재하는지 여부를 나타냅니다. 존재하지 않으면 false를 반환합니다.

remove(value)는 목록에서 주어진 문자열을 제거합니다.

toggle(주어진 값이 목록에 있으면 삭제하고, 주어진 값이 없으면 추가합니다.)

e9132549569fb02f168a4ec8b3ac532894b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
2cacc6d41bbb37262a98f745aa00fbf0

이 시점에서 다음을 전달할 수 있습니다. 위의 내부 매개변수를 조작하는 방법입니다.

11.3.2 포커스 관리

HTML5에는 DOM의 보조 관리 기능도 추가되었습니다. 첫 번째는 document.activeElement 속성으로, 항상 현재 포커스가 있는 DOM 요소를 참조합니다. 현재 사용자가 포커스를 두고 있는 요소를 가져옵니다.

사용하세요. focus() 메서드

11.3.3 HTMLDocument의 변경 사항

1: ReadyState 속성

이 속성에는 두 개의 값이 있습니다.

1; 로드 중, 문서가 로드되는 중

2: 완료, 문서가 로드되었습니다.

document.readyState 속성을 사용하는 가장 적절한 방법은 이를 사용하여 문서가 로드되었음을 나타내는 표시기를 구현하는 것입니다. 문서가 로드되었음을 나타냅니다.

if(document.readyState=="complete"){
       //执行操作
}

2: 호환성 모드:

IE6은 페이지 렌더링 모드가 표준인지 혼합인지 구별하기 시작했기 때문에 IE는 문서에 compatMode라는 속성을 추가하여 페이지에서 사용하는 렌더링 모드를 개발자에게 알려줍니다.

CSS1compat와 BackComapat의 두 가지 반환 값이 있습니다.

각각 표준 모드와 혼합 모드에 해당합니다.

3 .6 태그 삽입

1: innerHTML 속성

읽기 모드에서 innerHTML 속성은 호출 요소의 모든 하위 노드에 해당하는 HTML 태그를 반환합니다. 쓰기 모드에서 innerHTML은 지정된 값을 기반으로 새 DOM 트리를 생성합니다.

이 속성을 사용하여 지정된 태그에 태그를 추가할 수 있지만 모든 태그가 지원되는 것은 아닙니다.

2: externalHTML 속성

읽기 모드에서 externalHTML은 요소와 이를 호출하는 모든 하위 노드의 HTML 태그를 반환합니다. 쓰기 모드에서 외부 HTML은 지정된 HTML 문자를 기반으로 새 DOM 트리를 생성한 다음 호출 요소를 이 DOM 하위 트리로 완전히 대체합니다.

var val = elem.outerHTML;

읽기 모드: 모든 HTML 태그를 반환합니다.

쓰기 모드: 해당 DOM 요소를 교체합니다.

<p id="select" class="aa ss dd ff hh ">
<p>this is a test Demo</p>
</p>

elem.outerHTML="<p>这是一个测试的demo</p>"

3: insertAdjeacentHTML() 메소드

마크업을 삽입하는 마지막 메소드입니다.

삽입 위치와 삽입할 HTML 텍스트라는 두 가지 매개변수를 받습니다. 첫 번째 요소는 다음 값 중 하나여야 합니다.

1: 시작하기 전에 현재 요소 앞에 인접한 형제 요소를 삽입합니다.

2: afterbegin, 현재 요소 아래 또는 첫 번째 요소 앞에 새 하위 요소 삽입

3: beforeend, 현재 요소 아래 또는 마지막 요소 앞에 새 하위 요소 삽입 그런 다음 새 요소 삽입

4 : 뒤에 요소 뒤에 인접한 형제 요소를 추가합니다.

4: 메모리 및 성능 문제

이 섹션에 소개된 방법을 사용하여 하위 노드를 교체하면 브라우저에서 메모리 문제가 발생할 수 있습니다. 하지만 innerHTML 속성을 사용하면 여전히 많은 순회가 발생하기 때문입니다. innerHTML 또는 externalHTML은 HTML 파서를 생성합니다. 이 파서는 브라우저 수준 코드에서 실행되므로 js보다 훨씬 빠릅니다.

11.3.7scrollIntoView 메서드

Scroll

11.4.1 문서 모드:

문서 모드는 사용할 수 있는 CSS 수준과 js에서 사용할 수 있는 API를 결정합니다.

총 4가지 문서 모드가 있습니다.

IE5: 페이지를 혼합 모드로 렌더링합니다. IE8 이상의 새로운 기능은 모두 사용할 수 없습니다.

IE7: IE7 표준 모드에서 페이지를 렌더링합니다. IE8 이상 버전의 새로운 기능을 사용할 수 없습니다.

IE8: IE8 표준 모드에서 렌더링을 사용할 수 있으므로 SelectorsAPI를 사용할 수 있습니다. 더 많은 CSS2 레벨 선택기와 일부 CSS3 기능. HTML5 기능

IE9 - IE9 표준 모드 렌더링 페이지도 있습니다. 모든 새로운 기능을 사용할 수 있습니다. 예를 들어 EMACSript5의 기능입니다.

11.4.2 children 속성

children 속성과 childNodes 사이에는 거의 차이가 없습니다. 둘 다 모든 하위 노드를 반환하는 데 사용됩니다.

11.4.3contain(포함) 방법:

노드가 특정 노드의 후손 노드는 다음을 포함하여 영어의 문자 그대로의 의미를 직접 이해할 수 있습니다.

Parent node.contain(특정 노드): true를 반환하면 포함되고, 그렇지 않으면 false를 반환합니다.

CompareDocumentPosition()을 사용하여 파일 위치를 비교할 수도 있습니다. 그러면 일부 마스크가 반환되어 위치 관계를 확인할 수 있습니다.

contain() 메서드를 모방하려면 16을 반환하는 데 주의해야 합니다.

11.4.4 Insert text:

1: innerText 속성

은 요소의 모든 값에 대해 작동하며 문서를 얕은 것부터 깊은 것까지 연결합니다.

과 innerHTML의 차이점은 다음과 같습니다. innerHTML은 모든 요소 태그를 표시하지만 innerText는 연결된 문자열만 반환합니다.

작성 시 하나의 텍스트 하위 노드만 표시됩니다.

2: externalText 속성

노드를 포함하도록 범위가 확장된다는 점을 제외하면 기본적으로 externalText와 innerText 사이에는 큰 차이가 없습니다. 텍스트를 읽을 때는 결과가 완전히 동일하지만, 쓸 때는 완전히 다릅니다. externalText는 이를 호출하는 요소의 하위 요소를 대체할 뿐만 아니라 전체 요소를 대체하므로 사용하지 않는 것이 좋습니다.

11.4.5 스크롤:

1: scrollIntoviewIfNeeded(alignCenter): 요소가 뷰포트에 표시되지 않는 경우에만 브라우저를 스크롤합니다.

2: scrollByLines(lineCount): 요소의 내용을 지정된 페이지 높이로 스크롤합니다. lineCount는 양수 또는 음수 값일 수 있습니다.

3: scrollBypage(pageCount): 요소의 내용을 지정된 페이지 높이로 스크롤합니다. 특정 높이는 요소의 높이에 따라 결정됩니다.

참고: scrollIntoView() 및 scrollIntoviewIfNeeded(alignCenter)는 요소 컨테이너에서 작동하는 반면, scrollByLines(lineCount) 및 scrollBypage(pageCount)는 요소 자체에서 작동합니다.

12장: DOM2 및 DOM3

12.1.1 XML 네임스페이스 변경 사항

XML 네임스페이스를 사용하면 이름 충돌에 대한 걱정 없이 서로 다른 XML 문서의 요소를 혼합할 수 있습니다. 기술적으로 말하면 HTML XML 네임스페이스는 지원되지 않지만 XHTML은 지원되지 않습니다. XML 네임스페이스를 지원합니다.

1: 노드 유형 변경

DOM2 수준에서 노드 유형에는 다음과 같은 네임스페이스별 속성이 포함됩니다.

localName: 네임스페이스 접두사가 없는 노드 이름입니다.

namespaceURL: 네임스페이스 URL이 null입니다.

prefix: 네임스페이스 접두사 또는 null입니다.

2: 문서 유형 변경

다음 네임스페이스 관련 메서드를 포함하여 DOM2 수준의 문서 유형도 변경되었습니다.

createElementNs(namespaceURI,tagName): 지정된 tagName을 사용하여 네임스페이스 네임스페이스URI에 속하는 새 요소를 만듭니다.

createAttributeNS(nameSpaceURI, attributeName) 지정된 attributeName을 사용하여 nameSpaceURI 네임스페이스에 속하는 새 속성을 생성합니다.

getElementByTagNameNs(namespaceURI, tagName)는 네임스페이스 URI에 속하는 tagName 요소의 NodeList를 반환합니다.

3: 요소 유형 변경

"DOM 레벨 2"의 요소와 관련된 변경 사항은 주로 작동 특성과 관련됩니다. 새로운 방법은 다음과 같습니다.

getAttributeNS(namespaceURI, localName) 네임스페이스 URI의 속성을 가져오고 localName이라는 이름이 붙습니다.

getAttributeNodeNS(namespaceURI, localName) 네임스페이스 URI에 속하고 이름이 localName인 속성 노드를 가져옵니다.

getElementsByTagNameNS(namespaceURI, tagName)는 네임스페이스에 속함 nodeList of 네임스페이스URI

hasAttributeNS(namespaceURI, localName)는 현재 요소가 localNaem이라는 속성이고 이 속성의 네임스페이스가 네임스페이스URI

removeAttributeNS(namespaceURI, localName)임을 확인하여 네임스페이스에 속한 속성을 삭제합니다. URI이고 이름이 localName

setAttributeNS(namespaceURI, 자격을 갖춘 이름, 값): 네임스페이스 네임스페이스URI에 속하는 특성 값을 값

setAttributeNodeNS(attNode)로 설정합니다. 네임스페이스 네임스페이스URI

4: 변경 사항 NamedNodeMap 유형의

속성으로 인해 NamedNodeMap으로 표시되므로 이러한 메소드는 대부분의 경우 기능에만 사용됩니다.

1: getNamedItemNS(namespaceURI, localName): 네임스페이스 URI에 속하고 다음과 같은 localName이라는 항목을 가져옵니다. 명명된 localName

2: RemoveNamedItemNS(namespaceURI, localName): 이동 네임스페이스 네임스페이스URI에 속하고 명명된 localName

3: setNamedItemNS(노드): 노드를 추가하는 항목을 제외하고 이 노드에는 네임스페이스 정보가 미리 지정되어 있습니다.

속성은 일반적으로 요소를 통해 액세스되므로 이러한 방법은 거의 사용되지 않습니다.

12.1.2 기타 변경 사항

1: documentType 유형 변경

publicID systemId 및 InternalSubset이라는 세 가지 속성이 추가되었습니다.

2: 문서 유형 변경:

DOM 레벨 2 코어는 여전히 문서입니다. 구현 개체는 creatDocumentType() 및 creatDocument()라는 두 가지 새로운 메서드를 지정합니다.

전자는 새 DocumentType 노드를 만드는 데 사용되며 문서 유형, publicID, systemID라는 세 가지 매개 변수를 허용합니다.

createDocument는 새 메서드를 만들 때 사용해야 합니다. document() 메서드는 세 가지 매개 변수도 허용합니다: namesp-aceURI, 문서 요소의 태그 이름, 새 문서 유형

3: 노드 유형 변경

방금 isSupported() 메서드를 추가했습니다: 현재 노드의 내용을 결정하는 데 사용됨 능력.

이 메서드는 기능 이름과 기능 버전 번호라는 두 개의 매개변수를 받습니다.

12.2 스타일

HTML에서 스타일을 정의하는 방법에는 외부 7a6a6e6fc80b42f5186c39fb2e6badd5, 포함된 c9b47485ffa72dcd5b8084b9194e54f7, 스타일 속성을 사용하여 요소 태그에서 수정하는 세 가지 방법이 있습니다. 12.2.1 요소 스타일 방문

CSS 속성 JavaScript 속성

배경 이미지 스타일.BackgroundImage

색상 style.color

display

글꼴 계열 스타일: DOM 스타일 속성 및 메서드:

The " DOM 레벨 2 스타일' 사양은 스타일 객체에 대한 일부 속성과 메서드도 정의합니다. 이러한 속성과 메서드는 요소의 스타일 속성을 제공하면서 스타일을 수정할 수도 있습니다. 이러한 속성과 메서드는 아래에 나열되어 있습니다.

cssText: 스타일로 CSS 코드에 액세스할 수 있습니다.

length: 요소에 적용된 CSS 속성 수.

parentRule: CSS 정보를 나타내는 CSSRule 개체

getPropertyCssValue(propertyName): 지정된 속성 값을 포함하는 CssVal 개체를 반환합니다.

getPropertyPriority(propertyName): 속성이 주어진 경우! 중요한 설정을 한 후 다시 돌아오세요! 중요하지 않으면 빈 문자열이 반환됩니다.

getPropertyValue() 지정된 속성의 문자열 값을 반환합니다.

item() 지정된 위치에 있는 CSS 속성의 이름을 반환합니다.

removeProperty(propertyName): 지정된 스타일을 속성에서 제거합니다. 스타일

setProperty()는 주어진 속성을 해당 값과 우선순위 권한 플래그로 설정합니다.

실제 개발에서는 getPropertyValue()가 더 자주 사용됩니다.

2 계산된 스타일

getCompulatedStyle() 메서드입니다. 이 메서드는 계산된 스타일을 가져오는 요소와 의사 요소 문자열이라는 두 가지 매개 변수를 허용해야 합니다. 의사 요소 문자열이 필요하지 않은 경우 null을 채울 수 있습니다.

예: 요소 스타일 가져오기

12.2.2 스타일 시트 조작

CSSStyleSheet는 StyleSheet에서 상속되며, CSS가 아닌 스타일 시트를 정의하는 인터페이스로 사용할 수 있습니다. StyleSheet 인터페이스에서 상속되는 속성은 다음과 같습니다.

disable: 스타일 시트 비활성화 여부를 나타내는 부울 값

href: 2cdf5bf648cf2f33323966d7f58a7f3f를 통해 스타일 변경 내용이 포함된 경우 스타일 시트의 URL이고, 그렇지 않은 경우 null입니다.

media: 모든 미디어 지원 현재 스타일 시트 기준 유형 컬렉션

ownerNode: 현재 스타일 시트를 소유한 노드에 대한 포인터

parentStyleSheet: 가져온 스타일 시트에 대한 포인터

title: ownerNode의 title 속성 값.

type: 스타일 시트 유형을 나타내는 문자열

cssRules 스타일 시트의 규칙 모음

ownerRule: @import를 통해 스타일 시트를 가져오는 경우 이 속성은 가져온 규칙을 가리키는 포인터입니다. value is null

deleteRule(index): 지정된 규칙을 삭제합니다

insertRule: (메서드) cssRule 컬렉션에 규칙 문자열을 삽입합니다

문서에 적용된 모든 스타일은 document.stylesheets 컬렉션으로 표현됩니다

1: CSS 규칙:

CSSStyleSheet 개체에는 다음 개체가 포함됩니다.

cssText: 전체 규칙에 해당하는 텍스트를 반환합니다.

parentRule: 현재 규칙이 가져오기 규칙인 경우 이 속성은 가져오기 규칙을 반환하고, 그렇지 않으면 null입니다.

parentStyleSheet: 현재 규칙이 속한 스타일 시트

SelectorText: 현재 규칙의 선택기 텍스트를 반환합니다. .

Style: 규칙에서 특정 스타일의 스타일 시트를 설정하고 가져올 수 있는 CSSStyleDeclaration 개체입니다.

type: 규칙 유형을 나타내는 상수 값입니다.

가장 일반적으로 사용되는 속성은 cssText, selectorText 및 Style입니다.

2: 규칙

DOM 규정을 만듭니다. 현재 스타일이 지정된 테이블에 새 규칙을 추가하려면 insertRule() 메서드를 사용해야 합니다. 이 메소드는 두 개의 매개변수, 즉 규칙 텍스트와 삽입된 색인을 허용합니다.

예:

sheet.insertRule("body{Background-color:silver}",0);//DOM 메소드.

크로스 브라우저 방식으로 규칙을 삽입하려면 다음 기능을 사용할 수 있습니다. 이 함수는 그림에 표시된 대로 규칙이 추가될 스타일시트와 addRule()과 동일한 세 가지 매개변수의 네 가지 값을 허용합니다.

3. 규칙 삭제:

규칙을 삭제하는 방법 스타일시트는 deleteRule()

1: Offset

요소의 표시되는 크기는 모든 패딩과 스크롤 막대의 테두리 크기를 포함하여 높이와 너비에 따라 결정됩니다(외부 테두리는 포함되지 않음). 요소의 오프셋은 다음 네 가지 속성을 통해 얻을 수 있습니다.

offsetHeight: 요소가 세로 방향으로 차지하는 공간의 크기(1픽셀 단위)

offsetWidth: 가로 방향으로 요소가 차지하는 공간의 크기(픽셀 단위).

offsetLeft: 요소의 왼쪽 테두리와 포함 요소의 왼쪽 내부 테두리 사이의 픽셀 거리입니다.

offsetTop: 요소의 외부 테두리와 요소의 내부 테두리 사이의 거리입니다.

offsetLeft 및 offsetTop 속성은 포함 요소에 대한 참조가 offsetParent 속성에 존재합니다.

2: 클라이언트 영역의 크기:

상자 모델은 여백, 패딩 및 테두리로 구분됩니다. 그리고 콘텐츠(포함) 영역

클라이언트 영역은 상자 모델의 포함 영역과 유사합니다. clienWidth와 clienHeight라는 두 가지 속성이 있습니다.

3: 스크롤 크기:

스크롤 크기는 스크롤되는 콘텐츠를 포함하는 요소

네 개의 값을 포함합니다:

scrollHeight: 스크롤 막대가 없는 요소 콘텐츠의 전체 높이

scrollWidth: 스크롤 막대가 없는 요소 콘텐츠의 전체 너비

scrollLeft: 콘텐츠 영역에 숨겨져 있음 왼쪽 픽셀

scrollTop: 콘텐츠 영역 위에 숨겨진 픽셀 수

scrollHeight 및 scrollWidth는 요소 콘텐츠의 실제 크기를 결정하는 데에만 사용됩니다.

scrollLeft 및 scrollRgiht 속성을 사용하여 현재 스크롤 상태를 확인하고 요소의 스크롤 위치를 설정할 수 있습니다.

4: 요소의 크기 결정

각 브라우저는 각 요소에 대해 getBoundingClientRect() 메서드를 제공합니다. 이 메서드는 왼쪽, 위쪽, 오른쪽 및 아래쪽의 네 가지 속성을 포함하는 직사각형 객체를 반환합니다.

12.3 Traversal

DOM2 레벨 순회 및 범위 모듈은 DOM 구조의 순차 순회를 완료하는 데 도움이 되는 두 가지 유형인 NodeIterator 및 TreeWalker를 정의합니다.

12.3.1 NodeIterator

NodeIterator 유형은 둘 중 더 간단하며 document.creatNodeIterator() 메서드를 사용하여 해당 유형의 새 인스턴스를 생성할 수 있습니다. 이 메소드는 4개의 매개변수

root를 받습니다: 검색의 시작점으로 사용하려는 트리의 노드입니다.

whatToshow: 방문할 노드를 나타내는 숫자 코드입니다.

filter: NodeFilter 개체입니다.

entityReferenceExpansion: 엔터티 참조 확장 여부를 나타내는 부울 값입니다.

DOM2 수준 순회 및 범위

(1) 순회는 NodeIterator 또는 TreeWalker를 사용하여 DOM의 깊이 우선 순회를 수행하는 것입니다.

(2) NodeIterator는 다음 단계의 앞뒤 이동만 허용하는 간단한 인터페이스입니다. 하나의 노드. TreeWalker는 동일한 기능을 제공하지만 상위 노드, 형제 노드 및 하위 노드를 포함하여 DOM 구조의 모든 방향으로의 이동도 지원합니다.

(3) 범위는 DOM 구조의 특정 부분을 선택한 다음 해당 작업을 수행하는 수단입니다.

(4) 범위 선택을 사용하여 문서 구조를 올바른 형식으로 유지하면서 문서의 특정 부분을 삭제하거나 문서의 해당 부분을 복사합니다.

(5) IE8 및 이전 버전은 "DOM2 레벨 탐색 및 범위" 모듈을 지원하지 않지만 간단한 텍스트 기반 범위 작업을 완료하는 데 사용할 수 있는 독점 텍스트 범위 개체를 제공합니다. IE9는 DOM 탐색을 완벽하게 지원합니다

17장: 오류 처리 및 디버깅:
17.1.1 IE

IE是唯一一个在浏览器界面窗体中显示JS错误的，发生JS错误时，浏览器左下角会出现一个黄色的图标，旁边显示着Error on page

17.2.1try-catch语句：

try{
    //可能出错的语句
}catch（error）{
    //怎么处理 
}

1：finally子句

finally在try语句中一定会被执行，不管catch语句是否已经执行，他会忽略catch语句。

2：错误类型：

Error

EvalError

RangeError

ReferenceError

SyntaxError

JS 고급 프로그램의 DOM 확장

관련 기사