DOM, 노드, 속성 및 노드를 찾는 방법에 대한 자세한 소개-JS 튜토리얼-php.cn

DOM, 노드, 속성 및 노드를 찾는 방법에 대한 자세한 소개

亚连

풀어 주다： 2018-05-18 18:10:46

원래의

2027명이 탐색했습니다.

다음은 DOM에 대한 소개와 제가 여러분과 공유할 노드, 속성, 노드를 찾는 방법입니다. 매우 좋은 참조 가치가 있습니다.

문서 운영을 위한 DOM(Document Object Modle) 프로그래밍 인터페이스

DOM은 문서를 표현하고 수정하는 방법을 정의합니다. CSS 스타일 시트는 요소의 CSS 스타일을 변경하기 위해 사용할 수 없습니다. 본질적으로 위의 내용은 요소에 인라인 스타일을 추가하는 것입니다.

DOM 개체는 HTML 및 xml 기능 개체 모음을 작동하는 데 사용되는 호스트 개체입니다. xml ——>

document 단독으로 작성하면 전체 문서를 나타내며, html 태그의 상위 레이어에 암묵적으로 작성되며, html은 문서의 루트 태그일 뿐입니다.

참고:

BOM 및 DOM 그룹화는 배열이 아니라 배열과 유사합니다.

요소를 가져오는 방법:

getElementById(); IE8 이하의 브라우저는 id 값의 대소문자를 구분하지 않으며 요소 이름의 속성 값과 일치합니다. id 값은 백그라운드에서 수정되므로 사용하지 않거나 적게 사용하도록 하세요.

getElementsByTagName(); 모든 브라우저 지원

getElementsByClassName(); IE8 이하 브라우저는

getElementsByName()을 지원하지 않습니다. 이전 버전에서는 요청을 제출할 수 있는 태그 이름만 적용됩니다. (form, form element, img, iframe)

document.querySelector(); CSS 선택기는 IE7 이하와 호환되지 않으며 실시간이 아닙니다.

document.querySelectAll();

노드 유형:

Element 노드 1Attribute 노드 2

Text(텍스트) 노드 3 // 텍스트, 공백, 캐리지 리턴 등은 모두 텍스트 노드입니다.

Comment node 8

document node 9

documentfragment 11

순회된 노드 수:

parentNode는 자식 노드의 부모 노드이고, 마지막 parentNode 노드는 문서 노드입니다. childNodes 상위 노드의 모든 하위 노드, 요소 노드, 주석 노드, 텍스트 노드

firstChild 첫 번째 하위 노드

lastChild 마지막 하위 노드

nextSibling 다음 형제 노드

previousSibling 이전 형제 노드

순회된 수 요소 노드:

(자식 노드를 제외하고 나머지는 IE9 이하와 호환되지 않습니다.) parentElement 요소의 상위 요소 노드입니다. 마지막 상위 요소 노드는 html 요소이며 문서는 자체 포함 노드입니다. . children은 상위 요소 아래에 있는 요소의 하위 노드입니다.

node.childElementCount === node.children.length 현재 하위 노드의 요소 하위 노드 수입니다. children.length를 사용하세요.

firstElementChild 첫 번째 요소 하위 노드

lastElementChild 마지막 요소 하위 노드

nextElementSibling, PreviousElemnetSibling

노드의 네 가지 속성:

nodeName 요소 노드 외에도 반환된 결과에는 ' # 앞에 '. 요소 노드는 태그 이름을 대문자로 반환하고 유형은 읽기 전용입니다. nodeValue는 텍스트 노드와 코멘트 노드에만 사용되며 읽고 쓸 수 있습니다.

nodeType은 해당 노드 유형을 나타내는 숫자를 반환합니다. 읽기 전용

속성 요소 노드의 속성 컬렉션입니다.

node.hasChildNodes() 메서드는 상위 노드에 하위 노드가 있는지 확인하고 반환 결과는 부울 값입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.