JS DOM 작업 구현 code_javascript 기술

간단한 테이블:

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

>< ;tr>

테스트됨:

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

var td= document.getElementById("TEST")
alert(td.childNodes) .length); 결과는 4입니다

관련 정보를 읽어보니 JS에서도 공백이 텍스트 노드로 사용되는 것을 발견했습니다.
두 개의 입력 요소 뒤에 있으므로 둘 다 텍스트 노드로 사용되므로 결과는 4입니다.
공백을 제거한 후 결과는 2입니다.
내부의 공간 노드를 처리하려면 다음을 사용하세요. 처리할 다음 함수

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

function cleanWhitespace(element )
{
for(var i=0; i{
var node = element.childNodes[i]
if(node.nodeType) == 3 && !/S/.test(node.nodeValue))
{
node.parentNode .removeChild(node)
}
}
}

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




코드 복사

코드는 다음과 같습니다. 다음과 같습니다: function cleanWhitespace(element) {

for(var i=0; i{
var node = element.childNodes[i]
if(node.nodeType == 3 && !/S/.test(node.nodeValue) )
{
node.parentNode.removeChild(노드)
}
}
}

6. 문서의 계층 구조를 변경합니다
15. document.createElement() 메서드는
요소 노드를 생성합니다. 예: document.createElement("Span"); .createTextNode( ) 메서드를 사용하여 텍스트 노드
를 생성합니다. 예: document.createTextNode(" "); //참고: HTML을 통해 인코딩되지 않습니다. 즉, 여기서 생성되는 내용은 공백이 아닙니다. 그러나 문자열은
17입니다. 노드를 추가하려면
-parentElement.appendChild(childElement)
18. insertBefore() 메서드를 사용하세요. .insertBefore(newNode,referenceNode);
--newNode는 삽입된 노드이고, referenceNode는 이
이전에 삽입된 노드입니다. 19. 하위 노드를 교체하려면
-parentNode.replaceChild(newNode) ,oldNode);
--참고: oldNode는 parentNode의 하위 노드여야 합니다.
20. cloneNode 메서드를 사용하여 노드를 복사합니다.
--node.cloneNode(includeChildren)--includeChildren 하위 노드를 복사할지 여부를 나타내는 bool
--parentNode.removeChild(childNode)
-참고: A 전체 테이블 노드는 IE에서 직접 삽입할 수 없습니다. 문서에
22. 행 및 셀 추가
var _table=document.createElement("table") //테이블 만들기
table.insertRow(i); //테이블의 i번째 행에 삽입 행
row.insertCell(i); //i번째 행의 위치에 셀을 삽입합니다
23.-테이블. 행[i].cells[i];
24. 행 및 셀 삭제
--table.deleteRow(index)
--row.deleteCell(index); 두 셀의 위치를 ​​가져오는 행
node1.swapNode(node2);
--이 방법은 Firefox에서 오류가 발생합니다
일반 방법:




코드 복사


코드는 다음과 같습니다.

function swapNode(node1,node2) { var _parent=node1.parentNode var _t1=node1.nextSubling; if(_t1)parent.insertBefore(node2,_t1)

else _parent.appendChild(node2); )parent.insertBefore(node1,_t2);

else _parent.appendChild(node1);