<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body><!--form> <input type="button" value="按钮" /> <input type="text" /> <input type="checkbox" /> <textarea rows="3" cols="2"></textarea> <input type="hidden" /> <select> <option>A</option> <option>B</option> </select> <input type="password" /> <input type="reset" /> <input type="submit" /> <input type="radio" /> <input type="file" /></form><iframe src="secondPage.htm"></iframe><a href="#">链接</a><h1 id="h1">Hello World!</h1--><!--元素--><!--属性--><!--文本-->
<p id="p1">Welcome to<b> DOM </b>World!</p>
<script type="text/javascript">
var nodeStatus = function (node) { var temp = ""; if (node.nodeName != null) { temp += "nodeName:" + node.nodeName + "\n"; } else { temp += "nodeName:null!\n"; //<br>,\n }if (node.nodeType != null) {
temp += "nodeType:" + node.nodeType + "\n"; } else { temp += "nodeType:null!\n"; }if (node.nodeValue != null) {
temp += "nodeValue:" + node.nodeValue + "\n"; } else { temp += "nodeValue:null!\n"; }return temp;
}var currentElement = document.getElementById('p1');
var msg = nodeStatus(currentElement); //alert(msg); var firstChild = currentElement.firstChild; msg += nodeStatus(firstChild);//父亲的下一个儿子->弟弟
var youngerBrother = firstChild.nextSibling; msg += nodeStatus(youngerBrother);//2弟的儿子=p父亲的大孙子
var grandSon = youngerBrother.firstChild; msg += nodeStatus(grandSon);//孙子的父亲
var grandSonParent = grandSon.parentNode; msg += nodeStatus(grandSonParent);//孙子的父亲的兄长
var grandSonParentElderBrother = grandSonParent.previousSibling msg += nodeStatus(grandSonParentElderBrother);//大哥的父亲
var parent = grandSonParentElderBrother.parentNode; msg += nodeStatus(parent);//父亲的小儿子
var lastChild = parent.lastChild; msg += nodeStatus(lastChild);//父亲的所有儿子
var allChildInfo = ""; var allChild = parent.childNodes; for (var i = 0; i < allChild.length; i++) { allChildInfo += nodeStatus(allChild[i]); }//alert(msg);
</script><ul id="purchases"> <li>Beans</li> <li>Cheese</li> <li>Milk</li></ul><script type="text/javascript"> var oPurchases = document.getElementById('purchases'); var items = document.getElementsByTagName("li");var info = typeof (oPurchases) + '<br>';
for (var i = 0; i < items.length; i++) { info += typeof (items[i]) + "<br>"; }//document.write(info);
</script> <!--div> <input type="radio" name="rdGroup" value="A" />A <input type="radio" name="rdGroup" value="B" />B <input type="radio" name="rdGroup" value="C" />C <input type="radio" name="rdGroup" value="D" />D </div--> <script type="text/javascript"> var rdItems = document.getElementsByName("rdGroup"); var rdInfo = ""; for (var i = 0; i < rdItems.length; i++) { rdInfo += nodeStatus(rdItems[i]) + '\n'; }//alert(rdInfo);
</script><p title="pTitle" style="color:Blue;font-size:30px;"
id="pSample"> This is the first Sample!</p> <script type="text/javascript"> var oSample = document.getElementById('pSample'); var attr = ""; //取得所有属性内容 attr += "原标题是：" + oSample.getAttribute("title") + '\n'; attr += "样式是：" + "color=" + oSample.getAttribute("style").color + ",fontSize=" + oSample.getAttribute("style").fontSize + '\n';//alert(attr);
//改变属性内容,新增一个名字的属性
oSample.setAttribute("title", "newTitle"); oSample.setAttribute("name", "pName");attr += "新标题是："
+ oSample.getAttribute("title") + '\n' + "新名字是：" + oSample.getAttribute("name");//alert(attr);
//删除属性
oSample.removeAttribute("name");attr += "\n现在的名字是："
+ oSample.getAttribute("name");//alert(attr);
var createElement = function () { var eleInfo = "";//段落
var newParagraph = document.createElement('p');eleInfo += nodeStatus(newParagraph) + '\n';
//文本内容(儿子)
var newTextNode = document.createTextNode('我是段落里面的文字');eleInfo += nodeStatus(newTextNode) + '\n';
newParagraph.appendChild(newTextNode);
//第一个儿子
eleInfo += nodeStatus(newParagraph.firstChild) + '\n';document.body.appendChild(newParagraph);
//return eleInfo;
}//alert(createElement());
//插入一个新元素
var doInsertBefore = function (o) { var myDiv = document.getElementById('myDiv'); //获取Div元素 var newInput = document.createElement('input'); //新建input元素 newInput.value = new Date().toLocaleString(); var targetElement = o; //DOM对象 myDiv.insertBefore(newInput, targetElement); //在按钮前插入一个新的文本框 }var doRemoveChild = function (o) {
var myDiv = o.parentNode; //parent element 获取当前对象的父节点 var firstChild = myDiv.firstChild; //父节点的第一个子节点 //alert(firstChild.value); myDiv.removeChild(firstChild); //移除 } </script> <div id="myDiv"> <input type="button" value="insertBefore" οnclick="doInsertBefore(this)"/><!--将会插入一个新的DOM元素--><!--删除一个元素-->
<input type="button" value="removeChild" οnclick="doRemoveChild(this)"/> </div></body></html>