文档对象模型的实例代码

A B 链接

Hello World!

Welcome to DOM World!

var nodeStatus = function (node) { var temp = ""; if (node.nodeName != null) { temp += "nodeName:" + node.nodeName + "\n"; } else { temp += "nodeName:null!\n"; // ,\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 allChildInfo += nodeStatus(allChild[i]); }

//alert(msg); Beans Cheese Milk var oPurchases = document.getElementById('purchases'); var items = document.getElementsByTagName("li");

var info = typeof (oPurchases) + ' '; for (var i = 0; i info += typeof (items[i]) + " "; }

//document.write(info); A B C D var rdItems = document.getElementsByName("rdGroup"); var rdInfo = ""; for (var i = 0; i rdInfo += nodeStatus(rdItems[i]) + '\n'; }

//alert(rdInfo);

id="pSample"> This is the first Sample!

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); //移除 }

文档对象模型的实例代码

相关文章