firstChild, className,childNodes,parentNode的简单实用

function showmsg(obj) { document.getElementById("qxdt").background="images/JX2_630.jpg"; document.getElementById("qxdt").firstChild.className="bz1"; document.getElementById("qsydt").background="images/JX2_630.jpg"; document.getElementById("qsydt").firstChild.className="bz1";document.getElementById("jnrcpy").background="images/JX2_630.jpg"; document.getElementById("jnrcpy").firstChild.className="bz1";document.getElementById("cxcgyy").background="images/JX2_630.jpg"; document.getElementById("cxcgyy").firstChild.className="bz1"; obj.background="images/JX2_28.jpg"; obj.firstChild.className="bz"; } 

<ul id="abc"> <li id="ccc"><ul> <li id="ddd">aaa</li> <li>aa</li> <li>dd</li> <li>dd</li> <li>dd</li> </ul></li> <li>das</li> <li>dadf</li> <li>dsaf</li> <li>sdafu <ul> <li>adfsaf</li> <li>sdaf</li> <li>sdaf</li> <li>asdf</li> <li>sfa</li> </ul> </li> <li>aa</li> </ul> <mce:script type="text/javascript"><!-- (function() { var ulList = document.getElementById("abc"); var ulListChild = ulList.childNodes; for (var i=0; i<ulListChild.length; i+=1) { ulListChild[i].onmouseover = function() { this.style.border = "1px solid #ccc;"; } } })(); // --></mce:script> 

<script> function rdl_fnSwap(){ oList.children(2).swapNode(oList.children(1)); } </script> <ul id = oList> <li>第1个列表项目 <li>第2个<a href="#" onclick="return false;">列表项目</a> <li style="font-weight:bold;">第3个列表项目 <li>第4个列表项目 </ul> <input type=button value=" 交换 " onclick= "rdl_fnSwap();"> parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。 childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 children 获取作为对象直接后代的 DHTML 对象的集合。