DOM과 노드, 속성, 검색 노드 소개

이 기사는 주로 DOM, 노드, 속성 및 노드를 찾는 방법에 대한 자세한 소개를 공유합니다. 편집자를 따라가서 살펴보는 것이 도움이 되기를 바랍니다. 그것은 당신을 도울 수 있습니다.

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

DOM은 문서를 표현하고 수정하는 방법을 정의합니다. CSS 스타일 시트는 js에서 DOM 메서드를 사용하여 요소의 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 노드 1

Attribute 노드 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() 메서드는 상위 노드에 하위 노드가 있는지 확인하고 반환 결과는 부울 값입니다.

관련 권장 사항:

dom을 찾는 여러 가지 jQuery 메서드

React는 실제 DOM을 작동하여 동적 바닥 흡입을 달성합니다.

인스턴스 공유 JQuery 선택기, DOM 노드 작업 실습

위 내용은 DOM과 노드, 속성, 검색 노드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!