DOM의 Node 객체와 Element 객체의 차이점 분석

이 글의 내용은 DOM에서 Node 객체와 Element 객체의 차이점을 분석한 내용입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

노드 객체

노드 객체는 Dom의 표준 사양에 제공됩니다. 이 객체는 주로 DOM 노드 트리 구조를 구문 분석하기 위한 속성과 메서드를 제공합니다. DOM 트리 구조는 주로 구문 분석을 위해 노드에 의존하며 DOM 노드 트리 구조가 됩니다. . Node 객체는 DOM 노드 트리 구조를 구문 분석하는 주요 입구입니다. Node 객체가 제공하는 속성과 메소드는 노드 탐색 및 노드 삽입과 같은 작업을 실현할 수 있습니다.

노드 유형을 판단하세요

Element name.nodeName; 라벨 이름(대문자)
요소 이름 .nodeType; - 요소 유형 가져오기
요소 이름.nodeValue - 요소의 텍스트 콘텐츠 가져오기

부모 노드 가져오기

노드 이름.parentNode; 하위 노드
Node name.parentElement; - 상위 요소 가져오기 Node

하위 노드 가져오기

Node name.childNodes; - 상위 노드 아래의 모든 하위 노드 가져오기
Node name.firstChild; 상위 노드
노드 이름.lastChild; - 상위 노드 A 하위 노드 아래의 마지막 하위 노드를 가져옵니다.

인접 형제 노드를 가져옵니다.

노드 이름.previousSibling; - 이전 형제 요소를 가져옵니다.
노드 이름.nextSibling; 다음 형제 요소

appendChild() 메소드

parent node.appendChild(child node ); - 상위 노드에 하위 노드를 추가합니다. 기본적으로
상위 노드는 insertBefore(새로 생성된 노드, 이전 노드)에 추가됩니다. 페이지에서); - 앞에 있는 상위 요소의 지정된 하위 노드에

삭제 노드를 추가합니다.

Parent node.removeChild(child node) - 지정된 하위 노드를 삭제합니다.

Parent 노드 .replaceChild(new child node, target node); - 상위 노드에서 선택한 대상 하위 노드를 교체할 수 있습니다.

Copy node

복사된 대상 node.cloneNode(true) - true는 전체 복제를 의미합니다. 노드, false는 심층 복제가 아니며 텍스트를 복제하지 않음을 의미합니다. 기본값은 false

textContent 속성

Node.textContent입니다. - 노드의 텍스트 콘텐츠를 출력합니다.

Element 객체

Element 객체는 다음에서 제공됩니다. DOM 표준 사양 이 개체는 HTML 페이지의 모든 요소에 대한 속성과 메서드를 제공합니다. DOM 표준 사양에 제공되며 주로 DOM 노드 트리 구조를 사용하여 HTML 페이지의 내용에 액세스합니다. . Element 개체는 HTML 페이지 콘텐츠에 액세스하고 업데이트하기 위해 주로 DOM 요소 트리 구조에 의존하는 DOM 표준 사양에서 제공됩니다. 모든 HTML 페이지 요소는 HTMLElement 개체이며 이 개체는 Element 개체 가져오기에서 상속됩니다.

Parent element.firstElementChild; - 상위 요소의 첫 번째 하위 요소 가져오기

Parent element.lastElementChild; - 상위 요소의 마지막 하위 요소 가져오기

인접 형제 요소 가져오기

Element.previousElementSibling; 형제 요소의 요소
element.nextElementSibling; - 요소의 다음 형제 요소를 가져옵니다

Attribute 작업

element.getAttribute('속성 이름') - 지정된 요소의 지정된 속성을 가져옵니다
Element.setAttribute( '속성 이름',' 속성 값') - 지정된 요소의 속성 이름과 속성 값을 설정합니다.

element.removeAttribute('속성 이름') - 지정된 요소의 속성을 제거합니다.

Element.hasAttribute('속성 이름' ); - 지정된 요소의 지정된 속성이 존재하는지 확인하고 결과는 부울 값을 반환합니다.

innerHTML 속성

element.innerHTML - 지정된 요소의 HTML 코드 가져오기
Parent element.innerHTML=HTML 코드; 상위 요소에 HTML 코드를 작성하고 문자열에 직접 HTML 코드를 작성하지만 이 방법에는 보안 문제가 있습니다

관련 권장 사항:

jquery 개체와 javascript 개체, 즉 서로 간의 DOM 개체 변환_jquery

DOM 및 XMLHttpRequest 객체 속성과 메서드, domxmlhttprequest

위 내용은 DOM의 Node 객체와 Element 객체의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!