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
可以用location.href
获取。要获得URL各个部分的值,可以这么写:
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文档中的
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代码是允许的:
如果引入的第三方的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()
和querySelectorAll()
,需要了解selector语法,然后使用条件来获取节点,更加方便:
// 通过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:
// 获取...
var p = document.getElementById('p-id'); // 设置CSS: p.style.color = '#ff0000'; p.style.fontSize = '20px'; p.style.paddingTop = '2em';
插入DOM
有两个办法可以插入新的节点。一个是使用appendChild,把一个子节点添加到父节点的最后一个子节点。例如:
JavaScript
Scheme
把 JavaScript 现在,HTML结构变成了这样: Scheme JavaScript 因为我们插入的 更多的时候我们会从零创建一个新的节点,然后插入到指定位置: 动态创建一个节点然后添加到DOM树中,可以实现很多功能。举个例子,下面的代码动态创建了一个 insertBefore 如果我们要把子节点插入到指定的位置怎么办?可以使用parentElement.insertBefore(newElement, referenceElement);,子节点会插入到referenceElement之前。 很多时候,需要循环一个父节点的所有子节点,可以通过迭代children属性实现: 删除DOM 要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉: 注意到删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置。 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新。因此,删除多个节点时,要注意children属性时刻都在变化。 操作表单 用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种: •文本框,对应的,用于输入文本; •口令框,对应的,用于输入口令; •单选框,对应的,用于选择一项; •复选框,对应的,用于选择多项; •下拉框,对应的 •隐藏文本,对应的,用户不可见,但表单提交时会把隐藏文本发送到服务器。 获取值 如果我们获得了一个节点的引用,就可以直接调用value获得对应的用户输入值: 这种方式可以应用于 设置值 设置值和获取值类似,对于text、password、hidden以及select,直接设置value就可以: 对于单选框和复选框,设置checked为true或false即可。 HTML5控件 HTML5新增了大量标准控件,常用的包括date、datetime、datetime-local、color等,它们都使用标签: 不支持HTML5的浏览器无法识别新的控件,会把它们当做type="text"来显示。支持HTML5的浏览器将获得格式化的字符串。例如,type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期,或者空字符串。 提交表单 最后,JavaScript可以以两种方式来处理表单的提交(AJAX方式在后面章节介绍)。 方式一是通过
添加到
var js = document.getElementById('js'), list = document.getElementById('list');
list.appendChild(js);
js
节点已经存在于当前的文档树,因此这个节点首先会从原先的位置删除,再插入到新的位置。
haskell = document.createElement('p');
节点,然后把它添加到
节点的末尾,这样就动态地给文档添加了新的CSS定义:
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
var
i, c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i个子节点
}
// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
//
var input = document.getElementById('email');
input.value; // '用户输入的值'
text
、password
、hidden
以及select
。但是,对于单选框和复选框,value
属性返回的永远是HTML预设的值,而我们需要获得的实际是用户是否“勾上了”选项,所以应该用checked
判断:
//
//
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
// var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新