JS原生系列-DOM篇讲述.doc

JS原生系列-DOM篇 发表于5个月前(2015-08-08 00:38)?? 阅读（131）?|?评论（0）?2人收藏此文章,?我要收藏 赞0 摘要?运用dom，结合简单js语法，做出实例 js?DOM 我们首先要明白，我们给页面添加效果用到的js到底是什么？ js其实包含三部分： dom 文档对象模型?????? bom 浏览器对象模型 ecmascript 语法? 简称（es） 我们的效果实现其实是用es语法操作dom和bom去实现我们的目的 一张图表示我们js的处理方式 还算是清晰吧，dom和bom可以看出就是桥梁的作用，实现html页面与es的结合， 我们运用es语法去调用何处理dom、bom的接口就可以实现对html页面的显示处理。 ? 看书是很乏味的，尤其js的书籍要不就是仅仅讲了一堆es语法，看完对做效果一脸茫然，要不就是从es讲到dom到bom，你看前面es语法就要用几个星期，已经让你无奈了，等看到dom也忘得差不多，最后还是一脸茫然！ 我们从dom开始，结合最简单的es语法，做对应处理，开始出发！ ? 前言，dom就是文档对象模型，就是对html页面就是模型化，与html产生映射， 1.dom-获取节点 我们页面里假如有如下的html机构： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 div?id=demo1我是一个id节点/div span我是一个div节点/span span我是一个div节点/span span我是一个div节点/span div?id=demo2 ?p我是p节点，在id下/p ????p我是p节点，在id下/p ????p我是p节点，在id下/p /div div?class=demo3我是类名节点/div div?class=demo4 ?a?href=#2我是连接节点/a /div dom的接口方法就是：??node.innerHTML?（这个属性既可以获取节点内容，又可以赋值内容） 我们要输出这些内容 js 提供的方法???alert()??（弹框形式显示内容） ? dom提供的基本获取接口： document.getElementById(id)????通过id查找，id具有唯一性，返回一个节点元素 document.getElementsByTagName(tagname)?? 通过标签名查找，返回多个元素（伪数组），一个页面加入对div，会出现多个 document.getElementsByTagName(*)???通过标签名的通配符查找，返回所有元素（伪数组） document.getElementById(id)?.document.getElementsByTagName(tagname)?? 配合查找，找到指定id的元素，在当前元素下，查找指定标签名元素返回 以上方法是最常用方法，兼容所低级ie和所有高级浏览器， document.querySelectorAll(.demo4 a)????通过css选择器获取方法，会获取叫demo4类名元素下的所有a元素，返回所有document.querySelector(div)???通过css选择器获取方法，会获取所有div元素，返回第一个 上面两个方法兼容ie8以上，不对低级ie支持， ? 相关知识：我们提到的伪数组，和数组的区别就是根不是数组，其他表现完全与数组相同 我们新建一个数组?? var arr=[123,456,789]??? 这就是数组的形式。 伪数组表现一样，只不过是里面内容换成了节点元素 [node1,node2,node3] 数组具有length属性 alert(arr.length)? 会返回长度为3； 同样，数组作为一个集合，具有索引匹配，我们alert(arr[0]) ;alert(arr[1]) ;alert(arr[2]);会一次得到 123， 456 ，789 这样就太麻烦了，不断就是alert，我们可以采用for循环 for 循环结构 for(var i=0;iarr.length;i++){alert(arr[i])} 我们同样会一次输出数组每一项，同样的处理同样适用伪数组， 如： var arrnode=document.getElementsByTagName(div)； for(var i=0;iarrnode.length;i++){alert(arrnode[i].innerHTML )} 我们获取所有div元素，进行循环，输出里面的内容 我们执行下面js代码，查看这些选择节点方法的 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ?var?demo1=document.get