JS DOM operation implementation code_javascript skills

Simple table:

Copy code The code is as follows:

< ;tr>

Tested:

Copy code The code is as follows:

var td= document.getElementById("TEST");
alert(td.childNodes.length); The result is 4

I was puzzled. After reading the relevant information, I found that in JS, a space is also used as a text node, and there is a space
after the two input elements, so they are both used as text nodes. A text node, so the result is 4
After removing the spaces, the result is 2
In order to process the space nodes inside, use the following function to process

Copy code The code is as follows:

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);
}
}
}

After processing the node cleanWhitespace(document.getElementById("TEST")), OK, solve
another Attachment:
Basic methods of DOM
1. Directly refer to the node
1.document.getElementById(id);
--Find the node by id in the document
2.document. getElementByTagName(tagName);
--returns an array containing references to these nodes
--such as: document.getElementByTagName("span"); will return all nodes of type span
two .Indirect reference to node
3.element.childNodes
--returns all child nodes of element, which can be called with element.childNodes[i]
--element.firstChild=element.childNodes [0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--Reference the parent node
5.element. nextSibling; //Reference the next sibling node
element.previousSibling; //Reference the previous sibling node
3. Obtain the node information
6. The nodeName attribute obtains the node name
-- For element nodes, the tag name is returned, such as: The return is "a"
--For attribute nodes, the attribute name is returned, such as: class="test" Return The test is
--for text nodes, the content of the text is returned
7.nodeType returns the type of the node
--element nodes return 1
--attribute nodes return 2
--Text node returns 3
8.nodeValue returns the value of the node
--Element node returns null
--Attribute node returns undefined
--Text node returns text Content
9.hasChildNodes() determines whether there are child nodes
10.tagName attribute returns the tag name of the element
--This attribute is only available for element nodes, and is equivalent to the nodeName attribute of the element node
4. Processing attribute nodes
11. Each attribute node is an attribute of the element node and can be accessed through (element node.attribute name)
12. Use the setAttribute() method to assign attributes to the element Node adds attributes
--elementNode.setAttribute(attributeName, attributeValue);
--attributeName is the name of the attribute, attributeValue is the value of the attribute
13. Use the getAttribute() method to obtain the attribute value
--elementNode.getAttribute(attributeName);
5. Processing text nodes
14. innerHTML and innerText attributes. I believe everyone is familiar with these two methods and will not introduce them. It is worth noting that whether it is IE or Firefox easily treats spaces, newlines, tabs, etc. as text nodes. When text nodes are generally referenced through element.childNodes[i], they generally need to be processed:

Copy code The code is as follows:

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);