Javascript_javascriptスキルの各種ノード動作例デモコード

コードは次のとおりです:

コードをコピー コードは次のとおりです: type="text/ javascript" src="jquery-1.7.js"> bbb aaa bbb gt; ccc AAA BBB CCC //これらの 3 つの要素ノードの属性ノードを理解します // 1: 要素ノード (要素ノード、nodeName は常に要素のタグ名を保存し、nodeValue の値は常に null) var element_node=document.getElementById('test'); //alert(element_node.nodeType); / 1 //alert(element_node.nodeName); // input //alert(element_node.nodeValue); // null // 2: 属性ノード var attr_node=document.getElementById ('test' ).getAttributeNode('name'); alert(attr_node.nodeType); // 2 alert(attr_node.nodeName) // 名前属性名 alert(attr_node.nodeValue); ; // nn 属性値 // 3: テキスト ノード var all=document.getElementById('t').firstChild; //alert(all.nodeType); //alert(all.nodeName); // #text //alert(all.nodeValue) // bbb テキストコンテンツ var tt1=document.getElementById('t1'); alert(tt1.firstChild.innerHTML); // aaa //alert(tt1.lastChild.innerHTML); // ccc var tt2=tt1.childNodes[1].innerHTML; (tt2); // bbb var tt3=tt1.parentNode.getAttribute('name'); //alert(tt3); //parent_test var tt4=tt1.childNodes[1]; / /alert(tt4.nextSibling.innerHTML); // ccc //alert(tt4.previousSibling.innerHTML); //aaa // ノードメソッドの詳細な紹介 var tt5= document.getElementById( 'test'); var tt6=document.getElementById('t') // hasChildNodes() メソッド: ノードに子ノードがあるかどうかを判断し、子ノードがある場合は true、ない場合は false を返します。 //alert (tt5.hasChildNodes()); // false //alert(tt6.hasChildNodes()); // true //removeChild() メソッド: ノードを削除します var first_node=document.getElementById ('t1').firstChild; //document.getElementById('t1').removeChild(first_node) // 最初のノードを削除します aaa // appendChild() メソッド: add a node if document ノードがツリー内にすでに存在する場合は、それを削除し、新しい場所に挿入します。 var first_node=document.getElementById('t1').firstChild; //document.getElementById('t1').appendChild(first_node); // aaa が最後のノードになります // replaceChild( ) メソッド: 指定された子ノードをドキュメント ツリーから削除 (および返し) し、別のノードで置き換えます //insertBefore() メソッド: 指定されたノードが既に存在する場合は、その前にノードを挿入し、そのノードを削除します元のファイルを削除し、新しい場所に挿入します。 var newd=document.createElement("span"); newd.innerHTML="eee"; //document.getElementById('t1').appendChild(newd); Node var oldd=document.getElementById('t1').lastChild; //document.getElementById('t1').replaceChild(newd,oldd); // 最後の子ノードを置き換えます / /document.getElementById('t1').insertBefore(newd,oldd); // 指定された位置の前にノードを挿入します aaabbbeeeccc // cloneNode() メソッド: ノードをコピーします。このメソッドには 1 つのパラメーター (true) があります。すべての子ノードを同時にコピーすることを意味し、false は現在のノードをコピーすることを意味します。 var what=document.getElementById('fuzhi').cloneNode(true).innerHTML; document.getElementById('m').innerHTML=what; ;/body>