DOM模型节点.docVIP

DOM模型 DOM模型框架 DOM模型中的节点 使用DOM ？innerHTML DOM模型框架 文档对象模型(Document Object Model)定义了用户操作文档对象的接口，可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前的访问能力。 html head titleDOM Page/title /head body h2a href=”#isaac”标题1/a/h2 p段落1/p ul id=”myUL” liJavaScript/li liDOM/li liCSS/li /ul /body /html 使用DOM对其抽象。可以通过一个节点遍历所有节点 DOM模型中的节点 元素节点 文本节点 属性节点 a href=””搜狐/a 介绍DOM相关知识，如何使用DOM 使用DOM script function searchDOM(){ var oLi = document.getElementsByTagName(li); //输出长度、标签名称以及某项的文本节点值 alert(oLi.length+ +oLi[0].tagName+ +oLi[3].childNodes[0].nodeValue); var oUl = document.getElementsByTagName(ul); var oLi2 = oUl[1].getElementsByTagName(li); alert(oLi2.length+ +oLi2[0].tagName+oLi2[1].childNodes[0].nodeValue); } /script /head body onLoad=searchDOM() 客户端语言 ul liHTML/li liJavaScript/li liCSS/li /ul 服务器端语言 ul liASP.NET/li liJSP/li liPHP/li /ul /body 父子节点 访问元素后，知道某一个元素，通过父子关系，遍历所有元素 script function myDOMInspector(){ //获取ul标记 var oUl = document.getElementById(myList); var DOMString = ; //判断是否有子节点 if(oUl.hasChildNodes()){ var oCh = oUl.childNodes; for(var i=0;ioCh.length;i++){ //依次查找 DOMString += oCh[i].childNodes[0].nodeValue + \n; } } alert(DOMString); } /script /head body onLoad=myDOMInspector() ul id=myList li糖醋排骨/li li圆笼粉蒸肉/li li泡菜鱼/li li板栗烧鸡/li li麻婆豆腐/li /ul /body 访问节点 getElementsByTagName getElementById 节点的属性 script function myDOMInspector(){ //获取超链接 var myLink = document.getElementsByTagName(a)[0]; //获取超链接的href属性 alert(myLink.getAttribute(href)); } /script /head body onLoad=myDOMInspector() a href=搜狐/a /body 除了对已有的节点进行访问，还可以创建新节点 创建新节点 script function createP(){ var oP = document.createElement(p); var oText = document.createTextNode(这是一段感人的故事); oP.appendChild(oText); document.body.appendChild(oP); } /script /head body onLoad=createP() p事先写一行文字在这里，测试appendChild()方法的添加位置/p /body innerHTML innerHTML这个属性由于使用方便，也得到了目前主流浏览器的支持 该属性表示某个标记之间的所有内容，包括代码本身。 文档对象模型