DOM模型节点.doc

DOM模型DOM模型框架DOM模型中的节点使用DOM？innerHTMLDOM模型框架文档对象模型(Document Object Model)定义了用户操作文档对象的接口，可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前的访问能力。DOM Page标题1段落1JavaScriptDOMCSShtmlheadbodyh2pullililia使用DOM对其抽象。可以通过一个节点遍历所有节点DOM模型中的节点元素节点文本节点属性节点搜狐元素节点属性节点文本节点ahref=””搜狐介绍DOM相关知识，如何使用DOM使用DOMfunction searchDOM()var oLi = document.getElementsByTagName(li);/输出长度、标签名称以及某项的文本节点值alert(oLi.length+ +oLi0.tagName+ +oLi3.childNodes0.nodeValue);var oUl = document.getElementsByTagName(ul);var oLi2 = oUl1.getElementsByTagName(li);alert(oLi2.length+ +oLi20.tagName+oLi21.childNodes0.nodeValue);客户端语言HTMLJavaScriptCSS服务器端语言ASP.NETJSPPHP父子节点访问元素后，知道某一个元素，通过父子关系，遍历所有元素function myDOMInspector() /获取标记var oUl = document.getElementById(myList);var DOMString = ;/判断是否有子节点if(oUl.hasChildNodes()var oCh = oUl.childNodes;for(var i=0;ioCh.length;i+)/依次查找DOMString += oChi.childNodes0.nodeValue + n;alert(DOMString);糖醋排骨圆笼粉蒸肉泡菜鱼板栗烧鸡麻婆豆腐访问节点getElementsByTagNamegetElementById节点的属性function myDOMInspector()/获取超链接var myLink = document.getElementsByTagName(a)0;/获取超链接的href属性alert(myLink.getAttribute(href);搜狐除了对已有的节点进行访问，还可以创建新节点创建新节点function createP()var oP = document.createElement(p);var oText = document.createTextNode(这是一段感人的故事);oP.appendChild(oText);document.body.appendChild(oP);事先写一行文字在这里，测试appendChild()方法的添加位置innerHTMLinnerHTML这个属性由于使用方便，也得到了目前主流浏览器的支持该属性表示某个标记之间的所有内容，包括代码本身。文档对象模型文档对象模型(Document Object Model)是由W3C委员会定义的标准文档对象模型。DOM可以提供HTML和XML两种不同的文档编程接口。其中HTML文档编程接口可以处理HTML文档内容。DOM简介在BOM中，使用最多的是Document对象，该对象主要处理HTML文档中的一些内容，如文档本身的属性、图片、表单、超链接和锚、插件等。而DOM对HTML文档的处理能力更强，可以处理任何HTML中的元素。DOM中的节点在DOM中，将HTML文档看成是一棵树，文档中的每个标签都是一个节点。HTML中的节点可以分为文档节点(Document Node)、元素节点(Element Node)、属性节点(Attribute Node)、文本节点(Text Node)和注释节点(Comment Node)5 种，其中文档节点代表整个HTML文档，元素节点代表所有HTML中的元素，属性节点代表元素中的属性，文本节点代表开始标签和结束标签之间的文字，注释节点代表HTML中的注释。不同浏览器对节点的处理姓名:性别:/获得节点var formNode = document.getElementById(frm);/查看节点下的所有子节点for(var i=0;iformNode.childNodes.length;i+)document.write(第+(i+1)+个子节点的类型为:+formNode.childNodesi.nodeType+);document.write(节点的名称为:+formNode.childNodesi.nodeName+);document.write(节点的值为+formNode.childNodesi.nodeValue+);节点类型nodeType属性值节点类型nodeName属性值nodeValue属性值1元素节点元素的标签名Null2属性节点属性名属性值3文本节点#text节点的文本内容8注释节点#comment节点的文本内容9文档节点#documentnullNode接口的主要作用就是处理节点。其中，Node接口的属性主要是查找节点和返回节点的信息，Node接口的方法主要是复制、删除、插入、移动节点。Node对象的常用属性属性描述attributes如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性childNodes以Node的形式存放当前节点的子节点。如果没有子节点，则返回空数组firstChild以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为nulllastChild以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为nullnextSibling以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回nullnodeName节点的名字，Element节点则代表Element的标记名称nodeType代表节点的类型。1为元素、2为属性、3为文本.nodeValue获取当前节点的值parentNode以Node的形式返回当前节点的父节点。如果没有父节点，则为nullpreviousSibling以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回nullNode对象的常用方法方法描述appendChild()通过把一个节点增加到当前节点的childNodes组，给文档树增加节点cloneNode()复制当前节点，或者复制当前节点以及它的所有子孙节点hasChildNodes()如果当前节点拥有子节点，则将返回trueinsertBefore()给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置removeChild()从文档树中删除并返回指定的子节点replaceChild()从文档树中删除并返回指定的子节点，用另一个节点替换它删除节点function delNode()alert();/获得节点var trNode = document.getElementById(myTr);/获得节点下