html DOM 노드 작업(가져오기/수정/추가 또는 삭제)_javascript 기술

HTML DOM은 HTML 요소를 가져오고, 수정하고, 추가하고, 제거하는 방법에 대한 표준입니다. HTML DOM에서는 모든 것이 노드입니다. DOM은 노드 트리로 간주되는 HTML입니다.

W3C의 HTML DOM 표준에 따르면 HTML 문서의 모든 콘텐츠는 노드입니다.

전체 문서는 문서 노드입니다
각 HTML 요소는 요소 노드입니다
HTML 요소 내부의 텍스트는 텍스트 노드입니다
각 HTML 속성은 속성 노드
주석은 주석 노드입니다

HTML DOM은 HTML 문서를 트리 구조로 처리합니다. 이 구조를 노드 트리라고 합니다.
HTML DOM 트리 인스턴스

http://www.w3school.com.cn/i/ct_htmltree.gif

HTML DOM을 통해 트리 모두 의 노드는 JavaScript를 통해 액세스할 수 있습니다. 모든 HTML 요소(노드)는 수정이 가능하며, 노드를 생성하거나 삭제할 수 있습니다.

모든 HTML 요소는 객체로 정의되며 프로그래밍 인터페이스는 객체 메소드와 객체 속성입니다.

One: 요소 가져오기 노드 방법:

1.var node = document.getElementById("nodeId")

2.var nodelist = document.getElementsByClassName("nodeclassname ");

3.var nodelist = document.getElementsByTagName("nodetagname");

2: 요소 노드를 얻은 후 요소 노드에서 수행할 수 있는 작업: 1. 자체 작업. 2. 하위 노드에 대한 작업. 3. 형제 노드에서의 작업. 4. 상위 노드 작업

2.1. 자체 삭제: node.parentNode.removeChild(node)

2.2 하위 노드가 있는지 확인: var boolean = node.hasChildNodes();

하위 노드 목록 가져오기: var childList = node.childNodes;

노드 요소 유형 가져오기: var nodetype = node.nodeName;

하위 노드를 삭제합니다. node.removeChild(childNode);

하위 노드 끝에 하위 노드 삽입: node.appendChild(childNode);

하위 노드 끝에 하위 노드 삽입: node.insertBefore(childNode );

노드 B를 노드 A로 교체: node.replaceChild(A,B);

2.3.node.nextSibling은 다음 인접 형제 노드를 가져옵니다.

node .previousSibling은 인접한 이전 형제 노드를 가져옵니다

2.4 상위 노드를 가져옵니다.