JS DOM操作実装コード_JavaScriptスキル-jsチュートリアル-php.cn

単純なテーブル:

コードをコピーコードは次のとおりです。

キャンセル" >

コードをコピーします

コードは次のとおりです。 var td= document.getElementById("TEST"); alert(td.childNodes) .length); 結果は 4

 困惑しましたが、関連情報を読んだところ、JS ではスペースがテキスト ノードとしても使用され、スペース  2 つの入力要素の後にあるため、両方ともテキスト ノードとして使用されるため、結果は 4 になります。
スペースを削除すると、結果は 2 になります。
内部のスペース ノードを処理するには、次を使用します。 

コードをコピー

コードは次のとおりです。 function cleanWhitespace(element) ) { for(var i=0; i{

var ノード = element.childNodes[i]

if(node.nodeType == 3 && !/S/.test(node.nodeValue)) 
{ 
node.parentNode .removeChild(node) 
} 
} 
} 

 
ノード cleanWhitespace(document.getElementById("TEST")) を処理した後、
 の別の添付ファイルを解決します: 
DOM の基本メソッド
1。ノード
1 を直接参照します。 document.getElementById(id); 

-- ドキュメント内の ID でノードを検索します
2.document.getElementByTagName(tagName);
-- これらのノードへの参照を含む配列を返します
-- document.getElementByTagName("span"); タイプ span
two のすべてのノードを返します。ノード
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; //前の兄弟ノードを参照します
3.ノード情報
6. nodeName 属性はノード名
を取得します。要素ノードの場合、次のようなタグ名が返されます。
戻り値は "a" -- 属性ノードの場合、属性名が返されます。たとえば、 class="test" 戻り値テストは
-- テキストノードの場合、テキストの内容が返されます。
7.nodeType はタイプを返します。ノードの
--要素ノードは 1 を返します
--属性ノードは 2 を返します
--テキストノードは 3 を返します
8.nodeValue はノードの値を返します
--要素ノードは戻りますnull
--属性ノードは未定義を返します
--テキストノードはテキストを返します Content
9.hasChildNodes() は子ノードがあるかどうかを決定します
10.tagName 属性は要素のタグ名を返します
--この属性は要素ノードでのみ使用可能であり、要素ノード
4のnodeName属性と同等です。属性ノード
11の処理。各属性ノードは要素ノードの属性であり、アクセスできます。 (要素ノード.属性名)
12. setAttribute() メソッドを使用して要素に属性を割り当てます。ノードは属性
--elementNode.setAttribute(attributeName,attributeValue);
を使用します。属性の名前、attributeValue は属性の値
13. getAttribute() メソッドを使用して属性値を取得します
--elementNode.getAttribute(attributeName)
5. テキストノードの処理
> 14. innerHTML 属性と innerText 属性。これら 2 つのメソッドは誰もがよく知っていると思いますので、ここでは紹介しません。IE であっても Firefox であっても、スペース、改行、タブなどをテキストノードとして簡単に扱うことができます。通常、テキストノードが element.childNodes[i] を通じて参照される場合、通常は次のように処理する必要があります:

コードをコピー

コードは次のとおりです。次のように:

6. Change the hierarchical structure of the document
15. The document.createElement() method creates element nodes
--such as: document.createElement("Span");
16.document.createTextNode( ) method to create a text node
--such as: document.createTextNode(" "); //Note: It will not be encoded through html, which means that what is created here is not a space, but a string
17. Use the appendChild() method to add nodes
--parentElement.appendChild(childElement);
18. Use the insertBefore() method to insert child nodes
--parentNode.insertBefore(newNode,referenceNode);
--newNode is the inserted node, referenceNode is the inserted node before this
19. Use the replaceChild method to replace the child node
--parentNode.replaceChild(newNode,oldNode);
--Note : oldNode must be a child node of parentNode,
20. Use cloneNode method to copy the node
--node.cloneNode(includeChildren);
--includeChildren is bool, indicating whether to copy its child node
21. Use the removeChild method to delete child nodes
--parentNode.removeChild(childNode);
7. Table operations
--Note: A complete table node cannot be directly inserted in IE To the document
22. Add rows and cells
var _table=document.createElement("table"); //Create table
table.insertRow(i); //In the i-th row of the table Insert row
row.insertCell(i); //Insert cell at the i-th position of row
23. Reference cell object
--table.rows[i].cells[i];
24. Delete rows and cells
--table.deleteRow(index);
--row.deleteCell(index);
25. Swap two rows to get the positions of two cells
node1.swapNode(node2);
--This method will error in firefox
General method:

Copy code The code is as follows:

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