下面小编就为大家带来一篇浅谈 JavaScript 浏览器对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
window
window 对象不但充当全局作用域,而且表示浏览器窗口。
window 对象有 innerWidth 和 innerHeight 属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。还有一个 outerWidth 和 outerHeight 属性,可以获取浏览器窗口的整个宽高。
补充:
- 网页可见区域宽:document.body.clientWidth
- 网页可见区域高:document.body.clientHeight
- 网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽)
- 网页可见区域高:document.body.offsetHeight (包括边线的宽)
- 网页正文全文宽:document.body.scrollWidth
- 网页正文全文高:document.body.scrollHeight
- 网页被卷去的高:document.body.scrollTop 或者 jQuery(document).scrollTop()
- 网页被卷去的左:document.body.scrollLeft
- 网页正文部分上:window.screenTop
- 网页正文部分左:window.screenLeft
- 屏幕分辨率的高:window.screen.height
- 屏幕分辨率的宽:window.screen.width
- 屏幕可用工作区高度:window.screen.availHeight
- 屏幕可用工作区宽度:window.screen.availWidth
- 屏幕彩色位数: window.screen.colorDepth
- 屏幕像素/英寸比例: window.screen.deviceXDPI
- 浏览器窗口的高度: $(window).height()
- 浏览器窗口的宽度: $(window).width()
- 特殊1:
- document.body.scrollTop总为0的解决方法
- var scrollPos;
- if (typeof window.pageYOffset != 'undefined') {
- scrollPos = window.pageYOffset;
- }
- else if (typeof document.compatMode != 'undefined' &&
- document.compatMode != 'BackCompat') {
- scrollPos = document.documentElement.scrollTop;
- }
- else if (typeof document.body != 'undefined') {
- scrollPos = document.body.scrollTop;
- }
- alert(scrollPos );
- 特殊2:
- 网页正文全文宽:"+ document.body.scrollWidth;
- 网页正文全文高:"+ document.body.scrollHeight;
- 以上函数有时获取不了,就用以下方法。
- var xScroll, yScroll;
- if (window.innerHeight && window.scrollMaxY)
- {
- xScroll = document.body.scrollWidth;
- yScroll = window.innerHeight + window.scrollMaxY;
- } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
- xScroll = document.body.scrollWidth;
- yScroll = document.body.scrollHeight;
- } else { //Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
- xScroll = document.body.offsetWidth;
- yScroll = document.body.offsetHeight;
- }
navigator
navigator 对象表示浏览器的信息,最常用的属性包括:
•navigator.appName:浏览器名称;
•navigator.appVersion:浏览器版本;
•navigator.language:浏览器设置的语言;
•navigator.platform:操作系统类型;
•navigator.userAgent:浏览器设定的 User-Agent 字符串。
初学者为了针对不同浏览器编写不同的代码,喜欢用 if 判断浏览器版本,例如:
- var width;
- if (getIEVersion(navigator.userAgent) < 9) {
- width = document.body.clientWidth;
- } else {
- width = window.innerWidth;
- }
但这样既可能判断不准确,也很难维护代码。正确的方法是充分利用 JavaScript 对不存在属性返回
的特性,直接用短路运算符
- undefined
计算:
- ||
- var width = window.innerWidth || document.body.clientWidth;
screen
screen 对象表示屏幕的信息,常用的属性有:
•screen.width:屏幕宽度,以像素为单位;
•screen.height:屏幕高度,以像素为单位;
•screen.colorDepth:返回颜色位数,如 8、16、24。
location
location 对象表示当前页面的 URL 信息。例如,一个完整的 URL:
- http: //www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用
获取。要获得 URL 各个部分的值,可以这么写:
- location.href
- location.protocol; // 'http'
- location.host; // 'www.example.com'
- location.port; // '8080'
- location.pathname; // '/path/index.html'
- location.search; // '?a=1&b=2'
- location.hash; // 'TOP'
要加载一个新页面,可以调用 location.assign()。如果要重新加载当前页面,调用 location.reload() 方法非常方便。
document
document 对象表示当前页面。由于 HTML 在浏览器中以 DOM 形式表示为树形结构,document 对象就是整个 DOM 树的根节点。
document 的 title 属性是从 HTML 文档中的 <title>xxx</title> 读取的,但是可以动态改变:
document 对象还有一个 cookie 属性,可以获取当前页面的 Cookie。
Cookie 是由服务器发送的 key-value 标示符。因为 HTTP 协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求,就可以用 Cookie 来区分。当一个用户成功登录后,服务器发送一个 Cookie 给浏览器,例如 user=ABC123XYZ(加密的字符串)...,此后,浏览器访问该网站时,会在请求头附上这个 Cookie,服务器根据 Cookie 即可区分出用户。
Cookie 还可以存储网站的一些设置,例如,页面显示的语言等等。
JavaScript 可以通过 document.cookie 读取到当前页面的 Cookie:
- document.cookie; // 'v=123; remember=true; prefer=zh'
由于 JavaScript 能读取到页面的 Cookie,而用户的登录信息通常也存在 Cookie 中,这就造成了巨大的安全隐患,这是因为在 HTML 页面中引入第三方的 JavaScript 代码是允许的:
- <!-- 当前页面在wwwexample.com -->
- <html>
- <head>
- <script src="http://www.foo.com/jquery.js">
- </script>
- </head>
- </html>
如果引入的第三方的 JavaScript 中存在恶意代码,则 www.foo.com 网站将直接获取到 www.example.com 网站的用户登录信息。
为了解决这个问题,服务器在设置 Cookie 时可以使用 httpOnly,设定了 httpOnly 的 Cookie 将不能被 JavaScript 读取。这个行为由浏览器实现,主流浏览器均支持 httpOnly 选项,为了确保安全,服务器端在设置 Cookie 时,应该始终坚持使用 httpOnly。
document.write() 仅仅向文档输出新内容
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
参考: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
DOM | Document
- // 返回ID为'test'的节点:
- var test = document.getElementById('test');
- // 获取节点test下的所有直属子节点:
- var cs = test.children;
- var first = test.firstElementChild;
第二种方法是使用
和
- querySelector()
,需要了解 selector 语法,然后使用条件来获取节点,更加方便:
- querySelectorAll()
- // 通过querySelector获取ID为q1的节点:
- var q1 = document.querySelector('#q1');
- // 通过querySelectorAll获取q1节点内的符合条件的所有节点:
- var ps = q1.querySelectorAll('div.highlighted > p');
严格地讲,我们这里的 DOM 节点是指 Element,但是 DOM 节点实际上是 Node,在 HTML 中,Node 包括 Element、Comment、CDATA_SECTION 等很多种,以及根节点 Document 类型,但是,绝大多数时候我们只关心 Element,也就是实际控制页面结构的 Node,其他类型的 Node 忽略即可。根节点 Document 已经自动绑定为全局变量 document。
修改 Dom
修改 CSS 也是经常需要的操作。DOM 节点的 style 属性对应所有的 CSS,可以直接获取或设置。因为 CSS 允许 font-size 这样的名称,但它并非 JavaScript 有效的属性名,所以需要在 JavaScript 中改写为驼峰式命名 fontSize:
- // 获取<p id="p-id">...</p>var p = document.getElementById('p-id');
- // 设置CSS:
- p.style.color = '#ff0000';
- p.style.fontSize = '20px';
- p.style.paddingTop = '2em';
插入 DOM
有两个办法可以插入新的节点。一个是使用 appendChild,把一个子节点添加到父节点的最后一个子节点。例如:
- <!-- HTML结构 -->
- <p id="js">
- JavaScript
- </p>
- <div id="list">
- <p id="scheme">
- Scheme
- </p>
- </div>
把
添加到
- <p id="js">JavaScript</p>
的最后一项:
- <div id="list">
- var js = document.getElementById('js'),
- list = document.getElementById('list');
- list.appendChild(js);
现在,HTML 结构变成了这样:
- <!-- HTML结构 -->
- <div id="list">
- <p id="scheme">
- Scheme
- </p>
- <p id="js">
- JavaScript
- </p>
- </div>
因为我们插入的
节点已经存在于当前的文档树,因此这个节点首先会从原先的位置删除,再插入到新的位置。
- js
更多的时候我们会从零创建一个新的节点,然后插入到指定位置:
- haskell = document.createElement('p');
动态创建一个节点然后添加到 DOM 树中,可以实现很多功能。举个例子,下面的代码动态创建了一个
节点,然后把它添加到
- <style>
节点的末尾,这样就动态地给文档添加了新的 CSS 定义:
- <head>
- var d = document.createElement('style');
- d.setAttribute('type', 'text/css');
- d.innerHTML = 'p { color: red }';
- document.getElementsByTagName('head')[0].appendChild(d);
insertBefore
如果我们要把子节点插入到指定的位置怎么办?可以使用 parentElement.insertBefore(newElement, referenceElement);,子节点会插入到 referenceElement 之前。
很多时候,需要循环一个父节点的所有子节点,可以通过迭代 children 属性实现:
- var
- i, c,
- list = document.getElementById('list');
- for (i = 0; i < list.children.length; i++) {
- c = list.children[i]; // 拿到第i个子节点
- }
删除 DOM
要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的 removeChild 把自己删掉:
- // 拿到待删除节点:
- var self = document.getElementById('to-be-removed');
- // 拿到父节点:
- var parent = self.parentElement;
- // 删除:
- var removed = parent.removeChild(self);
- removed === self; // true
注意到删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时,要注意,children 属性是一个只读属性,并且它在子节点变化时会实时更新。因此,删除多个节点时,要注意 children 属性时刻都在变化。
操作表单
用 JavaScript 操作表单和操作 DOM 是类似的,因为表单本身也是 DOM 树。
不过表单的输入框、下拉框等可以接收用户输入,所以用 JavaScript 来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。
HTML 表单的输入控件主要有以下几种:
• 文本框,对应的 <input type="text">,用于输入文本;
• 口令框,对应的 <input type="password">,用于输入口令;
• 单选框,对应的 <input type="radio">,用于选择一项;
• 复选框,对应的 <input type="checkbox">,用于选择多项;
• 下拉框,对应的 <select>,用于选择一项;
• 隐藏文本,对应的 <input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。
获取值
如果我们获得了一个 <input> 节点的引用,就可以直接调用 value 获得对应的用户输入值:
- // <input type="text" id="email">
- var input = document.getElementById('email');
- input.value; // '用户输入的值'
这种方式可以应用于
、
- text
、
- password
以及
- hidden
。但是,对于单选框和复选框,
- select
属性返回的永远是 HTML 预设的值,而我们需要获得的实际是用户是否 "勾上了" 选项,所以应该用
- value
判断:
- checked
- // <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
- // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
- var mon = document.getElementById('monday');
- var tue = document.getElementById('tuesday');
- mon.value; // '1'
- tue.value; // '2'
- mon.checked; // true或者false
- tue.checked; // true或者false
设置值
设置值和获取值类似,对于 text、password、hidden 以及 select,直接设置 value 就可以:
- // <input type="text" id="email">var input = document.getElementById('email');
- input.value = 'test@example.com'; // 文本框的内容已更新
对于单选框和复选框,设置 checked 为 true 或 false 即可。
HTML5 控件
来源: http://www.phperz.com/article/17/0331/265175.html