浏览器对象与DOM

浏览器对象

window

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

//浏览器窗口的内部宽度和高度（除去状态栏、工具栏、边框）
window.innerWidht;
window.innerHeight;
//浏览器窗口的整个宽和高
window.outerWidth;
window.outerHeight;

//当我们获取窗口宽度时，可以这样写，来做兼容
var width = window.innerWidth || document.body.clientWidth;

navigator

navigator对象表示浏览器的信息，常用的属性包括：

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

screen

screen表示屏幕的信息。

screen.width; //屏幕宽度，以像素为单位
screen.height; //屏幕高度，以像素为单位
screen.colorDepth; //屏幕的颜色位数

location

location对象表示当前页面的URL信息。
location.href 获取当前页面的URL

//url为http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocal; //'http'
location.host; //'www.example.com'
location.port; //'8080'
location.pathname; //'path/index.html'
location.search; //'?a=1&b=2'
location.hash;  //'TOP'

location.reload(); //重新加载
location.assign(); //加载一个新页面

document

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

document.title = '努力学习JavaScript!';
document.getElementById('id'); //根据id获取页面元素
document.getElementsByTagName('name'); //根据tag名称获得一组dom节点

Cookie

对cookie的理解：
Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器。此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

document.cookie 可以获取当前页面的Cookie.也有可能读不到，如下：

由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

history

history对象保存了浏览器的历史记录.

对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。试图回到前一个页面。这是一种不好的方法。

任何情况，都不应该使用history这个对象。

DOM操作

DOM理解

HTML文档被浏览器解析后就是一颗DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM.
DOM是一个树形结构，对DOM的操作包括：更新 (节点的内容)，遍历 （子节点），添加 （子节点），删除（节点以及子节点）

var test = document.getElementById('test'); //返回ID为'test'的节点
var trs = document.getElementsByTagName('tr'); //数组，表示所有tr节点
var reds = document.getElementsByClassName('red'); //数组，表示class包含red的节点
var cs = test.children; //数组，所有的孩子节点
var first = test.firstElementChild; //第一个子节点
var last = test.lastElementChild; //最后一个子节点

更新dom

拿到一个DOM节点后，我们可以对它进行更新。

• 修改innerHTML属性，不但可以修改一个DOM节点的文本内容，还可以修改HTML片段来修改DOM节点内部的子树
• 修改innerText或textContent属性，不会修改HTML标签
• 设置CSS，DOM节点的style属性对应所有的CSS，可以直接获取或设置.注意这里是驼峰式命名，不同于CSS，例如：js中fontSize, 而CSS中为font-size.

var p = document.getElementById('p-id');
p.innerHTML = 'ABC';
//<p>的内部结构已修改
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';

// HTML被自动编码，无法设置一个<script>节点
p.innerText = '<script>alert("Hi")</script>';
//设置CSS
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';