ホームページ >ウェブフロントエンド >jsチュートリアル >JS DOM操作実装コード_JavaScriptスキル
JS DOM操作実装コード_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 18:22:171083ブラウズ
単純なテーブル:
コードをコピー コードは次のとおりです。
| キャンセル" > コードをコピーします コードは次のとおりです。 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)) -- ドキュメント内の ID でノードを検索します{ node.parentNode .removeChild(node) } } } ノード cleanWhitespace(document.getElementById("TEST")) を処理した後、 の別の添付ファイルを解決します: DOM の基本メソッド 1。ノード 1 を直接参照します。 document.getElementById(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); 声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。 |