10javascript第07天2016年3月22日显示二维码包装基本类型介绍全选反选tab页签节点属性父子兄弟及浏览器兼容1教学03bom和dom

BOM和DOMJavaScript的组成BOMwindowBOM浏览器对象模型window对象window对象是JavaScript中的顶级对象所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window系统对话框alert() //不同浏览器中的外观是不一样的confirm()prompt() //不推荐使用打开窗口window.open(url,target,param)url要打开的地址target新窗口的位置_blank

_self

_parent(父框架)param新窗口的一些设置返回值，新窗口的句柄window.close()关闭窗口window.moveTo()

window.moveBy()window.resizeTo()

window.resizeBy()定时器定时执行var

timerId

=

setInterval(code,interval);clearInterval(timerId);间隔时间执行，不是特别精确延迟执行var

timerId

=

setTimeout(code,interval);clearTimeout(timerId);location对象window.locationlocation相当于浏览器地址栏可以将url解析成独立的片段location对象的属性hrefhash返回url中#后面的内容，包含#host主机名，包括端口hostname主机名pathname

url中的路径部分protocol协议一般是http、httpssearch 查询字符串location对象的方法location.assign()改变浏览器地址栏的地址，并记录到历史中设置location.href

就会调用assign()。一般使用location.href进行页面之间的跳转location.replace() 替换浏览器地址栏的地址，不会记录到历史中location.reload()重新加载navigator对象window.navigator的一些属性可以获取客户端的一些信息userAgentplatformhistory对象历史记录管理后退history.back()history.go(-1)前进history.forward()history.go(1)什么是DOMDOM：文档对象模型(Document

Object

Model)，又称为文档🌲模型。是一套操作HTML和XML文档的API。DOM可以把HTML和XML描述为一个文档🌲，树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的某一部分。DOMDOM的相关概念DOM就是把HTML视为一个层次结构(树形结构)的文档文档(Document)：就是指HTML或者XML文件节点(Node)：HTML文档中的所有内容都可以称之为节点元素(Element)：HTML文档中的标签可以称为元素文档元素(根元素)：文档中的第一个元素，HTML文档元素就是<html>文本节点属性节点DOM的相关概念父节点parent子节点child兄弟节点silbingDOM的级别（了解）DOM0初级阶段最初浏览器中为了方便检索界面上的元素提供了非常方便的api，查询页面上的元素。实验性质的api称为DOM0document.form[0]document.images[0]随着JavaScript的普及，不同了浏览器分别扩展了JavaScript，此时程序员就苦逼了document.layers["d1"]

//Netscapedocument.all["d1"]

//IEDOM1规定了节点的类型Node为了统一浏览器之间的差异W3C制定了DOM1。比如获取浏览器的元素，不同浏览器下都可以使用document.getElementById()DOM2DOM3DOM可以做什么找对象（元素）设置元素的属性设置元素的样式动态创建元素事件DOM初体验美女相册获取页面元素DOMCore—可以用在任何DOM文档中getElementById()

//根据id属性获取一个DOM对象，区分大小写，符合代码规范getElementsByTagName()

//根据标签返回多个DOM对象HTML-DOM—仅仅能够用在HTML文档中getElementsByName()HTML5中新增getElementsByClassName()DOM对象的属性DOM对象的属性和HTML的标签属性几乎是一致的src、title、className、href练习：点击按钮隐藏显示div隐藏显示二维码DOM对象的属性innerHTML—会把内容解析到DOM树上获取标签之间的内容设置标签之间的内容innerText(FF中textContent)—会对内容转义获取标签之间的内容设置标签之间的内容HTML转移符" "‘ '& &< <//lessthan小于> >//greaterthan大于空格

© ©DOM对象的属性表单元素的属性type、value、checked、selected、disabled练习：点击按钮禁用文本框搜索文本框检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框设置下拉框中的选中项给文本框赋值，获取文本框的值全选反选getAttribute和setAttributegetAttribute()setAttribute()removeAttribute()直接使用.属性的方式不可以设置自定义属性(IE除外)，getAttribute()什么时候都可以用，推荐使用练习：Tab切换节点的属性nodeType 节点的类型1

元素节点2属性节点3文本节点nodeName 节点的名称(标签名称)nodeValue 节点值元素节点的nodeValue始终是null节点的层次父节点parentNode子节点childNodes //IE8中会忽略空白节点children //返回元素节点

兄弟节点nextSiblingpreviousSibling第一个和最后一个子节点firstChildlastChild练习：列表的隔行变色菜单的选中效果节点的层次结构childElementCount获取元素的个数，不推荐使用，推荐使用children.lengthfirstElementChildlastElementChildpreviousElementSiblingnextElementSibling设置样式的两种方式classNamestyle获取样式DOM的style属性只能获取标签中使用style设置的样式，无法获取嵌入或外部样式style.cssText获取style里面的字符串设置样式style常用属性backgroundColorbackgroundImagecolorwidthheightborderopacity

(IE8以前filter:alpha(opacity=xx))注意DOM对象style的属性和标签中style内的值不一样，因为在JS中-不能作为标识符backgroundColor

DOM中background-color

CSS中练习当前输入的文本框高亮显示改变div的大小表格隔行变色、高亮显示切换背景图片显示隐藏显示二维码关闭广告隐藏显示display元素隐藏后，不占位置，页面上的元素会重新排列visibility元素隐藏后，占位置hiddenvisible位置positionlefttoprightbottomz-index练习：祝愿墙偏移量offsetParentparentNode和offsetParentparentNode始终是父元素offsetParent是离当前元素最近的定位元素(absolute、relative)客户区大小客户区大小兼容浏览器functiongetViewport(){if(patMode=="CSS1Compat"){//标准模式

return{clientWidth:document.documentElement.clientWidth,clientHeight:document.documentElement.clientHeight}}else{//混杂模式

return{clientWidth:document.body.clientWidth,clientHeight:document.body.clientHeight}}}案例：根据视口大小，改变body的背景颜色滚动大小案例：固定导航头定时器定时执行var

timerId

=

setInterval(code,interval);clearInterval(timerId);延迟执行var

timerId

=

setTimeout(code,interval);clearTimeout(timerId);基本动画动态改变大小动态改变位置动态改变透明度动态创建元素的三种方式方式一：document.write()方式二：innerHTML方式三：createElement()appendChild()removeChild()insertBefore()replaceChild()案例动态创建列表，高亮显示选择水果模拟百度搜索文本框动态创建在线人员列表动态创建相册动态创建祝愿墙动态创建菜单动态创建表格方式1createElement()方式2rowsinsertRow()deleteRow()cells insertCell()deleteCell()什么是事件JavaScript是事件驱动的什么是事件？触发-响应事件的概念事件相关概念事件源：触发事件的对象事件名称：click、mouseover等事件处理程序：onclick、onmouseover等注册事件使用onclick注册多个事件处理程序

//注册多个事件处理程序

functionaddEvent(element,event,fn){varoldfn=element[event];if(typeofoldfn!="function"){element[event]=fn;}else{element[event]=function(){oldfn();fn();}}}注册事件的两种方式onclickDOM0几乎所有的浏览器都支持addEventListenerDOM2现代浏览器支持，IE9+可以选择可以给同一个事件注册多个事件处理程序捕获或者冒泡IE9以前使用attachEvent移除事件的两种方式element.onclick

=

null;removeEventListenerIE9以前detachEvent如果注册的时候使用的是匿名函数，则无法移除给多个DOM对象注册事件的话是使用命名函数还是匿名函数？比如给多个文本框注册事件，获取文本框的值注意事项innerHTML在清空内容的时候和事件相关的地方addEventLisener和attachEvent区别：事件名称的区别addEventLisener中第一个参数type是click、load，不带onattachEvent中一个参数type是onclick、onloadthis的区别addEventLisener：事件处理程序会在当前对象的作用域运行，因此，时间处理程序的this就是当前对象attachEvent：事件处理程序是在全局作用域下运行因此this就是window事件冒泡btn.addEventListener("click",handle,false);最后一个参数为false-事件冒泡大多数浏览器都支持-推荐使用的方式事件捕获btn.addEventListener("click",handle,true);最后一个参数为false-事件捕获老版本的浏览器不支持-不推荐使用事件的三个阶段捕获阶段1目标阶段2正在执行当前对象的事件处理程序冒泡阶段3事件对象的获取方式标准DOM的事件对象在事件处理程序中传入事件对象IE中的事件对象window.event跨浏览器的解决方案event=event?event:window.event;事件对象获取当前对象(只读)target 触发事件的元素currentTarget 始终是当前执行事件处理程序的对象IE中对应的属性srcElement

=