DOM의 Node 객체와 Element 객체의 차이점 분석
- 不言원래의
- 2018-09-01 11:39:501524검색
이 글의 내용은 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.hasAttribute('속성 이름' ); - 지정된 요소의 지정된 속성이 존재하는지 확인하고 결과는 부울 값을 반환합니다.
innerHTML 속성
element.innerHTML - 지정된 요소의 HTML 코드 가져오기
Parent element.innerHTML=HTML 코드; 상위 요소에 HTML 코드를 작성하고 문자열에 직접 HTML 코드를 작성하지만 이 방법에는 보안 문제가 있습니다
관련 권장 사항:
jquery 개체와 javascript 개체, 즉 서로 간의 DOM 개체 변환_jquery
DOM 및 XMLHttpRequest 객체 속성과 메서드, domxmlhttprequest
위 내용은 DOM의 Node 객체와 Element 객체의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!