JavaScript의 기본 DOM 작업 방법 요약

DOM의 기본 메소드

1. 노드 직접 참조
1.document.getElementById(id)
--문서에서 id로 노드 찾기
2.document.getElementByTagName(tagName)-- 반환 이러한 노드에 대한 참조가 포함된 배열
--예: document.getElementByTagName("span");은 범위 유형의 모든 노드를 반환합니다.
2. 노드에 대한 간접 참조
3.element.childNodes
--모든 하위 노드 반환 element.childNodes[i]
--element.firstChild=element.childNodes[0]
--element.lastChild=element.childNodes[element.childNonts.length- 1];을 사용하여 요소를 호출할 수 있습니다. .parentNode
--상위 노드 참조
5.element.nextSibling; //다음 형제 노드 참조
element.previousSibling; //이전 형제 노드 참조
3 nodeName 속성은 노드 이름
--요소 노드의 경우 와 같은 태그 이름을 반환하고 "a"를 반환합니다.
--속성 노드의 경우 다음과 같은 속성 이름을 반환합니다. class= "test"는 테스트를 반환합니다.
--텍스트 노드의 경우 텍스트 내용이 반환됩니다.
7.nodeType은 노드의 유형을 반환합니다.
--요소 노드는 1을 반환합니다.
--속성 노드는 2를 반환합니다.
--텍스트 노드는 3을 반환합니다.
8.nodeValue는 노드의 값을 반환합니다.
--요소 노드는 null을 반환합니다.
-속성 노드는 정의되지 않은 값을 반환합니다.
-텍스트 노드는 텍스트 콘텐츠를 반환합니다.
9.hasChildNodes() 하위 노드가 있는지 확인합니다
10. 요소의 태그 이름을 반환합니다
--이 속성은 요소 노드에만 사용할 수 있으며 요소 node
4의 nodeName 속성과 동일합니다. 각 속성 노드 포인트는 요소 노드의 모든 속성입니다. (요소 node.attribute 이름)
12을 통해 액세스할 수 있습니다. setAttribute() 메서드를 사용하여 요소 노드에 속성을 추가합니다
--elementNode.setAttribute(attributeName,attributeValue)
-- attributeName은 속성의 이름, attributeValue입니다.
13 속성 값을 사용하여
--elementNode.getAttribute(attributeName);
5. innerHTML 및 innerText 속성을 처리합니다. 이 방법은 익숙하므로 여기서는 소개하지 않겠습니다. IE와 Firefox 모두 공백, 줄 바꿈, 탭 등을 쉽게 텍스트 노드로 간주할 수 있다는 점은 주목할 가치가 있습니다. 일반적으로 텍스트 노드가 element.childNodes[i]를 통해 참조되는 경우 일반적으로 처리해야 합니다.

<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script>

6. 문서의 계층 구조를 변경합니다
15 document.createElement() 메서드는 다음과 같은 요소 노드를 생성합니다
. : document.createElement("Span");
16.document.createTextNode() 메소드는 다음과 같은 텍스트 노드를 생성합니다.--예: document.createTextNode(" ") //참고: html로 인코딩되지 않습니다. 공백이 아니라 문자열입니다.

17.appendChild() 메소드를 사용하여 노드를 추가합니다.

--parentElement.appendChild(childElement)
18. insertBefore() 메소드를 사용하여 하위 노드를 삽입합니다. -parentNode.insertBefore(newNode,referenceNode) ;
--newNode는 삽입된 노드이고 referenceNode는 이
19 이전에 삽입된 노드입니다. 하위 노드를 바꾸려면
--parentNode.replaceChild(newNode,oldNode);
--참고: oldNode는 parentNode의 하위 노드여야 합니다.
20. cloneNode 메서드를 사용하여 노드를 복사합니다.
--node.cloneNode(includeChildren)
--includeChildren은 하위 노드를 복사할지 여부를 나타내는 bool입니다. .removeChild 메소드를 사용하여 하위 노드를 삭제하세요
--parentNode.removeChild(childNode);
7. 테이블 작업
--참고: IE
22에서는 전체 테이블 노드를 문서에 직접 삽입할 수 없습니다.
var _table=document.createElement ("table"); //테이블 생성
table.insertRow(i); //테이블의 i번째 행에 행 삽입
row.insertCell(i); 행의 i번째 위치에 셀을 삽입합니다
23 .참조 셀 개체
--table.rows[i].cells[i]
24. 행 및 셀 삭제
--table.deleteRow(index);
--row.deleteCell(index);
25 .두 행을 교환하여 두 셀의 위치를 ​​가져옵니다
node1.swapNode(node2)
--이 방법은 Firefox에서 잘못됩니다.

위 내용은 JavaScript의 기본 DOM 작업 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!