JS原生系列-DOM篇.doc

JS原生系列-DOM篇发表于5个月前(2015-08-08 00:38) 阅读（131）|评论（0）2人收藏此文章,我要收藏赞0摘要运用dom，结合简单js语法，做出实例jsDOM我们首先要明白，我们给页面添加效果用到的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机构：?12345678910111213我是一个id节点我是一个div节点我是一个div节点我是一个div节点我是p节点，在id下我是p节点，在id下我是p节点，在id下我是类名节点我是连接节点我们要做的就是获取标签里面的内容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(arr0) ;alert(arr1) ;alert(arr2);会一次得到 123， 456 ，789这样就太麻烦了，不断就是alert，我们可以采用for循环for 循环结构for(var i=0;iarr.length;i+)alert(arri)我们同样会一次输出数组每一项，同样的处理同样适用伪数组，如： var arrnode=document.getElementsByTagName(div)；for(var i=0;iarrnode.length;i+)alert(arrnodei.innerHTML )我们获取所有div元素，进行循环，输出里面的内容我们执行下面js代码，查看这些选择节点方法的?123456789101112131415161718192021vardemo1=document.getElementById(demo1);alert(demo1.innerHTML)vararrspan=document.getElementsByTagName(span)for(vari=0;iarrspan.length;i+)alert(arrspani.innerHTML)vardemo2=document.getElementById(demo2);vararrp=demo2.getElementsByTagName(p)for(vari=0;iarrp.length;i+)alert(arrpi.innerHTML)vararra=document.querySelectorAll(.demo4a)for(vari=0;iarra.length;i+)alert(arrai.innerHTML)vardemo3=document.querySelector(.demo3)alert(demo3.innerHTML)我们可以得到对应获取方法的对应内容了总结：dom api 获取元素document.getElementById(id)document.getElementsByTagName(tagname)document.getElementsByTagName(*)document.getElementById(id) .document.getElementsByTagName(tagname)document.querySelectorAll(.demo4 a)document.querySelector(div)相关：node.innerHTMLfor(var i=0;iarr.length;i+)alert(arri)2.dom-事件处理常用事件：onclick 单击事件onmousedown 鼠标按下onmousemove 鼠标移动onmouseup鼠标抬起onmouseover鼠标放上onmouseout 鼠标离开onfocus 获取焦点onblur 失去焦点onchange 表单改变 select标签onselect 表单选中 select标签onscroll 滚动事件onload 载入完成事件onkeydown 键盘按下onkeypress 键盘按住onkeyup 键盘抬起onresize 窗口改变大小onsubmit 提交事件事件的基本结构：ele.onclick=function(event);事件我们就不用管了，我们先看看这个event对象，添加事件的函数会得到一个事件对象我们列出常用属性：event.button 返回鼠标按下那个，0 左键event.target 返回当前触发事件的最小元素 （加入我们的div套了一个span和a，在给div加click事件，span和a触发的同时，div也会触发，这个属性我们就可以在给div加事件的时候，调用此属性，通过他的id和标签名，判断点击的是那个子元素）event.clientX 获取触发事件，事件距离页面左侧距离event.clientY 获取触发事件，事件距离页面上侧距离event.altKey/event.ctrlKey/event.shiftKey 获取键盘事件，事件对象是否按下这些键，按下返回trueevent.type 返回触发事件的事件类型event.keyCode 返回键盘事件的ascll码事件this:事件构成domobj.onclick=function(event)alert(this.innerHTML);我们执行代码，会输出domobj元素的内容，看来添加事件，还有有一个this指针，这个指针指向添加事件的元素，可以代表等于他相关：我们既然对html处理，必然要操作css去改变html的样子，dom也为我们提供了这些接口，我们看一下ele.style.height=200px;选择到元素，通过style.一个具体css属性，我们就实现对元素样式的添加了当然，一个个添加太麻烦了，dom提供类似css的写法统一添加ele.style.cssText=width:200px;height:200px;这个接口和css写法一样，符合我们的口味操作元素css的apiele.style.height=200px;ele.style.cssText=width:200px;height:200px;我们有了事件，有了事件返回对象的属性，有了指针this，也可以设置元素样式，下面我们做个小例子：1.tab切换html结构：?123456789101112标题1标题2标题3内容1内容2内容3js代码：?12345678910111213141516171819window.onload=function()varlist=document.getElementById(list);varlistspan=list.getElementsByTagName(span)varcon=document.getElementById(con);varcondiv=con.getElementsByTagName(div)for(vari=0;ilistspan.length;i+)listspani.onclick=function()/alert(this.innerHTML)for(varj=0;jlistspan.length;j+)if(listspanj=this)condivj.style.display=blockelsecondivj.style.display=none;我面点击那个标题就是对象显示那个内容，好的html结构是添加效果的前提我们讲解一下这段js的处理原理：1.获取list的元素 一个2.获取list下的span元素，集合3.获取con元素 一个4.获取con下的div元素 集合5.对list的span添加事件，循环依次添加5.对list的span进行遍历，每次遍历的元素与this，即触发时间段额元素做相等判断6.如果相等，根据索引，和上下结构对应关系，把内容结构索引与触发事件标题索引相同的显示，不同隐藏2.我们在对event.target的分析时，写了很多内容，针对这个属性，我们写一个例子，demo出原理html：?1234aspanjs：?123456789101112131415window.onload=function()varctarget=document.getElementById(ctarget);ctarget.onclick=function(event)varevtcon=event.target;if(evtcon.innerHTML=a)alert(点击了子元素a)elseif(evtcon.innerHTML=span)alert(点击了子元素span)elsealert(我是div);相关：if判断语句if()elseif()else if()else如果成立，执行下面代码，其他，执行下面代码，简单的一看就能理解我们还是分析这段js 点击事件，我们获取event对象的target属性，得到一个最小触发元素假如我们不做上面处理，那就要写三个单击事件，对div 对a 对 span我们通过判断event.target给父元素加一个事件，就做到了要加3个事件的处理，大大简化的代码，通过页面测试，我们也得到，点击子元素，会淡出判断下的内容，得到target属性返回一个最小触发事件元素提到事件，我们就必须说到捕获和冒泡元素+事件+方法，的事件是怎样元素上触发的：捕获：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)冒泡：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。针对处理，我们要用监听事件函数，添加事件ele.addEventListener(click,function,true)第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。我们有一个这样结构：都添加click事件，当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。document.documentElement指向html元素，可以得到根节点，我们做一个例子：html?123点我4564645js?1234567891011window.onload=function()varfu=document.getElementById(fu);varzi=document.getElementById(zi);fu.addEventListener(click,function()zi.style.display=block,false);document.documentElement.addEventListener(click,function()zi.style.display=none,false);这段js我们看原理，应该点击fu就让里面的儿子元素zi显示的，结果却没有显示，很不符合常理，我们添加事件用的是冒泡触发我们更改如下?1234567891011window.onload=function()varfu=document.getElementById(fu);varzi=document.getElementById(zi);fu.addEventListener(click,function()zi.style.display=block,true);document.documentElement.addEventListener(click,function()zi.style.display=none,true);监听事件改为true，发现可以了，这就是我们理想的显示效果了我们先看设置为false的冒泡触发的，第一段不可行代码，fu元素先执行事件，让后冒泡，一定会到html上，它属于html的子元素。发现html也加了事件，这个事件是第二次定义，自然踢掉了第一次fu定义的事件，就相当于给fu添加事件，触发的而方法是document.documentElement的方法，自然就不显示了我们看第二段正确js；捕获处理，添加事件html往下需找，会下找到document.documentElement，然后找到fu，发现都有方法，那么第二次执行的fu运用方法替掉html的就正确执行了；总结冒泡和捕获事件执行机制：采用冒泡，从下往上，查找，父元素有同样事件时，采用父元素事件的处理方法采用捕获，从上往下，查找，父元素有同样事件时，采用子元素事件的处理方法不通过addEventListener添加的事件都是冒泡发生的，这回影响到我们的，导致一些问题我们会发现，dom为event提供了解决方法event.stopPropagation() 阻止冒泡event.preventDefault() 阻止默认我们对第一段不执行代码修改为直接事件添加处理?1234567891011window.onload=function()varfu=document.getElementById(fu);varzi=document.getElementById(zi);fu.onclick=function(event)zi.style.display=block;document.documentElement.onclick=function()zi.style.display=none;点击没有显示，和第一段代码一个效果，我们加上阻止冒泡处理event.stopPropagation()，代码如下?123456789101112window.onload=function()varfu=document.getElementById(fu);varzi=document.getElementById(zi);fu.onclick=function(event)zi.style.display=block;event.stopPropagation()document.documentElement.onclick=function()zi.style.display=none;直接监听事件也出来，万岁，我们得出结论通过监听方法加事件可以控制是冒泡还是捕获触发事件直接添加都是冒泡触发事件还有一个阻止默认，这有什么用处，我们在demo一个a标签，点击应该会链接到一个页面，没连接到，你是没联网?1我是连接我想点击它，不跳转，就如同点了span一样，我们给a添加click事件，加上event.preventDefault()?1234567window.onload=function()varlia=document.getElementById(lia);lia.onclick=function(event)/event.preventDefault();a标签默认链接跳转不行了，原来作用就是在这个，其实这个用处还是很大的，在一些特殊处理，根据权限确实要限制用户除了这个，还有一个办法，那就是?1234567window.onload=function()varlia=document.getElementById(lia);lia.onclick=function(event)returnfalse;执行方法返回一个false，执行出错，当然也不会跳了，这个比上个好，写起来简单得多3.可拖拽的登陆框onmousedown 鼠标按下onmousemove 鼠标移动onmouseup鼠标抬起这三个兄弟事件，我们按思路走一次，这是一个组合处理，把click进行了具体的拆分，我们按下某个元素，然后拖动鼠标，元素跟着鼠标动，鼠标抬起，元素就放置在鼠标离开位置，ok，这个思路我们可以做一个例子了，改变位置，一定要用到对元素的left和top的处理，跟着鼠标，当然还要用到事件对象的left和top了这些还不够，我们需要把三个事件链接在一起，我们可以这样处理，var isd=0;初始化的时候，在按下，isd=1；移动isd=1，抬起isd=0；这样每次组合事件处理就链接一起了我们发现，通过ele.style.left获取的位置是带有px的，但是event.clientX不带单位，真是遇到狗了我们获取是不要带px，我们可以用另一种方式，dom的apiele.offsetLeft;ele.offsetTop;同样可以获取到left和top并且去掉了单位，html?12345登录密码js?1234567891011121314151617181920212223242526window.onload=function()vardrag=document.getElementById(drag);varisd=0;varelex=0;vareley=0;drag.onmousedown=function(event)isd=1;elex=event.clientX-drag.offsetLeft;eley=event.clientY-drag.offsetTop;drag.onmousemove=function(event)if(isd=1)varevx=event.clientX;varevy=event.clientY;varcx=evx-elex;varcy=evy-eley;drag.style.left=cx+px;drag.style.top=cy+px;else;drag.onmouseup=function(event)isd=0;完美的拖拽实现了，我们获取元素的left和top没有用drag.style.left的方式获取，而是用了drag.offsetLeftdom针对left、top、width、heigth扩展api：都是无单位获取ele.offsetLeft获取元素可见left值，针对对父容器带偏移量，就是margin和paddingele.offsetTopele.offsetWidth获取元素可见宽度ele.offsetHeightele.clientLeft获取元素可见left针 与父容器无关ele.clientTopele.clientWidth获取元素可见宽度，加偏移ele.clientHeightele.scrollLeft获取元素滚动条的left值，裁剪宽 与父元素无关可赋值ele.scrollTop可赋值ele.scrollWidth获取元素加上滚动条的总宽度ele.scrollHeightele.getBoundingClientRect().top 元素上边距离页面上边的距离ele.getBoundingClientRect().right 元素右边距离页面左边的距离ele.getBoundingClientRect().bottom 元素下边距离页面上边的距离ele.getBoundingClientRect().left 元素左边距离页面左边的距离针对html节点和body节点，dom内有写好的对象document.documentElement 指代html元素 页面根元素document.body指代body元素，html4.0以前根元素我们已经知道通过ele.style可以获取样式和赋值样式，同样与其相关还有专门获取样式的api 带单位ele.currentStyle.width获取某个样式 低级ie和iegetComputedStyle(ele,false).width获取某个样式 主流浏览器同样我把style的接口也列出来ele.style.width 获取元素样式ele.style.width=10px给元素样式赋值，要带单位ele.style.cssText=height:10px;width:20px;给元素样式赋值，采用样式表方式还需要注意的就是，对于有-的样式，我们要去掉-，并且把-后面的第一个字母大写，如：ele.style.marginTop=20px我们总结和所有对元素宽高，上下位置的api还有对样式的处理api，我们接下来要做一个实例，简单运用：4.我们把页面，滑动到最底部，点击一个按钮，页面回到顶部；一个高度2000px的div，下面一个回到顶部按钮，点击按钮，回到顶部就是根元素的滚动条变为0；html?12回到顶部js?1234567window.onload=function()vartop=document.getElementById(top);top.onclick=function()document.documentElement.scrollTop=0;原理实现，document.documentElement指代html，页面过长，会导致html出现滚动条，通过把html元素的scrollTop设置为0，实现回到顶部，scrollTop可取值，可赋值，这样在强硬了，我们一样缓慢回到顶部，从当前，经过ns回到0；就是animation 底部top = 顶部topdom中我们会间接的介绍到一些bom和es的东西，不过很少，很简单?1234567891011121314151617window.onload=function()vartop=document.getElementById(top);vardibu=null;vardong=null;top.onclick=function()dibu=document.documentElement.scrollTop;dong=setInterval(function()dibu=dibu-5;if(dibu=0)document.documentElement.scrollTop=0;clearInterval(dong);elsedocument.documentElement.scrollTop=dibu;,10);setInterval(fun,time)第一个参数调用函数，第二个执行时间 方法返回一个id，clearInterval(id)清除定时器，id是定时器返回值执行原理就是点击返回，执行间隔函数，每次对全局变量的top值就行-10处理。并且把改变的top值赋值给html的scrollTop，没10秒改变一次滚动条位置3.dom-node（节点操作）事件一部分，我们可以说倾注了大量的研究每个就是对元素and几点就行操作通过前两部分的学习，我们了解了js的基本处理流程1.对象+事件+方法 ele.onclick=function() 2.对象+方法ele.innerHTML基本api节点就是指代html的各种元素如html标签就是根元素， document.documentElement表示同样我们通过获取id查找，获通过标签名得到的元素也是节点，都是标签节点节点具有类型性：获取节点类型api：node.nodeType为1： 节点为元素 如div 标签 我们的主要应用api为2； 节点为属性为3：节点为文本获取名字：node.nodeName 主要针对类型为1的元素节点，获取标签名，返回为为大写添加属性，获取属性api： 主要操作都是针对元素节点，类型为1elenode.setAttribute(aa,123) 设置节点属性aaelenode.getAttribute(aa,123) 获取节点属性aa除了通过属性方法对节点操作，还有直接操作方式，如：elenode.aa 获取节点属性aa元素节点（标签）除了已经提供好的属性的设置获取，我们还可以自定义属性，如上面的aa属性，原生属性设置和获取input.checked input添加checked属性img.width=200 图片宽度属性设置为200div.id=a1给div加一个id属性等属性的处理对于节点类型为1的元素，还具有标签名属性，api：node.tagName获取节点的标签名对于节点类型为1的元素，还具有类名属性，api：node.className获取和设置标签的类名 非常常用，我们添加一个class采用新样式都是靠这个apinode.className=aa 设置标签的类名为aanode.className 获取标签的类名总结：上面我们可以判断节点的类型，主要为1，我们操作元素，可以添加属性，设置属性，自定义属性，获取类名，添加类型，获取元素标签名，这些就很足够了节点关系api我们写一句获取元素代码js?1varid1=document.getElementById(id1);html?12345678910111213123-13-2-13-345我们通过js，找到了id为id1的div节点，但是我们想要获取相关的兄弟，父亲，孩子节点，通过第一部分是要很麻烦的处理dom为我们这些node关系，提供了更全面的关系节点接口node.childNodes针对上面代码返回7，包含空白文档，实际应该5个node.firstChild第一个和最后一个子节点都是文本节点，可以输出nodeType测试 返回3node.lastChildnode.parentNode获取父节点，单一，父元素只会有一个node.nextSibling获取兄弟节点，下一个 要想输出，删除标签间空格node.previousSibling获取兄弟节点，上一个这些节点操作除了父节点，其他都受到空格文本节点的影响，我们需要获取后，通过if都判断nodeType为1做元素处理我们还是做tab切换，这次通过节点关系去处理：html?123456789101112标题1标题2标题3内容1内容2内容3js?12345678910111213141516171819202122232425window.onload=function()varlist=document.getElementById(list);varlistspan=list.childNodes;varcon=document.getElementById(con);varcondiv=con.childNodes;for(vari=0;ilistspan.length;i+)if(listspani.nodeType=1)listspani.onclick=function()for(varj=0;jlistspan.length;j+)if(listspanj.nodeType=1)if(listspanj=this)condivj.style.display=blockelsecondivj.style.display=none;else;else;其实差不多，而且还要添加if对节点类型的判断，其实做些别的案例会更好些节点操作api操作节点，故名思议，就是节点创建，插入，删除，替换，复制createElement() 创建元素 document.createElement (tagname)createTextNode() 创建文本 document.createTextNode(text)appendChild() 插入子节点 node.appendChild(newnode)insertBefore() 插入兄弟节点 node.insertBefore(newnode,sibnode)removeChild()