머리말:
html은 문서에 대한 DOM 트리를 구축합니다. 이 트리는 일련의 노드 노드로 구성됩니다. 이는 우리를 위해 문서의 구조를 정의합니다.
노드 유형:
Node.ELEMENT_NODE(1); //요소 노드가 더 일반적으로 사용됩니다
Node.ATTRIBUTE_NODE(2); //속성 노드가 더 일반적으로 사용됩니다
Node.TEXT_NODE(3); //텍스트 노드가 더 일반적으로 사용됩니다
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9); //문서 노드가 더 일반적으로 사용됩니다
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);
관련 기능:
1. 노드 획득:
document.getElementById('요소');
document.getElementsByTagName('element'); 배열과 유사한 객체를 반환합니다
document.getElementsByName('element'); 배열과 같은 객체를 반환합니다
document.getElementsByClassName('className') IE7 이하에서는 지원되지 않는 배열과 유사한 객체를 반환합니다.
document.querySelectorAll('class' | 'element') 배열과 같은 객체를 반환합니다
2. 노드 트래버스
하위 노드 찾기: element.childNodes 배열과 같은 객체를 반환합니다.
첫 번째 하위 노드 찾기: element.firstChild
마지막 하위 노드 찾기: element.lastChild
상위 요소 찾기: element.parentNode
이전 형제 요소 찾기: element.previousSibling
다음 형제 요소 찾기: element.nextSibling
3.노드 정보 얻기
요소 또는 속성 노드의 레이블 이름 가져오기: elementNode.nodeName
텍스트 노드의 콘텐츠 가져오기: textNode.nodeValue;
요소 노드의 콘텐츠 가져오기 및 설정(HTML 태그가 포함될 수 있음): elementNode.innerHTML
요소 노드의 일반 텍스트 콘텐츠를 가져오고 설정합니다. element.innerText(IE) element.textContent(FF)
속성 노드의 값을 가져옵니다: attrNode.getAttribute(AttrName);
속성 노드의 값을 설정합니다: attrNode.setAttribute(AttrName,AttrValue);
노드 유형 가져오기: node.nodeType;
요소 노드:
속성 노드:
텍스트 노드:
문서 노드: 9
댓글 노드: 8
4. 운영 노드
요소 노드 생성: document.createElement('element');
텍스트 노드 생성: document.createTextNode('text');
속성 노드 생성: document.createAttribute('attribute');
노드 삭제: node.remove();
하위 노드 삭제: parentNode.removeChild(childNode)
노드 삽입: parentNode.appendChild(childNode); //상위 노드 끝에 삽입
parentNode.insertBefore(newNode,existingNode) //기존 노드 앞에 삽입
복제 노드: Node.cloneNode([true]) //true를 전달하면 전체 복사를 의미합니다
노드 교체: parentNode.replaceChild(newNode,oldNode);
관련 확장:
1. DOM 처리 시 IE와 다른 브라우저 간의 비호환으로 인해 일부 간단한 캡슐화 처리가 필요합니다.
//================= function getElementChildren(element) { var children = [], oldChildNodes = element.childNodes; for(var i=0, len=oldChildNodes.length; i<len; i+=1) { if(oldChildNodes[i].nodeType == 1) { children.push(oldChildNodes[i]); } } return children; } //================== function getElementNext(element) { var next = element.nextSibling || null; if(next) { if(next.nodeType == 1) { return next; } else { return arguments.callee(next); } } else { throw new Error("下一个兄弟元素不存在!"); } } //====================== function getElementPrev(element) { var prev = element.previousSibling || null; if(prev) { if(prev.nodeType == 1) { return prev; } else { return arguments.callee(prev); } } else { throw new Error("上一个兄弟元素不存在!"); } }
2. DOM 요소 스타일 조작
//========================= function getElementStyle(element,styleName) { if(typeof getComputedStyle != 'undefined') { return getComputedStyle(element,null)[styleName]; } else { return element.currentStyle[styleName]; } } //========================== function addClass(element,className) { element.className += className; } //========================== function removeClass(element,removeClassName) { var classStr = element.className; element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,''); }
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.