窗户

窗户对象不但充当全局作用域，而且表示浏览器窗口。

窗户对象有内部宽度和内部高度属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。还有一个外部宽度和外部高度属性，可以获取浏览器窗口的整个宽高。

补充：

网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：文档。尸体。偏移为(包括边线和滚动条的宽)网页可见区域高：文档。尸体。偏移右侧(包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：document.body.scrollTop或者jQuery(文档)。scrollTop()网页被卷去的左：文档。尸体。偷窃网页正文部分上：window.screenTop网页正文部分左：window.screenLeft屏幕分辨率的高：窗口。屏幕。高度屏幕分辨率的宽：窗口。屏幕。宽度屏幕可用工作区高度：window.screen.availHeight屏幕可用工作区宽度：window.screen.availWidth屏幕彩色位数： window.screen.colorDepth屏幕像素/英寸比例： window.screen.deviceXDPI浏览器窗口的高度：美元（窗口)。高度()浏览器窗口的宽度：美元（窗口)。宽度()特殊1: document.body.scrollTop总为0的解决方法var scroll posif(type of window . page yoffset！=' undefined '){滚动pos=window。pageyoffset} else if(文档。兼容模式！='未定义'文档。兼容模式！=' back compat '){ roll pos=document。文档元素。滚动顶部；} else if(文档。身体的类型！=' undefined '){ roll pos=document。尸体。滚动顶部；}警报(滚动位置)；特殊2: 网页正文全文宽：'文档。尸体。scrollwidth网页正文全文高：'文档。尸体。滚动高度；以上函数有时获取不了，就用以下方法var xScroll，yScrollif(窗口。内部高度窗口。scroll maxy){ xScroll=document。尸体。滚动宽度；yScroll=窗口。内部高度窗口。scrolmaxy} else if(文档。尸体。滚动高度文档。尸体。偏右){//除了浏览器Mac xScroll之外的所有内容=文档。尸体。滚动宽度；yScroll=文档。尸体。滚动高度；} else { //Explorer Mac.也会在探索者6严格版、Mozilla和Safari xScroll=文档。尸体。两者之间中工作；yScroll=文档。尸体。偏移光线；}导航器

领航员对象表示浏览器的信息，最常用的属性包括：

navigator.appName:浏览器名称；

navigator.appVersion:浏览器版本；

导航器。语言：浏览器设置的语言；

导航器。平台：操作系统类型；

导航器。用户代理：浏览器设定的用户代理字符串。

初学者为了针对不同浏览器编写不同的代码，喜欢用如果判断浏览器版本，例如：

改变宽度；if(getiversion(导航器。用户代理)9){ width=document。尸体。客户端宽度；} else { width=window.innerWidth}但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用Java脚本语言对不存在属性返回不明确的的特性，直接用短路运算符||计算：

var width=窗口。内部宽度| |文档。尸体。客户端宽度；屏幕

屏幕对象表示屏幕的信息，常用的属性有：

屏幕宽度：屏幕宽度，以像素为单位；

屏幕高度：屏幕高度，以像素为单位；

屏幕颜色深度：返回颜色位数，如8、16、24。

位置

位置对象表示当前页面的统一资源定位器信息。例如，一个完整的网址：

http://www .例子。com :8080/路径/索引。html？a=1b=2#TOP可以用location.href获取。要获得统一资源定位器各个部分的值，可以这么写：

位置.协议；//“http”location . host；//' www . example.com ' location . port；//“8080”位置。路径名；//'/path/index . html ' location . search；//'?a=1b=2 ' location.hash//'TOP '要加载新页面，可以调用location.assign()。如果想重载当前页面，调用location.reload()方法非常方便。

文件

文档对象表示当前页面。由于HTML在浏览器中表现为DOM形式的树结构，文档对象是整个DOM树的根节点。

文档的title属性是从HTML文档中的titlexxx/title读取的，但可以动态更改：

文档对象也有一个cookie属性，可以获取当前页面的Cookie。

Cookie是服务器发送的键值标识符。因为HTTP协议是无状态的，所以服务器可以使用Cookie来区分哪个用户发送了请求。用户成功登录后，服务器向浏览器发送一个Cookie，例如，user=ABC123XYZ(加密字符串).之后，当浏览器访问网站时，Cookie会附加到请求头，服务器可以根据Cookie区分用户。

Cookie还可以存储网站的一些设置，例如页面显示的语言。

JavaScript可以通过document读取当前页面的cookie，Cookie:

document.cookie//' v=123；记住=真；Prefer=zh=zh '由于JavaScript可以读取页面的Cookie，而用户的登录信息通常存在于Cookie中，这就造成了巨大的安全隐患，因为允许在HTML页面中引入第三方JavaScript代码：

！-当前页面是在wwweexample.com-html head script src=' http:3358www.foo.com/jquery.js'/script/head/htmlif恶意代码存在于第三方的JavaScript中引入的，www.foo.com网站将直接获取wwwexample.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

文档

//返回ID为“test”的节点：vartest=document . getelementbyid(‘test’)；//获取所有直属子节点： var cs=test . node test下的子节点；var first=test . first element child；第二种方法是使用querySelector()和querySelectorAll()。更方便的是理解选择器语法，然后使用条件获取节点。

//通过querySelector获取ID为q1的节点：varq 1=document . query selector(“# Q1”)；//通过querySelectorAll获取q1节点中所有符合条件的节点：var PS=Q1 . query selectorall(' div . highlight p ')；严格来说，我们这里的DOM Node是指元素，但DOM Node实际上是Node。在HTML中，节点包括许多种类，例如元素、注释、CDATA_SECTION和根节点文档类型。但是，大多数时候我们只关心Element，它是实际控制页面结构的节点，其他类型的Nodes可以忽略。根文档已被自动绑定为全局变量文档。

修改Dom

修改CSS也是经常性的操作。DOM节点的样式属性对应所有CSS，可以直接获取或设置。因为CSS允许名称font-size，但它不是JavaScript的有效属性名，所以需要在JavaScript中重写为驼峰名称fontSize:

//获取p id=' p-id './pvar p=document . getelementbyid(' p-id ')；//设置CSS : p . style . color=' # ff 0000 '；p . style . FontSize=' 20px '；p . style . padding ToP=' 2em '；插入DOM

有两种方法可以插入新节点。一种是使用appendChild向父节点的最后一个子节点添加一个子节点。例如：

！- HTML结构-p id=' js' JavaScript/pdiv 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 . create element(' p ')；动态创建一个节点，然后将其添加到DOM树中，可以实现许多功能。例如，下面的代码动态创建一个样式节点，然后将其添加到头节点的末尾，从而向文档动态添加一个新的CSS定义：

var d=document . create element(' style ')；d.setAttribute('type '，' text/CSS ')；d . innerhtml=' p { color : red } '；document . getelementsbytagname(' head ')[0]。append child(d)；在.之前插入

如果我们想将子节点插入到指定的位置，该怎么办？Parentelement。可以使用insertbefore (newelement，reference element)；子节点被插入到referenceElement之前。

在许多情况下，需要循环父节点的所有子节点，这可以通过迭代子属性来实现：

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('待删除')；//获取父节点： varparent=self。亲子元素；//delete : var removed=parent。remove child(self)；已删除===self//true请注意，删除的节点不在文档树中，但仍在内存中，可以随时添加到另一个位置。

遍历父节点的子节点并删除时，要注意子属性是只读属性，当子节点发生变化时会实时更新。因此，在删除多个节点时，应该注意子属性一直在变化。

操作形式

用JavaScript操作表单类似于操作DOM，因为表单本身也是一个DOM树。

但是表单的输入框和下拉框可以接收用户输入，所以使用JavaScript操作表单可以获取用户输入的内容，或者为一个输入框设置新的内容。

HTML表单主要有以下输入控件：

文本框，对应输入类型='text '，用于输入文本；

密码框，对应输入类型='密码'，用于输入密码；

单选框，对应输入类型='单选'，用于选择一项；

复选框，对应输入类型='复选框'，用于选择多个项目；

对应于选择的下拉框，用于选择一个项目；

隐藏文本，对应输入类型='隐藏'，用户看不到，但提交表单时会发送到服务器。

获得价值

如果我们得到一个输入节点的引用，我们可以直接调用value来得到相应的用户输入值：

//输入类型=' text ' id=' email ' var input=document . getelementbyid(' email ')；输入值；//“用户输入值”可以应用于文本、密码、隐藏和选择。但是对于单选框和复选框，value属性总是返回HTML的预设值，我们需要获取的是用户是否已经“勾选”了选项，所以要用checked来判断：

//labelinput类型='radio' name='weekday' id='星期一'值='1 '星期一/标签//labelinput类型='radio' name='weekday' id='星期二'值='2 '星期二/label var mon=document . getelementbyid('星期一')；var tue=document.getElementById('星期二')；mon.value//“1”tue . value；//“2”mon . checked；//true或false tue . checked；//true或false设置值。

设置值类似于获取值。对于文本、密码、隐藏和选择，您可以直接设置值：

//输入类型=' text ' id=' email ' var input=document . getelementbyid(' email ')；input . value='[email protected]'；//文本框的内容已经更新。对于单选框和复选框，只需将checked设置为true或false。

HTML5控件

HTML5增加了大量的标准控件，包括日期、日期时间、日期时间-本地、颜色等。它们都使用输入标签:

输入类型='日期'值=' 2015-07-01 '

输入类型=“datetime-local”值=“2015-07-01t 02:03:04”

输入类型='color '值=' # ff 0000 '

不支持HTML5的浏览器无法识别新控件，并将它们显示为type=“text”。支持HTML5的浏览器会得到一个格式化的字符串。例如，类型='date '的输入值将保证是YYYY-MM-DD格式的有效日期或空字符串。

提交表格。

最后，JavaScript可以通过两种方式处理表单提交(AJAX将在后面的章节中介绍)。

第一种方式是通过form元素的submit()方法提交表单，例如，响应按钮的click事件，用JavaScript代码提交表单：

表单id='test-form '输入类型='text '名称='test '按钮类型=' button ' onclick=' doSubmitForm()' Submit/button/formscript function doSubmitForm(){ var form=document . getelementbyid(' test-form ')；//您可以在这里修改表单的输入.//提交表单： form . submit()；}/script的缺点是干扰浏览器正常提交表单。默认情况下，浏览器单击按钮类型='提交'提交表单，或者用户在最后一个输入框中按回车键。因此，第二种方法是响应表单本身的onsubmit事件，并在提交表单时进行修改：

表单id='test-form ' on submit=' return checkForm()'输入类型='text '名称=' test '按钮类型=' submit ' submit/button/formscript function checkForm(){ var form=document . getelementbyid(' test-form ')；//您可以在这里修改表单的输入.//继续下一步的：返回true}/script注意return true告诉浏览器继续提交，如果return false浏览器不会继续提交表单，这通常对应于用户输入的错误，然后提示用户出现错误消息并终止提交表单。

检查和修改输入时，充分利用输入类型='隐藏'来传输数据。

例如，许多登录表单期望用户输入用户名和密码，但出于安全考虑，提交表单时不传输明文密码，而是传输密码的MD5。普通的JavaScript开发者会直接修改输入：

form id='login-form '方法=' post ' on submit=' return checkForm()'输入类型=' text ' id=' username ' name=' username '输入类型=' password ' id=' password ' name=' password '按钮类型=' submit ' submit/button/formscript function checkForm(){ var pwd=document . getelementbyid(' password ')；//将用户输入的明文改为md5:pwd。值=tomd5 (pwd。值)；//继续下一步：返回真；}/script看似没问题，但当用户输入密码并提交后，密码框的显示会突然从几*变成32 *(因为MD5有32个字符)。

如果不想改变用户的输入，可以使用输入类型='隐藏'来实现：

form id='login-form '方法=' post ' on submit=' return checkForm()'输入类型='text' id='username '名称='username '输入类型='password' id='input-password '输入类型='hidden' id='md5-password '名称='password' butto n类型=' submit ' submit ' submit/button/formscript function checkForm(){ var input _ pwd=document . getelementbyid(' input-password ')；var MD5 _ pwd=document . getelementbyid(' MD5-password ')；//将用户输入的明文改为md5:md5 _ pwd。value=tomd5 (input _ pwd。值)；//继续下一步：返回真；}/script注意到id为md5-password的输入标记为name='password '，而用户输入的id为input-password的输入没有name属性。没有名称属性的输入数据将不被提交。

操作文件

在HTML表单中，唯一可以上传文件的控件是input type=“file”。

注意：当表单包含输入类型='file '时，表单的enctype必须指定为multipart/form-data，方法必须指定为post，这样浏览器才能正确编码并发送multipart/form-data格式的表单数据。

出于安全考虑，浏览器只允许用户点击input type='file '选择本地文件，用JavaScript赋值input type='file '没有效果。当用户选择上传文件时，JavaScript无法获得文件的真实路径：

要上传的文件：

上传的文件一般由后台服务器处理，JavaScript在提交表单时可以检查文件扩展名，防止用户上传格式无效的文件：

var f=document . getelementbyid(' test-file-upload ')；var文件名=f.value//'C:fakepathtest.png'if(！文件名||！(filename.endsWith('。jpg') || filename.endsWith('。png') || filename.endsWith('。gif ')){ alert('只能上传图像文件。');返回false}文件应用编程接口

由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，很多需要操作文件的网页都要用Flash等第三方插件来实现。

随着HTML5的普及，新增加的File API允许JavaScript读取文件内容，获取更多的文件信息。

HTML5的File API提供了File和FileReader两个主要对象，可以获取文件信息和读取文件。

以下示例演示如何读取用户选择的图像文件并在div中预览图像：

图片预览：

var file input=document . getelementbyid(' test-image-file ')，info=document . getelementbyid(' test-file-info ')，preview=document . getelementbyid(' test-image-preview ')；//监听change事件： file input . addeventlistener(' change '，function(){//清除背景图片： preview . style . background image=' '；//检查：是否if(！file input . value){ info . innerhtml='未选择文件'；返回；}//获取文件引用： var File=File input . files[0]；//获取文件信息： info . innerhtml=' File : ' File . name ' br ' ' size : ' File . size ' br ' '修改： ' file.lastModifiedDateif (file.type！=='image/jpeg '文件. type！=='image/png '文件，类型！=='image/gif') {alert('不是有效的图片文件！');返回；}//读取文件： var reader=new FileReader()；reader . onload=function(e){ var data=e . target . result；//' data : image/JPEG；Base64，/9j/4AAQSk.(base64编码) .preview . style . background image=' URL(' data ')'；};//读取DataURL形式的文件：reader.readasDataURL(文件)；});上面的代码演示了如何通过HTML5的文件API读取文件内容。以DataURL形式读取的文件是一个字符串，类似于data : image/JPEG；Base64，/9j/4AAQSk.(base64编码).通常用于设置图像。如果需要服务器端处理，可以通过将字符串base64之后的字符发送到服务器并用Base64解码来获得原始文件的二进制内容。

回调

上面的代码还演示了JavaScript的一个重要特性是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎总是以单线程模式执行JavaScript代码，这意味着不可能有多个线程在任何时候都执行JavaScript代码。

你可能会问，单线程模式下执行的JavaScript是如何处理多任务的？

在JavaScript中，多任务实际上是一个异步调用，例如上面的代码：

reader.readAsDataURL(文件)；启动异步操作来读取文件的内容。因为是异步操作，所以在JavaScript代码中不知道操作什么时候结束，所以需要先设置一个回调函数：

Reader.onload=函数(e) {//读取文件后自动调用此函数： }；当文件被读取时，JavaScript引擎会自动调用我们的回调函数。回调函数执行时，文件已经被读取，所以我们可以在回调函数内部安全地获取文件的内容。

上面提到的JavaScript浏览器对象，都是边肖分享给大家的内容，希望能给大家一个参考，多支持我们。