일반적으로 사용되는 DOM tidying_javascript 기술

머리말:

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+$/,'');
}

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.