Javascriptの各種ノードの動作例のデモコード
4072 ワード
コードは以下の通りです
<br/><script type="text/javascript" src="jquery-1.7.js"/>
<br/>
<br/>
<br/><input type="button" id="test" name="nn" value="EFG"/>
<br/><div id="t">bbb</div>
<br/><div name="parent_test">
<br/><div id="t1"><span>aaa</span><span>bbb</span><span>ccc</span></div>
<br/></div>
<br/><div id="fuzhi"><span>AAA</span><span>BBB</span><span>CCC</span></div><div id="m"/>
<br/><script type="text/javascript">
<br>//
<br>// 1: ( ，nodeName ， nodeValue null)
<br>var element_node=document.getElementById('test');
<br>//alert(element_node.nodeType); // 1
<br>//alert(element_node.nodeName); // input
<br>//alert(element_node.nodeValue); // null
<br>// 2:
<br>var attr_node=document.getElementById('test').getAttributeNode('name');
<br>alert(attr_node.nodeType); // 2
<br>alert(attr_node.nodeName); // name
<br>alert(attr_node.nodeValue); // nn
<br>// 3:
<br>var all=document.getElementById('t').firstChild;
<br>//alert(all.nodeType); // 3
<br>//alert(all.nodeName); // #text
<br>//alert(all.nodeValue); // bbb
<br>var tt1=document.getElementById('t1');
<br>//alert(tt1.firstChild.innerHTML); // aaa
<br>//alert(tt1.lastChild.innerHTML); // ccc
<br>var tt2=tt1.childNodes[1].innerHTML;
<br>//alert(tt2);// bbb
<br>var tt3=tt1.parentNode.getAttribute('name');
<br>//alert(tt3); // parent_test
<br>var tt4=tt1.childNodes[1];
<br>//alert(tt4.nextSibling.innerHTML); // ccc
<br>//alert(tt4.previousSibling.innerHTML); //aaa
<br>// node
<br>var tt5=document.getElementById('test');
<br>var tt6=document.getElementById('t')
<br>// hasChildNodes() ： ， true， false
<br>//alert(tt5.hasChildNodes()); // false
<br>//alert(tt6.hasChildNodes()); // true
<br>//removeChild() ：
<br>var first_node=document.getElementById('t1').firstChild;
<br>//document.getElementById('t1').removeChild(first_node); // aaa
<br>// appendChild() ： ， ， 。
<br>var first_node=document.getElementById('t1').firstChild;
<br>//document.getElementById('t1').appendChild(first_node); // aaa
<br>// replaceChild() ： （ ） ，
<br>//insertBefore() ： ， ， ， 。
<br>var newd=document.createElement("span");
<br>newd.innerHTML="eee";
<br>//document.getElementById('t1').appendChild(newd); //
<br>var oldd=document.getElementById('t1').lastChild;
<br>//document.getElementById('t1').replaceChild(newd,oldd); //
<br>//document.getElementById('t1').insertBefore(newd,oldd); // aaabbbeeeccc
<br>// cloneNode() ： ， ，true ，false 。
<br>var what=document.getElementById('fuzhi').cloneNode(true).innerHTML;
<br>document.getElementById('m').innerHTML=what;
<br></script>
<br/>
<br/>
<br/>
</code></pre>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>