js DOM 모델 작업_자바스크립트 기술

DOM模型中的节点：元素节点、文本节点、属性节点
例：私のdotnet小屋
（1）a是元素节点
（2）“私のdotnet小屋”是文本节点
（3）href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性

属性	类型	说明
nodeName	String	节点名称，根据节点的类型而定义
nodeValue	String	节点的值，根据节点的类型而定义
nodeType	Number	节点类型，1为元素节点，2为属性节点，3为文本节点
firstChild	Node	指向childNodes列表的第一个节点
lastChild	Node	指向childNodes列表的最后一个节点
childNodes	NodeList	所有子节点列表，childNodes[i]可以访问第i+1个节点
parentNode	Node	指向节点的父节点，如果已是根节点，则返回null
previousSibling	Node	指向前一个兄弟节点，如果已是第一个节点，则返回null
nextSibling	Node	指向后一个兄弟节点，如果已是最后一个节点，返回null
Attributes	NameNodeMap	包含一个元素特性的Attr对象，仅用于元素节点
className	String	节点的CSS类
innerHTML	String	某个标记之间的所有内容，包括代码本身

DOM 노드 메서드
(1) 액세스 노드:
[태그 이름별]
document.getElementsByTagName(sTagName) 메서드: 동일한 태그 이름을 포함하는 요소 노드 목록을 반환합니다. 🎜>[태그 ID별]
document.getElementById(sElementId) 메소드: Id가 지정된 값인 요소 노드를 반환합니다.
[이전 노드에 액세스] IE 및 FireFox와 호환됩니다.
(맞춤형)

코드 복사 코드는 다음과 같습니다.

function prevSib(oNode){
var oTempFirstNode =oNode.parentNode .firstChild;//첫 번째 노드인지 확인하고, 그렇다면 null을 반환합니다.
if(oNode==oTempFirstNode)
return null; ;
//요소 노드를 찾을 때까지 이전 형제 노드를 하나씩 검색
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling
//3항 연산 기호, 요소 노드인 경우 노드 자체를 반환하고, 그렇지 않으면 null을 반환합니다.
return (oTempNode.nodeType==1)?:oTempNode:null;
[다음 노드 방문] IE 및 FireFox와 호환
(맞춤형)

코드 복사

코드는 다음과 같습니다. 다음: function nextSib(oNode){ var oTempLastNode=oNode.parentNode.lastChild //마지막 노드인지 확인, 그렇다면 null 반환 if(oNode==oTempLastNode)

return null ;

var oTempNode=oNode.nextSibling;
//요소 노드를 찾을 때까지 다음 형제 노드를 하나씩 검색합니다.
while(oTempNode.nodeType !=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//3항 연산자, 요소 노드인 경우 노드 자체를 반환하고, 그렇지 않으면 null을 반환합니다.
return(oTempNode. nodeType==1)?oTempNode:null
}


(2) 노드에 하위 노드가 있는지 확인:
NodeObject.hasChildNodes() 메서드: childNodes에 하나 이상의 노드가 포함된 경우 노드, true 반환
(3) 노드 속성 설정:
eleNode.getAttribute(attrNode) 메서드: eleNode 요소의 attrNode 속성을 반환합니다.
eleNode.setAttribute(attrNode,sNewValue) 메서드: 값을 설정합니다. eleNode 요소의 attrNode 속성을 sNewValue

로 지정 (4) 노드 생성:
document.createElement(eleNode) 메서드: 요소 노드 생성 eleNode
document.createTextNode(textNode) 메서드: 텍스트 노드 생성 textNode
document.createDocumentFragment() 메서드: 문서 조각 노드 생성
( 5) 노드 추가:
eleNode.appendChild(textNode) 메서드: childNodes 끝에 textNode 노드 추가
(6) 노드 삭제:
oNode.parentNode.removeChild(oNode) 메서드: childNodes에서 제거 oNode 노드
(7) 노드 교체:
oNode.parentNode.replaceChild(oNewNode,oOldNode) 메서드: oOldNode 노드를 다음에서 교체합니다. oNewNode 노드가 있는 childNodes
(8) 특정 노드 앞에 노드 삽입:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode) 메서드: childNodes의 oTargetNode 노드 앞에 oNewNode 노드 삽입
(9) 뒤에 노드 삽입 특정 노드:
(사용자 정의) oTargetNode.parentNode.insertAfter( oNewNode, oTargetNode) 메서드: childNodes의 oTargetNode 노드 뒤에 oNewNode 노드를 삽입합니다.




코드 복사

코드는 다음과 같습니다. function insertAfter(oNewNode,oTargetNode){ var oParentNode=oTargetNode.parentNode if(oParentNode.lastChild== oTargetNode) oParentNode.appendChild(oNewNode);

else

oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling)