高程笔记4-BOM

8-windows对象

抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还
是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以。
例如：
var age = 29;
window.color = "red";
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

间歇调用和超时调用

//设置超时调用
var timeoutId = setTimeout(function() {
 alert("Hello world!");
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);


//不建议传递字符串！
setInterval ("alert('Hello world!') ", 10000);
//推荐的调用方式
setInterval (function() {
 alert("Hello world!");
}, 10000)

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。
//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();

location 对象

位置操作

location.assign("http://www.wrox.com");


window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";




//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
每次修改 location 的属性（hash 除外），页面都会以新 URL 重新加载。

重新加载
location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

history 对象

使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，
表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），
正数表示向前跳转（类似于单击浏览器的“前进”按钮）。来看下面的例子。
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");
另外，还可以使用两个简写方法 back()和 forward()来代替 go()。顾名思义，这两个方法可以
模仿浏览器的“后退”和“前进”按钮。
//后退一页
history.back();
//前进一页
history.forward();

BOM总结

浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时，window
对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造
函数及其他函数也都存在于它的命名空间下。本章讨论了下列 BOM 的组成部分。
 在使用框架时，每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。
每个框架都保存在 frames 集合中，可以通过位置或通过名称来访问。
 有一些窗口指针，可以用来引用其他框架，包括父框架。
 top 对象始终指向最外围的框架，也就是整个浏览器窗口。
 parent 对象表示包含当前框架的框架，而 self 对象则回指 window。
 使用 location 对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段
或整体性地修改浏览器的 URL。
 调用 replace()方法可以导航到一个新 URL，同时该 URL 会替换浏览器历史记录中当前显示
的页面。
 navigator 对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏
览器；不过，也有一些公共的属性（如 userAgent）存在于所有浏览器中。
BOM 中还有两个对象：screen 和 history，但它们的功能有限。screen 对象中保存着与客户端
显示器有关的信息，这些信息一般只用于站点分析。history 对象为访问浏览器的历史记录开了一个
小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。

10.DOM

DOCUMENT

这个页面在经过浏览器解析后，其文档中只包含一个子节点，即元素。可以通过
documentElement 或 childNodes 列表来访问这个元素，如下所示。

var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true

//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";

//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的 URL
var referrer = document.referrer;

文档写入

有一个 document 对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力
体现在下列 4 个方法中：write()、writeln()、open()和 close()。其中，write()和 writeln()
方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而 writeln()则会
在字符串的末尾添加一个换行符（\n）。在页面被加载的过程中，可以使用这两个方法向页面中动态地
加入内容，如下面的例子所示。

Element类型

if (element.tagName == "div"){ //不能这样比较，很容易出错！
 //在此执行某些操作
}
if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）
 //在此执行某些操作
}

//属性的3个方法
div.setAttribute("id", "someOtherId");
alert(div.getAttribute("mycolor")); //null（IE 除外）
div.removeAttribute("class");

DOM拓展

querySelector()方法

//取得 body 元素
var body = document.querySelector("body");

//取得某<div>中的所有<em>元素（类似于 getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");

//matchesSelector()方法
//Selectors API Level 2 规范为 Element 类型新增了一个方法 matchesSelector()。这个方法接收
//一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。看例子。
if (document.body.matchesSelector("body.page1")){
 //true
}

classList 属性

 add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
 contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
 remove(value)：从列表中删除给定的字符串。
 toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
 //执行操作
)
//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){
 doSomething(div.classList[i]);
}
有了 classList 属性，除非你需要全部删除所有类名，或者完全重写元素的 class 属性，否则也
就用不到 className 属性了。
支持 classList 属性的浏览器有 Firefox 3.6+和 Chrome。

焦点管理

默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是 document.body 元
素的引用。文档加载期间，document.activeElement 的值为 null。
另外就是新增了 document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的
信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。来看一个例子。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。dataset 属性的
值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。在这个映射中，每个 data-name 形式
的属性都会有一个对应的属性，只不过属性名没有 data-前缀（比如，自定义属性是 data-myname，
那映射中对应的属性就是 myname）。还是看一个例子吧。
//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";

字符集属性

HTML5 新增了几个与文档字符集有关的属性。其中，charset 属性表示文档中实际使用的字符集，
也可以用来指定新字符集。默认情况下，这个属性的值为"UTF-16"，但可以通过<meta>元素、响应头
部或直接设置 charset 属性修改这个值。来看一个例子。
alert(document.charset); //"UTF-16"
document.charset = "UTF-8";

插入标记

innerHTMLs属性
div.innerHTML = "Hello world!";

outerHTML 属性
outerHTML会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素
div.outerHTML = "<p>This is a paragraph.</p>";   //div会被覆盖掉

insertAdjacentHTML()方法
插入标记的最后一个新增方式是insertAdjacentHTML()方法。这个方法最早也是在IE中出现的，
它接收两个参数：插入位置和要插入的 HTML 文本。第一个参数必须是下列值之一：
 “beforebegin”，在当前元素之前插入一个紧邻的同辈元素；
 “afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
 “beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
 “afterend”，在当前元素之后插入一个紧邻的同辈元素。

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");
支持 insertAdjacentHTML()方法的浏览器有 IE、Firefox 8+、Safari、Opera 和 Chrome。

scrollIntoView()方法

如何滚动页面也是 DOM 规范没有解决的一个问题。为了解决这个问题，浏览器实现了一些方法，
以方便开发人员更好地控制页面滚动。在各种专有方法中，HTML5 最终选择了 scrollIntoView()作
为标准方法。
//让元素可见

1	document.forms[0].scrollIntoView();

 scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚
动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。
如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部（垂直方向）。
Safari 和 Chrome 实现了这个方法。
 scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，
也可以是负值。Safari 和 Chrome 实现了这个方法。
 scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决
定。Safari 和 Chrome 实现了这个方法。

设置CSS

只要取得一个有效的 DOM 元素的引用，就可以随时使用 JavaScript 为其设置样式。以下是几个例子。
var myDiv = document.getElementById("myDiv");
//设置背景颜色
myDiv.style.backgroundColor = "red";
//改变大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";
在以这种方式改变样式时，元素的外观会自动被更新。

DOM 样式属性和方法
“DOM2级样式”规范还为 style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style
特性值的同时，也可以修改样式。下面列出了这些属性和方法。
 cssText：如前所述，通过它能够访问到 style 特性中的 CSS 代码。
 length：应用给元素的 CSS 属性的数量。
 parentRule：表示 CSS 信息的 CSSRule 对象。本节后面将讨论 CSSRule 类型。
 getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。
 getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回
“important”；否则，返回空字符串。
 getPropertyValue(propertyName)：返回给定属性的字符串值。
 item(index)：返回给定位置的 CSS 属性的名称。
 removeProperty(propertyName)：从样式中删除给定属性。
 setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先
权标志（”important”或者一个空字符串）。

myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);

设计 length 属性的目的，就是将其与 item()方法配套使用，以便迭代在元素中定义的 CSS 属性。
在使用 length 和 item()时，style 对象实际上就相当于一个集合，都可以使用方括号语法来代替
item()来取得给定位置的 CSS 属性，如下面的例子所示。
for (var i=0, len=myDiv.style.length; i < len; i++){
 alert(myDiv.style[i]); //或者 myDiv.style.item(i)
}

// CSS 规则

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
alert(rule.selectorText); //"div.box"
alert(rule.style.cssText); //完整的 CSS 代码
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"
/*
使用这种方式，可以像确定元素的行内样式信息一样，确定与规则相关的样式信息。与使用元素的
方式一样，在这种方式下也可以修改样式信息，如下面的例子所示。
*/
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
rule.style.backgroundColor = "red"

//2. 创建规则
sheet.insertRule("body { background-color: silver }", 0); //DOM 方法
//3. 删除规则
sheet.deleteRule(0); //DOM 方法