Welcome to DOM World! <br> var nodeStatus = function (node) {<br> var temp = "";<br> if (node.nodeName != null) {<br> temp += "nodeName:" + node.nodeName + "\n";<br> }<br> else {<br> temp += "nodeName:null!\n"; //<br>,\n<br> }</p> <p>if (node.nodeType != null) {<br> temp += "nodeType:" + node.nodeType + "\n";<br> }<br> else {<br> temp += "nodeType:null!\n";<br> }</p> <p>if (node.nodeValue != null) {<br> temp += "nodeValue:" + node.nodeValue + "\n";<br> }<br> else {<br> temp += "nodeValue:null!\n";<br> }</p> <p>return temp;<br> }</p> <p>var currentElement = document.getElementById('p1');<br> var msg = nodeStatus(currentElement);<br> //alert(msg);<br> var firstChild = currentElement.firstChild;<br> msg += nodeStatus(firstChild);</p> <p>//父亲的下一个儿子->弟弟<br> var youngerBrother = firstChild.nextSibling;<br> msg += nodeStatus(youngerBrother);</p> <p>//2弟的儿子=p父亲的大孙子<br> var grandSon = youngerBrother.firstChild;<br> msg += nodeStatus(grandSon);</p> <p>//孙子的父亲<br> var grandSonParent = grandSon.parentNode;<br> msg += nodeStatus(grandSonParent);</p> <p>//孙子的父亲的兄长<br> var grandSonParentElderBrother = grandSonParent.previousSibling<br> msg += nodeStatus(grandSonParentElderBrother);</p> <p>//大哥的父亲<br> var parent = grandSonParentElderBrother.parentNode;<br> msg += nodeStatus(parent);</p> <p>//父亲的小儿子<br> var lastChild = parent.lastChild;<br> msg += nodeStatus(lastChild);</p> <p>//父亲的所有儿子<br> var allChildInfo = "";<br> var allChild = parent.childNodes;<br> for (var i = 0; i < allChild.length; i++) {<br/> allChildInfo += nodeStatus(allChild[i]);<br/> }</p><p>//alert(msg);<br/> Beans Cheese Milk<br> var oPurchases = document.getElementById('purchases');<br> var items = document.getElementsByTagName("li");</p> <p>var info = typeof (oPurchases) + '<br>';<br> for (var i = 0; i < items.length; i++) {<br> info += typeof (items[i]) + "<br>";<br> }</p> <p>//document.write(info);<br> <br> var rdItems = document.getElementsByName("rdGroup");<br> var rdInfo = "";<br> for (var i = 0; i < rdItems.length; i++) {<br> rdInfo += nodeStatus(rdItems[i]) + '\n';<br> }</p> <p>//alert(rdInfo);</p> <p><br> id="pSample"> This is the first Sample! <br> var oSample = document.getElementById('pSample');<br> var attr = "";<br> //取得所有属性内容<br> attr += "原标题是："<br> + oSample.getAttribute("title") + '\n';<br> attr += "样式是："<br> + "color="<br> + oSample.getAttribute("style").color<br> + ",fontSize="<br> + oSample.getAttribute("style").fontSize + '\n';</p> <p>//alert(attr);</p> <p>//改变属性内容,新增一个名字的属性<br> oSample.setAttribute("title", "newTitle");<br> oSample.setAttribute("name", "pName");</p> <p>attr += "新标题是："<br> + oSample.getAttribute("title") + '\n'<br> + "新名字是：" + oSample.getAttribute("name");</p> <p>//alert(attr);</p> <p>//删除属性<br> oSample.removeAttribute("name");</p> <p>attr += "\n现在的名字是："<br> + oSample.getAttribute("name");</p> <p>//alert(attr);</p> <p><br> var createElement = function () {<br> var eleInfo = "";</p> <p>//段落<br> var newParagraph =<br> document.createElement('p');</p> <p>eleInfo += nodeStatus(newParagraph) + '\n';</p> <p>//文本内容(儿子)<br> var newTextNode =<br> document.createTextNode('我是段落里面的文字');</p> <p>eleInfo += nodeStatus(newTextNode) + '\n';</p> <p>newParagraph.appendChild(newTextNode);</p> <p>//第一个儿子<br> eleInfo += nodeStatus(newParagraph.firstChild) + '\n';</p> <p>document.body.appendChild(newParagraph);</p> <p>//return eleInfo;<br> }</p> <p>//alert(createElement());</p> <p>//插入一个新元素<br> var doInsertBefore = function (o) {<br> var myDiv = document.getElementById('myDiv'); //获取Div元素<br> var newInput = document.createElement('input'); //新建input元素<br> newInput.value = new Date().toLocaleString();<br> var targetElement = o; //DOM对象<br> myDiv.insertBefore(newInput, targetElement); //在按钮前插入一个新的文本框<br> }</p> <p>var doRemoveChild = function (o) {<br> var myDiv = o.parentNode; //parent element 获取当前对象的父节点<br> var firstChild = myDiv.firstChild; //父节点的第一个子节点<br> //alert(firstChild.value);<br> myDiv.removeChild(firstChild); //移除<br> }<br>
