DOM:document object model 文档对象模型
DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图:
一、查看元素节点
1.document.getElementById('元素id') 获取的类型:元素对象;
兼容性:a.IE6、7,会把表单元素input的name属性当做ID来使用;
b.IE8以下的浏览器,不区分id大小写
注意事项:
a.没有获取到元素返回null
b.后端抽取会改变id名称,实际开发不使用id选择器来操作元素节点
2.document.getElementsByTagName('元素标签名') 获取的类型:元素对象类数组
使用:可以通过限定查找范围来获取元素列表。context.getElementByTagName('元素标签名')
3.context.getElementsByName(‘name属性’) 获取的类型:元素对象类数组
兼容性:IE浏览器下只由表单元素和部分元素有效(表单、表单元素、img、iframe),且老版本浏览器不支持。
4.context.getElementsByCalssName('类名的值') 获取的类型:元素对象类数组
兼容性:IE6~8不支持
5.document.querySelector('css选择器') 获取的类型:元素对象类数组
兼容性:IE6、7没有这个方法
6.document.querySelectorAll('css选择器') 获取的类型:元素对象类数组
兼容性:同上。
注意:不是时时的元素节点,删除添加标签都不被检测
在众多原生DOM选择中,似乎每个都存在缺陷,综合考虑最合适被应用到实际开发中的选择器就是getElementByClassName();但由于IE6~8不兼容,所以需要做一些兼容处理,下面是兼容处理的代码:
1 function getElementsByClass(className,context){ 2 context = context || document; 3 //把传递进来的样式类名的首尾空格先去掉,然后在按照中间的空格把里面的每一项拆分成数组 4 var classNameAry = className.replace(/(^ +| +$)/g,"").split(/ +/g); 5 6 //获取指定上下文中的所有的元素标签,循环这些标签,获取每一个标签的className样式类名的字符串 7 var ary = []; 8 var nodeList = context.getElementsByTagName("*"); 9 for(var i = 0,len=nodeList.length;i<len;i++){ 10 var curNode = nodeList[i]; 11 //判断curNode.className是否包含classNameAry里面的样式值 12 13 // 14 var isOk = true;//我们假设curNode 15 for(var k = 0;k<classNameAry.length;k++){ 16 var curName = classNameAry[k]; 17 var reg = new RegExp("(^| +)"+curName+"( +|$)"); 18 if(!reg.test(curNode.className)){ 19 isOk = false; 20 break; 21 } 22 } 23 if(isOk){//拿每一个标签分别和所有样式类名比较后,如果结果还是true的话,说明当前元素标签包含了所有的样式,也是我们想要的。 24 ary.push(curNode) 25 } 26 }
二、节点树
注意:以上方法都是基于节点查询,会将所有节点类的节点型访问出来,不会区分元素节点。(查询元素节点可以参考下一个知识点“遍历元素节点树”)
三、遍历元素节点树
四、节点类型及节点属性
注意:
a)documentFragment——文档片段对象
b) 属性节点从文档树形逻辑来说不能与其他节点一起放到这里,被放到这里的原因主要是因为展示nodeType属性。
到这里可能你还不明白属性节点是什么?
从document文本结构来说,属性节点是元素节点的子节点,该节点的内容就是所在元素的所有属性的节点集合。请看示例代码:
1 <div class="div1" id="div1" style="color:blue;text-align:center"> 2 3 </div> 4 <script type="text/javascript"> 5 var div = document.getElementsByTagName("div")[0]; 6 var atts = div.attributes; 7 console.log(atts); 8 </srcipt>
在来看看打印的结果
从打印结果来看,元素节点的attributes属性获取了元素所有的属性列表,并以类数组的方式保存。
属性节点上同样存在nodeName、nodeType、nodeValue等属性。
五、封装自己的元素子节点集合
由于element.children子元素节点列表属性的兼容性非常不好(IE9以下都不兼容),所以建议封装一个自己的获取元素子节点集合的方法,下面是封装代码。
function retElementChild(node){ var temp = { length : 0, push : Array.prototype.push, splice : Array.prototype.splice }, child = node.childNodes, len = child.length; for (var i = 0; i < len; i++) { if (child[i].nodeType === 1) { temp.push(child[i]); } } return temp; }