JavaScriptでの基本的なDOM操作方法のまとめ-jsチュートリアル-php.cn

JavaScriptでの基本的なDOM操作方法のまとめ

伊谢尔伦

リリース： 2017-07-18 15:49:59

オリジナル

1501 人が閲覧しました

DOM の基本メソッド

1. ノードへの直接参照
1.document.getElementById(id);
-- ドキュメント内の ID でノードを検索します
2.document.getElementByTagName(tagName);戻り値これらのノードへの参照を含む配列
-- 例: document.getElementByTagName("span"); は、span 型のすべてのノードを返します
2. ノードへの間接参照
3.element.childNodes
-- すべての子ノードを返しますの要素は、element.childNodes[i]
--element.firstChild=element.childNodes[0]; を使用して呼び出すことができます。 .parentNode
--親ノードを参照します
5.element.nextSibling; //次の兄弟ノードを参照します
element.previousSibling; // 前の兄弟ノードを参照します
3.nodeName 属性がノードを取得しますname
-- 要素ノードの場合、タグ名が返されます (、返される値は「a」です
-- 属性ノードの場合、返される値は属性名です (例: class) ="test" はテストを返します
--テキストノードの場合、テキストのコンテンツが返されます
7.nodeType はノードのタイプを返します
--要素ノードは 1 を返します
--属性ノードは 2 を返します
--テキストノードは返されます3
8.nodeValueはノードの値を返します
--要素ノードはnullを返します
--属性ノードは未定義を返します
--テキストノードはテキストコンテンツを返します
9.hasChildNodes() 子ノードがあるかどうかを判断します
10。属性は要素のタグ名を返します
-- この属性は要素ノードでのみ使用可能であり、要素ノードの nodeName 属性と同等です
4. 各属性ノードのポイントは要素ノードのすべての属性です。 (要素ノード.属性名) を通じてアクセスできます
12. setAttribute() メソッドを使用して要素ノードに属性を追加します
--elementNode.setAttribute(attributeName,attributeValue)
--attributeName は属性の名前です。 attributeValue は属性の値です
13. getAttribute() メソッドを使用して属性値
--elementNode.getAttribute(attributeName) を取得します。この 2 つは誰もが信じていることです。この方法はよく知られているため、ここでは紹介しません。IE と Firefox の両方がスペース、改行、タブなどをテキストノードとして簡単に認識できることは注目に値します。通常、テキストノードが element.childNodes[i] を通じて参照される場合、次のように処理する必要があります:

<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script>

ログイン後にコピー

6. ドキュメントの階層を変更します
15. document.createElement() メソッドは、要素ノード
を作成します。 : document.createElement("Span");
16.document.createTextNode() メソッドは、次のようにテキストノードを作成します。 //注: これは HTML によってエンコードされません。ここで作成されます。スペースではなく文字列です
17. appendChild() メソッドを使用してノードを追加します
--parentElement.appendChild(childElement); 18. insertBefore() メソッドを使用して子ノードを挿入します

- -parentNode.insertBefore(newNode,referenceNode) ;

--newNode は挿入されたノード、referenceNode はこの前に挿入されたノード
19. replaceChild メソッドを使用して子ノードを置き換えます
--parentNode.replaceChild(newNode,oldNode);
--注: oldNode はparentNode の子ノードである必要があります
20。cloneNode メソッドを使用してノードをコピーします
--node.cloneNode(includeChildren);
--includeChildren は bool で、その子ノードをコピーするかどうかを示します
21子ノードを削除するには、removeChild メソッドを使用します
--parentNode.removeChild(childNode);
7. テーブル操作
-- 注: 完全なテーブルノードを IE のドキュメントに直接挿入することはできません
22。
var _table=document.createElement ("table"); //テーブルを作成します
table.insertRow(i) //テーブルの i 番目の行に行を挿入します
row.insertCell(i);行の i 番目の位置にセルを挿入します
23 .セルオブジェクトを参照します
--table.rows[i].cells[i];
24. 行とセルを削除します
--table.deleteRow(index);
--row.deleteCell(index);
25 .2 つのセルの位置を取得するために 2 つの行を交換します
node1.swapNode(node2);
--このメソッドは Firefox では失敗します
一般的なメソッド:

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

ログイン後にコピー

以上がJavaScriptでの基本的なDOM操作方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。