JavaScript浏览器环境
来源：互联网 发布：msvcp120.dll丢失知乎 编辑：程序博客网 时间：2024/06/09 00:57
js浏览器环境
//js浏览器环境 # 在html页面中引入js代码 # 概述：DOM和BOM . 页面中的js代码有一系列可以访问的对象 $ 当前载入页面所拥有的对象（可免有时候也加叫文档） # 此对象集，称之为文档对象模型（DOM） # DOM是一个标准化组件，由W3C负责制定，拥有多个不同版本，DOM level1，DOM level2，DOM level3（迄今为止最后一个版本），现代浏览器基本上都实现了DOM level1。DOM标准出现之前，各浏览器都有各自文档的实现（DOM 0），实际上并没有DOM level0标准存在，但其中大部分所有浏览器都实现了支持，这部分也被写入DOM level1标准。 $ 页面意外事务所拥有的的对象（即浏览器窗口和桌面屏幕） # 此对象集，称之为浏览器对象模型（BOM） # BOM不属于标准化组件，它的一部分对象集的到了所有浏览器的支持，另一部分则属于浏览器特性。 ************************************************************************* # BOM（浏览器对象模型） . 通过全局对象window或window.screen来访问。 . window.navigator #（用于反映浏览器本身及其功能信息的对象。） # window.navigator.userAgent .（显示用户代理字符串） .（可以用来做浏览器检测）（但是避免使用此种方法，浏览器版本太多，太复杂，而且用户可以更改代理字符串来伪装浏览器） .（一般用特性检测法做浏览器检测） . window.location # 一个用于存储当前载入页面URL信息的对象。 ***（demo） href = "http://search.phpied.com:8080/search?p=javascripts#results" hash:"#results" host:"search.phpid.com:8080" hostname:"search.phpid.com" pathname:"/search" port:"8080" protocol:"http:" search:"?p=javascripts" ***（demo） # location对象三个方法 . reload() ==> 重新载入某个页面 ***（demo） window.location.reload( url ); window.location.href = window.location.href; location = location; ***（demo） **************************************************** . assign() ==> 页面载入 . replace() ==> 页面载入，(不会留下历史记录) ***（demo） window.location.href="http://www.baidu.com"; location.href="http://www.baidu.com"; location="http://www.baidu.com"; location.assign( "http://www.baidu.com" ); location.replace( "http://www.baidu.com" ); ***（demo） ( 两种方法使用完全相同，区别是replace()不会在history对象中留下记录，不能进行回退。 ) **************************************************** . window.history # 允许我们在一个浏览器会话( session )期间存储有限数量的浏览记录。 # 对象方法 . go() . back() . forward() ***（demo） window.history.back(); ==> 回退一页 window.history.forward(); ==> 前进一页 window.history.go( -1 ); ==> 回退一页 window.history.go( -2 ); ==> 回退两页 window.history.go( 0 ;) ==> 停留当前页 ***（demo） . window.frames # 当前页面中所有frame元素的集合，不区分frame和iframe。 # 无论当前页面是否存在frame元素，window.frames属性总是存在，并且指向了window对象本身。 (window.frames === window ==> true) # 通过检测length属性来检测当前页面中是否含有frame元素。 *** window.frames.length 1 (1个frame元素) # 访问iframe元素的window对象。 ***（demo） window.frames[0] window.frames[0].window frames[0].window frames[0] ***（demo） # 通过子元素来访问父级页面。 frames[0].parent === window true # top属性（访问到当前最顶层页面，包含所有其它frame元素的页面。） ***（demo） window.frames[0].window.top === window window.frames[0].window.top === window.top window.frames[0].window.top === top ***（demo） # self属性（作用与window基本相同。） ***（demo） self === window ==> true ***（demo） . window.screen # 提供浏览器以外的桌面信息。 # Screen availHeight:728 （除操作系统菜单栏以外的分辨率，任务栏等。） availLeft:0 availTop:0 availWidth:1366 colorDepth:24 （显示器色位） height:768 （总分辨率） orientation:ScreenOrientation pixelDepth:24 width:1366 . window.open()/close() ***（demo） var win = window.open( "http://www.baidu.com", ==> url "packt", ==> 新建窗口名称 "width=300,height=300,resizable=yes" ==> 功能列表 ); * 通过检测win是否为falsy值来判断弹出框是否被屏蔽了。 ***（demo） . window.moveTo()、window.resizeTo() ***（demo） window.moveTo( 100,100 ) ==> 当前窗口移动到100，100 window.moveBy( 10,-10 ) ==> 右移10，上移10 window.resizeTo() window.resizeBy() ***（demo） . window.alert()、window.prompt()、window.confirm() ***（demo） var answer = window.confirm( "are you cool" ); var answer = window.prompt( "and your name was","axing" ); ***（demo） . window.setTimeout()、window.setInterval() . window.document # window.document是一个BOM对象，表示当前所载入的文档（页面），但它的方法和属性同时也属于DOM对象的范围。 ************************************************************************* ************************************************************************* # DOM（文档对象模型） // 通过DOM的方法和元素，我们可以访问到页面中的任何元素，并进行元素的修改，删除，添加等操作。 // Core Dom和HTML Dom # Core Dom（Dom Level1中用于解析所有XML文档的那部分。） # HTML Dom（Core Dom的基础上进行扩展的那部分。） // Dom节点的访问 # document(文档节点)(我们当前所访问的文档) （document ==> Document index.html） . document.nodeType ==> 9 . document.nodeValue ==> null . document.nodeName ==> "#document" # documentElement （每个XML文档都有一个用来封装文档中其它内容的根节点，具体到HTML中，这个根节点就是<html>标签，我们可以通过document对象的documentElement属性来访问它。） . document.documentElement ==> <html> . document.documentElement.nodeType ==> 1（元素类节点） . document.documentElement.nodeName ==> "HTML" . document.documentElement.nodeValue ==> null . document.documentElement.tagName ==> "HTML" （对于元素类节点来说，nodeName和tagName属性等于其自身的名字。） # 子节点 . hasChildNodes() ==> （判断一个节点是否含有子节点） $ document.documentElement.hasChildNodes() ==> true . childNodes ==> （访问元素子节点）(兼容性问题) $ document.documentElement.childNodes.length ==> (2/3)（不兼容） $ [0] ==> <head> $ [1] ==> <body> . parentNode ==> （访问元素父节点） # document.documentElement.childNodes[1].parentNode ==> <html> # 属性节点 . hasAttributes() ==> （检查某个元素是否存在属性） $ document.documentElement.hasAttributes() ==> true . 访问属性 $ 通过索引值 > .attributes[0] $ 通过属性名 > .attributes['class'] $ 通过getAttribute()方法 > .getAttribute( 'class' ) # 访问标签中的内容 . textContent ==> 获取段落中的**文本**内容（会获取多余的空格） $ bd.childNodes[1].textContent ＸＸＸ（不兼容IE 6，7，8） $ <p>段落文本<em>hello</em>ccc</p> ==> "段落文本helloccc " . innerText ==> 获取段落中的**文本**内容（没有多余的空格） $ bd.childNods[1].innerText ＸＸＸ（兼容所有浏览器） $ <p>段落文本<em>hello</em>ccc</p> ==> "段落文本helloccc" . innerHTML（不属于标准DOM组件）（返回指定节点中所有的HTML代码） $ bd.childNodes[3].innerHTML ==> "<em>second</em>paragraph" . 文本节点的nodeValue $ bd.childNodes[1].childNodes[0].nodeName ==> "#text" $ bd.childNodes[1].childNodes[0].nodeValue ==> "first paragraph" # DOM访问的快捷方法 . getElementsByTagname() ==> "以标签名为参数，返回当前HTML页面中所有匹配该标签名的节点集合（一个数组类对象）" ＸＸＸ列表中的各项可以用中括号或者item()方法来索引访问。 ==> document.getElementsByTagName( "p" ).item( 0 ) （不推荐使用） ==> document.getElementsByTagName( "p" )[0]（推荐使用） . getElementsByName() . getElementsByClassName() . gteElementById() # 兄弟节点，body元素及首尾子节点 . nextSiblings . previousSiblings . document.body ==> <body> . document.body.nextSiblings ==> null . document.body.previousSiblings ==> <head> . firstChild <==> childNodes[0] . lastChild <==> childNodes[childNodes.length-1] # 新建节点 . createElement() . createTextNode() . appendChild() // cloneNode() ==> 布尔参数，深拷贝（包含子节点）或浅拷贝（不包含子节点） // insertBefore() // removeChild() ==> 返回被移除节点的引用。 // replaceChild() ==> 在移除一个节点的同时将另一个节点放在其位置，返回被移除节点的引用。 // 访问文档的基本方法 （与DOM组件可以访问页面中的所有元素不同的是(甚至包括注释和空白处)，JavaScript所能访问的内容只局限于一些HTML文档中的内容。） # document.images ( 当前页面中所有元素的集合 ) <==> Core Dom组件中，document.getElementsByTagName( "img" ); # document.applets # document.links ==> 页面中所有含href属性的a标签 # document.anchors ==> 所有带name属性的链接 # document.forms ==> form标签的列表 // document.write() // document.writeIn() # document.write( "foo\n" ) # document.writeIn( "foo" ) ==> 以上两种写法等效 ( *只能在页面被载入时能调用document.write()，如果页面载入之后调用，整个页面的内容会被替换掉。* ) ***（demo） window.onload = function(){ document.writeIn( "foo" ); ==> 内容全部被"foo"覆盖掉 } ***（demo） // Cookies，Title，Referrer，Domain # document.cookie # document.title ==> 并未改变title标签本身的值，只是改变了其在浏览器窗口中的显示内容。 *** document.title="我是百小度"; *** # document.referrer（拼写正确） ==> 记录我们之前所访问的页面的URL，与浏览器请求页面时所发送的HTTP头信息的Referer（拼写错误）值相同 # document.domain ==> 当前载入页面的域名 // 域名的设置只能朝着非具体化的方向进行。 * www.yahoo.com ==> yahoo.com 正确 * yahoo.com ==> www.yahoo.com 错误 // 事件 # 内联HTML属性法 <div onclick="alert( 'click' );">click</div> # 元素属性法 oDiv.onclick = function(){ console.log( "啊哈！！！" ); }; # DOM事件监听器 （为一个事件指定多个监听函数，事件被处罚时，所有的监听函数都会被执行，互相之间相互独立，不知道彼此的存在，任何一个加入退出不会影响其它的工作。） oDiv.addEventListener( "click",function(){ console.log( "123" ); },false ); oDiv.addEventListener( "click",console.log,false ); （第三个参数确定是否采用捕捉法来处理事件。） # 捕捉法与冒泡法 ***（demo） <body> <ul> <li><a href="www.fxqp1202.com">blog</a></li> </ul> </body> ( 当我们单击a标签时，同时也单击了li，ul，body，甚至整个document对象，对该链接的点击可以看做是对document对象的点击，形成一个事件传播链。 ) ***（demo） -------------------------------------------------- <img src="images/dom_event_propagation.png" alt="DOM LEVEL2级事件传播"/> 由DOM Level2，事件传播分为3个阶段：先在标签上使用捕捉法， 而后使用冒泡法。也就是说，事件传播的路径是从document到相关标签，然后回到document。 -------------------------------------------------- （事件传播过程的实现有两种方式） // 捕捉法 ==> document -> ul -> li -> a链接 // 冒泡法 ==> a链接 -> li -> ul -> document （用ev.eventPhase来查看某一事件的当前所处阶段。） （事件对象的eventPhase属性返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段、正常事件派发和起泡阶段。） *** 常量 值 Event.CAPTURING_PHASE 1 Event.AT_TARGET 2 Event.BUBBLING_PHASE 3 *** ***(demo) var oDiv = document.getElementById( "box" ); oDiv.addEventListener( "click",function(){ console.log( "oDiv被点击" ); },true ); document.addEventListener( "click",function(){ console.log( "document被点击" ); },true ); window.addEventListener( "click",function(){ console.log( "window被单击" ); },true ); true ==> 使用捕获式 1. window被单击 2. document被点击 3. oDiv被点击 false ==> 禁止捕获式（使用冒泡式） 1. oDiv被点击 2. document被点击 3. window被单击 ***(demo) ￥￥￥ (对于DOM标准来说，window事件是不存在的，这就是为什么DOM指的是文档而不是浏览器。) ￥￥￥ ***(匿名函数监听器无法被移除) oDiv.addEventListener( "click",function(){ console.log( "此种形式监听器无法被移除" ); },false ); ***(匿名函数监听器无法被移除) ***（移除事件） removeEventListener( "",function(){},false ) ***（移除事件） # 阻断传播（阻止冒泡式行为） ***（demo） // 事件处理函数 function handleEvent( ev ){ var ev = ev || window.event; console.log( "我被禁止冒泡了" ); ev.stopPropagation(); } oDiv.addEventListener( "click",handleEvent,false ); ***（demo） # 防止默认行为 // 相关事件对象调用preventDefault()方法。 ***（demo） （阻止a标签默认跳转行为） a.addEventListener( "click",function( ev ){ var ev = ev || window.event; if( ev.cancelable ){ ev.preventDefault(); } },false ); ***（demo） &&&并不是所有事件的默认行为都是可以阻止的，检测事件对象的cancellable属性。&&& # 跨浏览器事件监听器（IE6，7，8） // attachEvent()（事件监听方法） // window.event （全局事件对象） // srcElement （对应于DOM2级浏览器中事件触发元素的target属性） // 不支持捕捉法 // returnValue设为false （对应于DOM2级浏览器的preventDefault()方法来阻止事件默认行为） // cancleBubble设置为true （对应于DOM级浏览器的stopPropagation()阻止冒泡方法。） // detachEvent() （对应于DOM2级浏览器的removeEventListener()） ***（demo） （各浏览器兼容版本） function callback( ev ){ var ev = ev || window.event; var target = ( typeof ev.target != 'undefined')?ev.target:ev.srcElement; console.log( target.nodeName ); } // 事件监听 if( document.addEventListener ){ document.addEventListener( "click",callback,false ); }else if( document.attachEvent ){ document.attachEvent( "onclick",callback ); }else{ // IE5之前的IE版本，不用考虑 document.onclick = callback; } ***（demo） # 事件类型 // 自行查阅。。。 // 从IE9开始，实现了更多的DOM Level2标准。 ************************************************************************* 1 0
- JavaScript浏览器环境
- Web浏览器环境中的JavaScript
- Javascript 在浏览器环境中 事件
- javascript判断浏览器是否含有支持applet的JRE环境
- （13）JavaScript学习笔记 - Web浏览器环境
- 浏览器环境下的javascript DOM对象继承模型
- JavaScript 浏览器
- Firefox and Chrome 浏览器打开 JavaScript 中的 alert 出现中文乱码解决方案 Ubuntu环境
- 你要实现什么功能呢？javascript是在客户端浏览器环境中执行
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
- 浏览器环境下用javascript创建鼠标点击事件，事件模拟
- js判断浏览器环境
- javascript浏览器判断函数
- 跨浏览器的javascript
- 开发跨浏览器JavaScript
- Javascript识别浏览器类型
- PAT(basic level) 1037 在霍格沃茨找零钱(20)
- 装载问题
- windows版本千寻差分SDK的配置与使用
- python学习日记（一）
- 微指令格式和编码方法学习笔记（未完）
- JavaScript浏览器环境
- watch
- Java设计模式之代理模式
- C++编写计算机网络布线
- PAT(basic level) 1038 统计同成绩学生(20)
- linux下fcitx部分窗口无效的问题解决
- IE浏览器下使用localhost域名保存cookie的问题
- C-index/C-statistic 计算的5种不同方法及比较
- 最小二乘法
