JavaScript中的浏览器

• JavaScript学习过程中的个人笔记，详细请看https://www.liaoxuefeng.com/wiki/1022910821149312
• 再次感谢廖大

浏览器对象

• window对象不但充当全局作用域，而且表示浏览器窗口。
• window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度，内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
• window对象有outerWidth和outerHeight属性，用于获取浏览器窗口的整个宽高。
• navigator对象表示浏览器的信息，常用属性：

	navigator.appName		//浏览器名称
	navigator.appVersion	//浏览器版本
	navigator.language		//浏览器设置的语言
	navigator.platform		//操作系统类型
	navigator.userAgent	//浏览器设定的User-Agent字符串

• navigator的信息可以很容易地被用户修改，所以取到的值不一定是正确的。
• screen对象表示屏幕的信息。常用属性：

	screen.width		//屏幕宽度，以像素为单位
	screen.height		//屏幕高度，以像素为单位
	screen.colorDepth	//返回颜色位数，如8、16、24

• location对象表示当前页面的URL信息，常用属性：

	location.href		//http://www.example.com:8080/path/index.html?a=1&b=2#TOP
	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.assigen(URL)	//加载一个新页面
	location.reload()	//重新加载当前页面

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

	document.title				//通过HTML中的<title>标签获取标题，可动态修改
	document.getElementById()	//按ID获取一个DOM节点
	document.getElementsByTagName()	//按Tag名称获取一组DOM节点。
	document.cookie				//获取当前页面的Cookie

• Cookie通常会存储一些敏感信息，为了防止被第三方JavaScript代码获取，服务器端通常在设置cookie时会使用httpOnly来避免安全隐患。
• history对象保存的浏览器的历史记录，JavaScript可以调用history对象的back()或forward相当于用户点击了浏览器的后退或前进按钮。随着时代的发展，我们应该避免使用history这个对象。

DOM

• HTML文档被浏览器解析后就是一颗DOM树，要改变HTML结构，就需要通过JavaScript来操作DOM。
• 操作一个DOM节点的基本操作：
  1）更新：更新该节点的内容，相当于更新该节点表示的HTML内容。
  2）遍历：遍历该DOM节点下的子节点，以便进一步操作。
  3）添加：在该节点下新增一个子节点，相当于动态新增一个HTML节点。
  4）删除：将该节点从HTML删除，相当于删除该节点的内容以及它包含的所有子节点。
• 我们需要先获取DOM节点

    //返回ID为test的节点
	var test = document.getElementById("test");
	//先定位ID为test的节点，再返回其内部所有tr节点
	var trs = document.getElementsByTagName("test").getElementsByTagName("tr");
	//行啊定位ID为test的节点，再返回其内部所有class包含red的节点
	var reds = document.getElementById("test").getElementsByClassName("red");
	//获取节点test的所有直属子节点
	var cs  = test.children;
	//获取节点test下的第一个、最后一个子节点
	var first = test.firstElementChild;
	var last = test.lastElementChild;

   //通过querySelector()和querySelectorAll()使用条件来获取节点。
   //通过querySelector选择器获取ID为q1的节点
   var q1 = document.querySelector('#q1');
   //通过querySelectorAll获取q1节点内所有符合条件的节点
   var ps = q1.querySelectorAll('div.highlighted > p');

更新DOM

• 方法一：修改innerHTML属性，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。
• 在使用innerHTML时要注意是否需要写入HTML。如果写入的字符串是通过网络拿到的，要注意对字符编码来避免XSS攻击。
• 方法二：修改innerText或textContent属性。这个可以自动对字符串进行HTM编码，保证无法设置任何HTML标签
• 在读取属性时，interText不返回隐藏元素的文本，而textContent返回所有文本。IE<9不支持textContent.

插入DOM

• 当获得某个DOM节点，想插入新的DOM时，如果节点为空(<div>,</div>)，可以直接使用innerHTML = '<span>child</span>'，直接替换也相当于插入了新的节点。
• 如果节点不为空，使用innerHTML则会替换原有的所有子节点。
• 其他方法：
  1）使用appendChild，把一个子节点添加到父节点的最后一个子节点。
  2）使用parentElement.insertBefore(newElement, referenceElement)，子节点会插入到referenceElement之前。
• 使用inserBefore重点是要拿到一个参考子节点的引用，很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现。

删除DOM

• 删除一个节点首先获取该节点本身及其父节点，然后调用父节点的removeChild把自己删除。
• 删除的节点虽然不在文档树中，但其实还在内存中，可以随时再次被添加到其他位置。
• 当遍历一个父节点的子节点进行删除操作时，要注意，children属性是一个只读属性，且在子节点变化时会实时更新。

操作表单

• 表单本身也是DOM树。
• HTML表单的输入控件有几种：
  1）文本框，<input type="text">，用于输入文本；
  2）口令框，<input type="password">，用于输入口令；
  3）单选框，<input type="radio">，用于选择一项；
  4）复选框，<input type="checkbox">，用于选择多项；
  5）下拉框，<select>，用于选择一项；
  6）隐藏文本，<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器；
• 可以通过节点的value属性获取或设置text,passowrd,hidden和select的用户输入值。
• 可以通过节点的checked属性获取和设置单选框和复选框的是否勾选。
• H5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，都使用<input>标签。
• JavaScript可以通过两种方式处理表单的提交
  1）通过<form>元素的submit()方法提交一个表单。缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。
  2）响应<form>本身的onsubmit事件。

操作文件

• 在HTML表单中，可以上传文件的唯一控件是<input type="file>"。
• 当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
• 出于安全考虑，浏览器只允许用户点击input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有效果的。当用户选择上传了某个文件后，JavaScript也无法获得该文件的真实路径。
• JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容。
• 随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。
• HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
• 在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行的。
• 在JavaScript中，执行多任务实际上都是异步调用。

AJAX

• AJAX（Jsynchronous JavaScript and XML）就是用JavaScript执行异步网络请求。
• Web的运行原理是：一次HTTP请求对应一个页面。
• AJAX请求是异步执行的，也就是说要通过回调函数获得响应。
• 使用XMLHttpRequest步骤：
  1）在现代浏览器上写AJAX主要依靠XMLHttpRequest对象，对于低版本的IE需要使用ActiveXObject对象。
  2）可以通过window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。
  3）创建XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 2000判断是否是一个成功的响应。
  4）XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。不要把第三个参数改成false，否则浏览器将停止响应，直到AJAX请求完成。
  5）最后调用send()方法真正发送请求，GET请求不需要参数，POST请求需要把body部分以字符串或FromData对象传进去。
• 默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致，包括域名，协议(http和https)，端口号。
• 用JavaScript请求外域（其他网站）的URL的方法：
  1）通过flash插件发送HTTP其你去，可以绕过浏览器的安全限制，但必须安装flash，用得较少。
  2）通过在同源域名下架设一个代理服务器转发，JavaScript负责把请求发送到代理服务器。代理服务器再把结果返回。
  3）JSONP方法，限制只能用GET请求，并要求返回JavaScript。JSONP通常以函数调用的形式返回，这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源。
• HTML5标准下可以使用新的跨域策略：CORS（Cross-Origin Resource Sharing）。

Primise

• 在JavaScript中，所有代码都是单线程执行的，所以JavaScript的所有网络操作，浏览器事件，都必须是异步执行。
• 异步执行可用回调函数实现。可见，异步操作将会在将来的某个时间点触发一个函数调用，比如AJAX。

Canvas

• canvas是HTML5新增的组件，像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
• getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象，所有绘图操作都需要通过这个对象完成。
• getContext("webgl")方法可以拿到一个3D对象来绘制3D图形。
• Canvas实现复杂操作时的建议：
  1）通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面的可见Canvas中；
  2）尽量使用整数坐标而不是浮点数；
  3）可创建多个重叠的canvas绘制不同的层，而不是在一个Canvas中绘制非常复杂的图；
  4）背景图片如果不变可以直接用<img>标签并放到最底层。