javascript中DOM的增强

1.DOM: DOM=Document Object Model，Document Object Model，DOM可以以独立于平台和语言的方式访问和修改文档的内容和结构。换句话说，它是表示和处理HTML或XML文档的常用方法。DOM的设计基于对象管理组(OMG)是非常重要的，因此它可以用于任何编程语言。d:文档HTML文档或xml文档O:对象文档对象的属性和方法M:模型DOM是一个基于树的XML(HTML)API。DOM树：是节点的层次结构。DOM将文档表示为一个家谱(父母、孩子、兄弟)。DOM定义了Node的接口和许多节点类型来表示XML节点的各个方面。2.DOM 的结构。

3.节点根据DOM，HTML文档中的每个组件都是一个节点。DOM规定整个文档是一个文档Node，每个HTML标签是一个元素节点，一个HTML元素中包含的文本是一个文本节点，每个HTML属性是一个属性节点。注释属于注释节点。4.节点层次节点之间具有层次关系。HTML文档中的所有节点形成文档树(或节点树)。每个元素、属性、文本等。在HTML文档中表示树中的一个节点。树从文档节点开始，继续扩展分支，直到树的最低级别的所有文本节点。

动词（verb的缩写）节点及其类型节点*从结构图中我们可以看到，整个文档就是一个文档节点。*每个HMTL标签都是一个元素节点。*标签中的文本是文本节点。*标签的属性是属性节点。*一切都是一个节点.节点树的概念从图中清晰可见，顶部是“根”。节点间有父子关系、祖孙关系和兄弟姐妹关系。从图片上看这些关系也很好，直接的联系就是父子关系。有父亲是兄弟姐妹关系.。

六、查找并访问节点你可通过若干种方法来查找您希望操作的元素：通过使用getElementById()和getElementsByTagName()方法通过使用一个元素节点的父节点、第一个孩子以及最后一个孩子属性七、查找元素节点getElementById()寻找一个有着给定编号属性值的元素，返回值是一个有着给定编号属性值的元素节点。如果不存在这样的元素，它返回null。var oeelement=文档。getelementbyid(SiD)该方法只能用于文件对象输入类型='文本'值='国庆60周年id=' tid '函数test(){ var usernameElement=document。getelementbyid(" tid ")；//获取元素的值alert(' usernameelement。值： ' usernameelement。值)//获取元素的类型alert(' usernameelement。键入： ' usernameelement。type)} getElementsByName()寻找有着给定名字属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的长度属性等于当前文档里有着给定名字属性的所有元素的总个数表单名称='form1 '输入类型=“文本”名称='tname '值='国庆60年_1' /br输入类型=“文本”名称='tname '值='国庆60年_2' /br输入类型=“文本”名称='tname '值='国庆60年_3' /br输入类型='按钮'名称='好'值='保存id=' ok ' onclick=' test()；/form function test(){ var tnameArray=document。getelementsbyname(' tname ')；alert(tnamearray。长度)；for(var I=0；itname array . lengthi){ window . alert(tnameArray[I]).值);} }复制代码代码如下：输入类型=“文本”名称='用户名'值='国庆60年_ 1 '/br输入类型=' text '名称=' username '值='国庆60年_ 2 '/br输入类型=' text '名称=' username '值='国庆60年_ 3 '/br输入类型=' button '名称=' ok '值='保存id=' ok脚本语言='JavaScript' //该方法返回是数组类型var usernameElements=文档。getelementsbyname(' username ')；for(var I=0；i usernameElements.lengthi ) {//获取元素的类型//警报(usernameElements[i]).类型)//获取元素价值的值//警报(usernameElements[i]).值);//采用函数直接量的方法用户名元素[i].onchange=function(){ alert(this。值)；} }/脚本输入类型='text '名称='username '值='国庆60年_1' /br输入类型=“文本”名称='用户名'值='国庆60年_2' /br输入类型=“文本”名称='用户名'值='国庆60年_3' /br输入类型='按钮'名称='好'值='保存id=' ok脚本语言='JavaScript' //该方法返回是数组类型var usernameElements=文档。getelementsbyname(' username ')；for(var I=0；i usernameElements.lengthi ) { //获取元素的类型//警报(usernameElements[i]).类型)//获取元素价值的值//警报(usernameElements[i]).值);//采用函数直接量的方法用户名元素[i].onchange=function(){ alert(this。值)；}} /script getElementsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的长度属性等于当前文档里有着给定标签名的所有元素的总个数var元素=文档。getelementsbytagname(标记名);var元素=元素。getelementsbytagname(标记名);该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

定义变量容器=文档。getelementbyid(" sid ")；var元素=容器。getelementsbytagname(" p ")；警报(元素。长度);复制代码代码如下：////处理input//var input rements=document。getelementsbytagname(' input ')；////输出投入标签的长度////alert(inputrements。长度)；//for(var I=0；iinputelements . lengthi){//if(inputElements[I]).打字！=' button '){//submit//alert(input rements[I]).值);//}//}//处理选择////获取挑选标签//var selectElements=document。getelementsbytagname(' select ')；////获取挑选下的子标签//for(var j=0；jselectelements . lengthj){//var option elements=selectElements[j].getElementsByTagName('选项');//for(var I=0；iopacification elements。长度；i ){//alert(optionElements[i]).值);//}//} var textareelements=document。getelementsbytagname(' text area ')；警报（文本区域元素[0]。值);////处理input//var input rements=document。getelementsbytagname(' input ')；////输出投入标签的长度////alert(inputrements。长度)；//for(var I=0；iinputelements . lengthi){//if(inputElements[I]).打字！=' button '){//submit//alert(input rements[I]).值);//}//}//处理选择////获取挑选标签//var selectElements=document。getelementsbytagname(' select ')；////获取挑选下的子标签//for(var j=0；jselectelements . lengthj){//var option elements=selectElements[j].getElementsByTagName('选项');//for(var I=0；iopacification elements。长度；i ){//alert(optionElements[i]).值);//}//} var textareelements=document。getelementsbytagname(' text area ')；警报（文本区域元素[0]。值);复制代码代码如下： var inputrements=文档。getelementsbytagname(' input ')；for(var I=0；iinputelements . lengthi){ if(inputelements . type！=' submit '){ inputrements[I].onchange=function(){ alert(this。value)}；} var selectElements=document。getelementsbytagname(' select ')；for(var I=0；我选择selectElements . length I){ selectElements[I].onchange=function(){ alert(this。值)；} } var inputrements=document。getelementsbytagname(' input ')；for(var I=0；iinputelements . lengthi){ if(inputelements . type！=' submit '){ inputrements[I].onchange=function(){ alert(this。value)}；} var selectElements=document。getelementsbytagname(' select ')；for(var I=0；我选择selectElements . length I){ selectElements[I].onchange=function(){ alert(this。值)；} }八、父节点、第一个孩子以及最后一个孩子这三个属性父节点、第一个孩子以及最后一个孩子可遵循文档的结构，在文档中进行"短距离的旅行"。请看下面这个超文本标记语言片段：复制代码代码如下：表TRTDJOhn/TD TDDoE/TDTDTsalask/TD/tr/table在上面的超文本标记语言代码中，第一个任务描述是tr元素的首个子元素（第一个孩子),而最后一个任务描述是tr元素的最后一个子元素（最后一个孩子).此外，tr是每个任务描述元素的父节点（父节点).复制代码代码如下： var textarea元素=文档。getelementsbytagname(' text area ')；for(var I=0；{ TextAreElements[I].onchange=function(){ alert(this。值)；};} var textareelements=document。getelementsbytagname(' text area ')；for(var I=0；{ TextAreElements[I].onchange=function(){ alert(this。值)；};} 九、查看是否存在子节点hasChildNodes()该方法用来检查一个元素是否有子节点，返回值是真实的或假的var布尔值=元素。haschildnodes()；文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用hasChildNodes方法的返回值永远是假的。如果hasChildNodes方法的返回值是假的，则子节点，第一个孩子，最后一个孩子将是空数组和空字符串。

HasChildNodes()复制代码如下： var select elements=document . getelementsbytagname(' select ')；警报(选择元素[0]。hasChildNodes())var inputrements=document . getelementsbytagname(' input ')；for(var I=0；iinputElements.lengthI){警报(输入测试[i]。hasChildNodes())；} var selectElements=document . getelementsbytagname(' select ')；警报(选择元素[0]。hasChildNodes())var inputrements=document . getelementsbytagname(' input ')；for(var I=0；iinputElements.lengthi ){警报(输入测试[i]。hasChildNodes())；} 10.根节点有两个特殊的文档属性可以用来访问根节点：document . document elementdocument . body第一个属性可以返回XML和HTML文档中存在的文档根节点。第二个属性是HTML页面的特殊扩展，它提供了对主体标签的直接访问。十一.DOM节点信息每个节点都有一个属性，包含一些关于该节点的信息。这些属性是：节点名称节点名称属性包含节点的名称。var name=node.nodeName元素的nodeName为标签名属性节点的nodeName为属性名文本节点的nodeName始终为#text文档节点的nodeName始终为#document注意：NodeName中包含的html元素的标签名始终为大写的nodeValue (nodeValue) Nodevalue:返回给定节点的当前值(字符串)。如果给定的节点是属性节点，返回值就是这个属性的值。如果给定的节点是文本节点，返回值就是该文本节点的内容。如果给定的节点是元素节点，返回值为空节点值是读/写属性，但是不能为元素节点的节点值属性设置值，但是可以为文本节点的节点值属性设置值。var Li=document . getelementbyid(" Li ")；if(Li . first child . nodetype==3)Li . first child . node value=“第60个国庆节”；NodeType:返回一个整数，代表给定节点的类型。nodeType属性返回的整数值对应12种节点类型，其中常用的有三种：node。element _ node-1-元素节点。attribute _ node-2属性节点。text _ node-3-text节点nodeType是只读属性。