搜索
DOM基础学习要点：1.DOM介绍2.查找元素3.DOM节点4.节点操作DOM（DocumentObjectModel）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。一．DOM介绍DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。DOM有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safari、Chrome和Opera1.7+。PS：IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。1.节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。节点树从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html子标签，meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。PS：后面我们经常把标签称作为元素，是一个意思。2.节点种类：元素节点、文本节点、属性节点。divtitle=属性节点测试Div/div二．查找元素W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。元素节点方法方法说明getElementById()获取特定ID元素的节点getElementsByTagName()获取相同元素的节点列表getElementsByName()获取相同名称的节点列表getAttribute()获取特定元素节点属性的值setAttribute()设置特定元素节点属性的值removeAttribute()移除特定元素节点属性1.getElementById()方法getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。document.getElementById('box');//获取id为box的元素节点PS：上面的例子，默认情况返回null，这无关是否存在id=box的标签，而是执行顺序问题。解决方法，1.把script调用标签移到html末尾即可；2.使用onload事件来处理JS，等待html加载完毕再加载onload事件里的JS。window.onload=function(){//预加载html后执行document.getElementById('box');};PS：id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。某些低版本的浏览器会无法识别getElementById()方法，比如IE5.0-，这时需要做一些判断，可以结合上章的浏览器检测来操作。if(document.getElementById){//判断是否支持getElementByIdalert('当前浏览器支持getElementById');}当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。元素节点属性属性说明tagName获取元素节点的标签名innerHTML获取元素节点里的内容，非W3CDOM规范document.getElementById('box').tagName;//DIVdocument.getElementById('box').innerHTML;//测试DivHTML属性的属性属性说明id元素节点的id名称title元素节点的title属性值styleCSS内联样式属性值classNameCSS元素的类document.getElementById('box').id;//获取iddocument.getElementById('box').id='person';//设置iddocument.getElementById('box').title;//获取titledocument.getElementById('box').title='标题'//设置titledocument.getElementById('box').style;//获取CSSStyleDeclaration对象document.getElementById('box').style.color;//获取style对象中color的值document.getElementById('box').style.color='red';//设置style对象中color的值document.getElementById('box').className;//获取classdocument.getElementById('box').className='box';//设置classalert(document.getElementById('box').bbb);//获取自定义属性的值，非IE不支持2.getElementsByTagName()方法getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。document.getElementsByTagName('*');//获取所有元素PS：IE浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素节点。document.getElementsByTagName('li');//获取所有li元素，返回数组document.getElementsByTagName('li')[0];//获取第一个li元素，HTMLLIElementdocument.getElementsByTagName('li').item(0)//获取第一个li元素，HTMLLIElementdocument.getElementsByTagName('li').length;//获取所有li元素的数目PS：不管是getElementById还是getElementsByTagName，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。3.getElementsByName()方法getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。document.getElementsByName('add')//获取input元素document.getElementsByName('add')[0].value//获取input元素的value值document.getElementsByName('add')[0].checked//获取input元素的checked值PS：对于并不是HTML合法的属性，那么在JS获取的兼容性上也会存在差异，IE浏览器支持本身合法的name属性，而不合法的就会出现不兼容的问题。4.getAttribute()方法getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。document.getElementById('box').getAttribute('id');//获取元素的id值document.getElementById('box').id;//获取元素的id值document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值document.getElementById('box').mydiv//获取元素的自定义属性值，非IE不支持document.getElementById('box').getAttribute('class');//获取元素的class值，IE不支持document.getElementById('box').getAttribute('className');//非IE不支持PS：HTML通用属性style和onclick，IE7更低的版本style返回一个对象，onclick返回一个函数式。虽然IE8已经修复这个bug，但为了更好的兼容，开发人员只有尽可能避免使用getAttribute()访问HTML属性了，或者碰到特殊的属性获取做特殊的兼容处理。5.setAttribute()方法setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。document.getElementById('box').setAttribute('align','center');//设置属性和值document.getElementById('box').setAttribute('bbb','ccc');//设置自定义的属性和值PS：在IE7及更低的版本中，使用setAttribute()方法设置class和style属性是没有效果的，虽然IE8解决了这个bug，但还是不建议使用。6.removeAttribute()方法removeAttribute()可以移除HTML属性。document.getElementById('box').removeAttribute('style');//移除属性PS：IE6及更低版本不支持removeAttribute()方法。三．DOM节点1.node节点属性节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和nodeValue。信息节点属性节点类型nodeNamenodeTypenodeValue元素元素名称1null属性属性名称2属性值文本#text3文本内容(不包含html)document.getElementById('box').nodeType;//1，元素节点2.层次节点属性节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。层次节点属性属性说明childNodes获取当前元素节点的所有子节点firstChild获取当前元素节点的第一个子节点lastChild获取当前元素节点的最后一个子节点ownerDocument获取该节点的文档根节点，相当与documentparentNode获取当前节点的父节点previousSibling获取当前节点的前一个同级节点nextSibling获取当前节点的后一个同级节点attributes获取当前元素节点的所有属性节点集合1.childNodes属性childeNodes属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点。varbox=document.getElementById('box');//获取一个元素节点alert(box.childNodes.length);//获取这个元素节点的所有子节点alert(box.childNodes[0]);//获取第一个