mapengpeng1999@163.com DOM和BOM

DOM概述

DOM Document Object Model 文档对象模型。
每个载入浏览器的 HTML 文档都会成为 Document 对象。
就是把HTML文档模型化，当作对象来处理。DOM文档对象模型，使JS与文档对话。

DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
DOM 将 HTML 文档表达为树结构。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
DOM对象的属性和HTML的标签属性几乎是一致的
src、title、className、href、value

DOM获取节点方式

DOM获取节点分为两种方式，第一种方式通过document来获取，第二种方式通过节点指针来获取。
通过document来获取节点的方式：
document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、document.getElementsByName()、
document.querySelector()。最后这个最常用。 可以选取元素，也可选取类名，也可选取ID，通用性更高。

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素：
node.getElementById("id");
下面的例子获取 id="intro" 的元素：
document.getElementById("intro");

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。
node.getElementsByTagName("tagname");
下面的例子返回包含文档中所有 <p> 元素的列表：
document.getElementsByTagName("p");
下面的例子返回包含文档中所有 <p> 元素的列表，
并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：
document.getElementById("main").getElementsByTagName("p");

getElementsByClassName() 方法

如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：
document.getElementsByClassName("intro");
上面的例子返回包含 class="intro" 的所有元素的一个列表：
注释：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

getElementsByName() 方法

getElementsByName() 方法返回带有指定name属性的元素：
node.getElementsByName("name");
下面的例子获取 name="baidu" 的元素：
document.getElementsByName("baidu");

document.querySelector()方法

document.querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素：
document.querySelector(CSS selectors);
下面的例子获取 class="baidu" 的元素：
document.querySelector("baidu");

DOM节点指针：

firstChild 属性(firstElementChild获取元素节点)

firstChild 属性返回指定节点的首个子节点，以 Node 对象。
注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
node.firstChild
返回文档的首个子节点：
document.firstChild;

lastChild 属性（lastElementChild获取元素节点）

lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。
node.lastChild
返回列表中的最后一个子节点：
document.getElementById("myList").lastChild;

childNodes 属性（childElementCount获取元素节点的总数）

childNodes 属性返回节点的子节点集合，以 NodeList 对象。
提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。
element.childNodes
获得 body 元素的子节点集合：
document.body.childNodes;

children 属性

children 属性返回元素节点集合。
element.children
获得 ul 元素的子节点集合：
document.getElementsByTagName[ul][0].children;

previousSibling 属性（previousElementSibling获取元素节点）

previousSibling 属性返回同一树层级中指定节点的前一个节点。
被返回的节点以 Node 对象的形式返回。
注释：如果没有 previousSibling 节点，则返回值是 null。
node.previousSibling
返回列表项的 previousSibling（前一个同胞节点）：
document.getElementById("item2").previousSibling;

nextSibling 属性（nextElementSibling获取元素节点）

nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。
被返回的节点以 Node 对象返回。
注释：如果没有 nextSibling 节点，则返回值为 null。
node.nextSibling
返回列表项的下一个同胞：
document.getElementById("item1").nextSibling;

parentNode 属性

parentNode 属性以 Node 对象的形式返回指定节点的父节点。
如果指定节点没有父节点，则返回 null。
node.parentNode
返回 <li> 元素的 parentNode（父节点）：
document.getElementById("item1").parentNode;

DOM节点操作

DOM节点操作分为创建节点、插入节点、替换节点、复制节点以及删除节点。
（节点属性：nodeType、nodeName、nodeValue（节点值，它本身是个文字时才有节点值，否则为null））

创建节点：

节点的创建可分为三种：元素节点的创建、元素属性节点的创建、文本节点的创建。
元素节点的创建：
元素节点的创建案例：document.createElement(“p”);
元素属性节点的创建案例：document.createAttribute(“title”);
文本节点的创建：document.creatTextNode(“baidu.com”);

插入节点

appendChild() 方法
appendChild() 方法向节点添加最后一个子节点。append()
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
在列表中添加项目：
document.getElementById("myList").appendChild(newListItem);
insertBefore() 方法
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，
以便追加到 LI 元素中，然后向列表插入这个 LI。
您也可以使用 insertBefore 方法插入/移动已有元素。
向列表中插入一个项目：
document.getElementById("myList").insertBefore(newItem,existingItem);

替换节点

replaceChild() 方法
replaceChild() 方法用新节点替换某个子节点。Replace(old,new)字符串替换
replaceChild(new，old) 节点替换，新旧位置顺序与字符串替换相反。
这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。
node.replaceChild(newnode,oldnode)

复制节点

cloneNode() 方法
cloneNode() 方法创建节点的拷贝，并返回该副本。
cloneNode() 方法克隆所有属性以及它们的值。
如果您需要克隆所有后代（把deep参数设为true，克隆所有子元素），
请把 deep 参数设置 true，否则设置为 false（默认false）。
node.cloneNode(deep)

删除节点

removeChild() 方法
removeChild() 方法指定元素的某个指定的子节点。指明删除哪个节点。
以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
node.removeChild(node)

动态创建元素的三种方式

总结：动态创建元素的三种方式
方式一：
document.write()
方式二：
innerHTML
方式三：
createElement()  创建
appendChild()  追加
removeChild()  移除
insertBefore()  在节点起那么插入
replaceChild()  节点替换

DOM属性操作

DOM属性操作分为获取属性、设置属性以及删除属性三类。
可分为2类，获取设置属性，和删除属性。getAttribute()获取某个标签的属性，

获取属性：
getAttribute() 方法
getAttribute() 方法返回指定属性名的属性值。重点了解此方法。 查找。
提示：如果您希望以 Attr 对象返回属性，请使用 getAttributeNode。这种方式用的少。
element.getAttribute(attributename)
获得链接的 target 属性：
document.getElementsByTagName("a")[0].getAttribute("target");

设置属性：
setAttribute() 方法
setAttribute() 方法添加指定的属性，并为其赋指定的值。创建或修改。
如果这个指定的属性已存在，则仅设置/更改值。
element.setAttribute(attributename,attributevalue)
设置 input 元素的 type 属性：
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

删除属性：
removeAttribute() 方法
removeAttribute() 方法删除指定的属性。
此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，
而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，
而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。
参阅 removeAttributeNode() 方法
element.removeAttribute(attributename)
删除 header 元素的 style 属性：
document.getElementsByTagName("H1")[0].removeAttribute("style");

DOM元素属性

在 HTML DOM （文档对象模型）中，Element 对象表示 HTML 元素。元素也可以拥有属性。常见的元素属性如下：
element.clientHeight：返回元素的可见高度。
element.clientWidth：返回元素的可见宽度。
element.offsetHeight:返回元素的高度。
element.offsetWidth:返回元素的宽度。
element.offsetLeft:返回元素的水平偏移位置。
element.offsetParent:返回元素的偏移容器。
element.offsetTop:返回元素的垂直偏移位置。
element.scrollHeight:返回元素的整体高度。
element.scrollLeft:返回元素左边缘与视图之间的距离。
element.scrollTop:返回元素上边缘与视图之间的距离。
element.scrollWidth:返回元素的整体宽度。

DOM文本操作

常用的文本操作有六个：insertData()、appendData()、deleteData()、
replaceData()、splitText()、substringData()。
insertData(start,String)：从start指定的位置插入string
注意区分节点操作和文本操作，节点操作即可操作元素也能操作文本，
文本操作只能操作文本不能操作元素。
insertData() 方法向文本节点插入数据。
insertData(start,string)
appendData(string):将string插入到文本节点的末尾处。
appendData() 方法向文本节点的末尾添加一个字符串。
textNode.appendData(string)
deleteData(start,count):从start起删除count个字符。
deleteData() 方法从文本节点删除数据。
deleteData(start,length)
replaceData(start,count,string)：从start起将count个字符用string替代。
replaceData() 方法替换文本节点中的数据。
replaceData(start,length,string)
splitText (start)：从start起将文本节点分成两个节点。
splitText() 方法按照指定的 offset 把文本节点分割为两个节点。
该函数返回包含偏移处之后的文本的节点。
偏移处之前的文本保留在原来的文本节点中。
splitText(offset)
substringData (start,count)：返回start起的count个节点
substringData() 方法从文本节点中获取数据。
substringData(start,length)

DOM改变风格样式

DOM改变风格样式有两种方式：设置className，设置行内样式style。
className 属性
定义和用法
className 属性设置或返回元素的 class 属性。
语法
HTMLElementObject.className=classname
实例
设置 元素的 class 属性：
<html>
 <body>
 <style type="text/css">
.irt{ background-color:#ff2323; color:#fff; width:120px; height:42px; text-align:center; line-height:42px; margin:20px auto;}
</style>
<div id="get">
百度搜索
</div>
<script type="text/javascript">
    document.getElementById("get").className = "irt";
</script>
 </body>
</html> 
设置行内style 属性（分为单个样式的设置和多个样式的设置）
定义和用法
行内style 属性设置或返回元素的行内样式。
语法
HTMLElementObject.style.cssAtribute=cssCode
实例
设置元素的行内样式：
<html>
 <body>
<div id="hip">
   搜狗搜索
</div>
<script type="text/javascript">
     document.getElementById("hip").style.color = "red";
 document.getElementById("hip").style.cssText = "width:120px; height:42px; line-height:42px; color:#fff; text-align:center; background-color:green;";
</script> </body>
</html>

DOM事件（重点）

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
交互都要用到事件
DOM注册事件有两种方式。
第一种方式：on+”事件名”，该方式用的最多。
第二种方式：addEventListener
–现代浏览器支持，IE9+
–可以给同一个事件注册多个事件处理程序 
–可以选择捕获或者冒泡 
–IE9以前使用attachEvent 
addEventLisener和attachEvent
•区别： 
–事件名称的区别 
•addEventLisener中第一个参数type是click、load，不带on
•attachEvent中一个参数type是onclick、onload 
–this的区别 
•addEventLisener：事件处理程序会在当前对象的作用域运行，因此，时间处理程序的this就是当前对象 
•attachEvent：事件处理程序是在全局作用域下运行因此this就是window
事件冒泡
•btn.addEventListener("click",handle,false);
–最后一个参数为false-事件冒泡 
–大多数浏览器都支持-推荐使用的方式
事件捕获
•btn.addEventListener("click",handle,true);
–最后一个参数为true-事件捕获 
老版本的浏览器不支持-不推荐使用
事件对象的获取方式
•标准DOM的事件对象 
–在事件处理程序中传入事件对象 
•IE中的事件对象 
–window.event
•跨浏览器的解决方案 
–event = event ? event : window.event; 
事件对象
•获取当前对象(只读)
–target		触发事件的元素 
–currentTarget	始终是当前执行事件处理程序的对象 
–IE中对应的属性  srcElement  ==  target
•事件类型(只读)
–type		click、mouseover。。。 
•事件处于哪个阶段(只读)
–eventPhase 
•取消默认行为 
–preventDefault()
–IE中对应的  returnValue = false
•取消冒泡和捕获 
–stopPropagation()	 取消冒泡和捕获 
–IE中对应的 cancelBubble=true   取消冒泡(IE中不支持捕获) 
事件委托
•利用事件冒泡，把多个DOM对象的事件，注册到父容器上
焦点事件
•focus
•blur 
鼠标事件
•mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick 
•事件对象的属性 
–clientX/clientY   所有浏览器都支持，窗口位置 
–pageX/pageY       IE8以前不支持，页面位置 
–screenX/screenY  屏幕位置 
–shiftKey/ctrlKey/altKey    同时按下组合键 
–button 
键盘事件
•keydown、keypress、keyup 
•事件对象的属性 
–keyCode 键盘码，只有数字和字母对应ASCII码 
–charCode 对应ASCII码，只有keypress才有效，IE9+

DOM移除事件有两种方式。
第一种方式：element.onclick = null;
第二种方式：removeEventListener
IE9以前detachEvent attachEvent
如果注册的时候使用的是匿名函数，则无法移除

查找 HTML 元素

通过 id 找到 HTML 元素
查找 id="intro" 元素：
var x=document.getElementById("intro");
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

通过标签名找到 HTML 元素
查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素
查找 class="intro" 的元素：
var x=document.getElementsByClassName("intro");

JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<script>
document.write(Date());
</script>
不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
document.getElementById(id).innerHTML="新的 HTML"
改变了 <p>元素的内容：
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

改变 HTML 属性：
document.getElementById(id).attribute=新属性值
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>

JavaScript HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
document.getElementById(id).style.property=新样式
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

使用事件

HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
元素被点击。
页面加载完成。
输入框被修改。
如改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>
<input type="button" value="点我!" onclick="document.getElementById('id1').style.color='red'" />

<p id="p1">这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript（单击事件）
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

当用户在 <h1> 元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
从事件处理器调用一个函数：
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

HTML 事件属性。
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点这里</button>
在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

使用 HTML DOM 来分配事件。
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
在上面的例子中，名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">

onchange 事件常结合对输入字段的验证来使用。
当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;
height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

onload当页面完成加载时，显示一个提示框。
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage(){
	alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>
<body onload="mymessage()"></body>
</html>

onfocus当输入字段获得焦点时，改变其背景色。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
</body>
</html>

鼠标事件：当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1>
</body>
</html>

JavaScript HTML DOM 元素 (节点)

创建新的 HTML 元素 (节点) - appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
以下代码是用于创建 <p> 元素:
var para = document.createElement("p");
为 <p> 元素创建一个新的文本节点：
var node = document.createTextNode("这是一个新的段落。");
将文本节点添加到 <p> 元素中：
para.appendChild(node);
最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：
var element = document.getElementById("div1");
添加到已存在的元素中:
element.appendChild(para);
创建新的 HTML 元素 (节点) - insertBefore()
以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

BOM浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

# BOM简介

BOM是Browser Object Model的简称。
BOM浏览器对象模型，使JS与浏览器对话。
DOM文档对象模型，使JS与文档对话。
BOM是一个接口，使JS与浏览器对话，提供了一系列的属性和方法。
BOM尚无正式标准，由于现代浏览器已实现JS交互性方面的相同方法和属性。

BOM主要包含了Window Screen（窗口屏幕）、Window Location（窗口地址栏）、
Window History（窗口历史记录）、Navigator（导航器，用的少）、
弹窗（JS输出的6种方式）、计时事件（定时器）
和Cookie（跟本地存储localStorage有一定相似性，简单的数据即可存本地存储也可存Cookie。
但是Cookie兼容性高，低版本IE浏览器不支持本地存储，Cookie用于少量数据存储，本地存储用于数据量大的存储）。

全局对象中有对字符串进行解码。
Document.write(unescape(location.pathname));

Window对象（重点）

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有JS全局对象、函数以及变量均自动成为 window 对象的成员。
全局对象（global）常用的方法（全局对象主要是方法，其属性可忽略掉），
number（）将数据类型转换成数值类型，如布尔值true转换成数值是1，字符串“123”用number（）变成123。parseFloat（）解析成浮点型，CSS中宽高有单位px，若想把单位px去掉，可使用parseFloat（）只取数值部分，parseInt（）解析成整型，String（）将数据类型转换成字符串。
isNan()判断是否为非数值类型，若是数值类型返回false，非数值类型返回true。
Var bool = true; Var x = Number(true); alert(Number(bool)); 
alert(window.Number(bool));

Function go(){ 
alert(1); 
} 
go();
Window.go = function(){
alert(1); 
} 
Window.go();
全局变量是 window 对象的属性。 var x = 1;  window.x = 1;
全局函数是 window 对象的方法。声明一个函数就是为window对象创建一个方法，这个函数名就是window对象的方法名。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。
对于IE(Internet Explorer)、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5等低版本：
document.documentElement.clientHeight(不包括滚动条)
document.documentElement.clientWidth
或者document.body.clientHeight
document.body.clientWidth
（.body获取高度没有内容是0，获取的是内容高度）

实用的JS方案（涵盖所有浏览器）：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;（类似三目运算符，从第一个开始读取，不识别就换下种写法读取，有点缺陷）
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

其他 Window 对象属性和方法

window.open() - 打开新窗口。一个参数就是直接打开网址。
打开一个新的窗口通过标签属性，a标签上的target=”_blank”属性。document.querySelector(“button”).onclick = function(){
Window.open(“https://www.baidu.com”);  }  https协议比http更安全。
window.close()关闭当前窗口。该方法只能关闭由window.open() 打开的窗口。
parent - 返回父窗口。重点，用于内连框架。后台用的多，子页面中可调用父页面里的函数方法。
父页面调用子页面方法用child（），有参函数要传参数。
sessionStorage（会话存储） -在浏览器中存储 key/value 对。
在关闭窗口或标签页之后将会删除这些数据。 
localStorage本地存储的key值的设置和获取。
localStorage.setItem(key,value); localStorage.getItem(key);
focus() - 键盘焦点给予一个窗口。用于表单验证。Window.focus();
blur() - 键盘焦点从顶层窗口移开,失去焦点
scrollTo() - 内容滚动到指定的坐标
scrollBy() - 照指定的像素值来滚动内容

window.moveTo() - 移动当前窗口。
有2个参数，一个水平位置一个是垂直位置。（实际中用的少可忽略，一般用在窗口打开时）
window.resizeTo()调整当前窗口的尺寸，结合window.moveTo()用，忽略
frames返回窗口中所有命名的框架。该集合是 Window 对象的数组，
每个Window对象在窗口中含有一个框架。实际中用的少。
length - 设置或返回窗口中的框架数量。结合frames 使用。实际中用的少。
name - 设置或返回窗口的名称。忽略。
outerHeight - 返回窗口的外部高度，包含工具条与滚动条。忽略
outerWidth - 返回窗口的外部宽度，包含工具条与滚动条。忽略
pageXOffset - 设置或返回当前页面相对于窗口显示区左上角的 X 位置。忽略
pageYOffset - 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。忽略
screenLeft -  返回相对于屏幕窗口的x坐标  忽略
screenTop - 返回相对于屏幕窗口的y坐标  忽略
screenX - 返回相对于屏幕窗口的x坐标  忽略 
screenY - 返回相对于屏幕窗口的y坐标  忽略
self - 返回对当前窗口的引用。等价于 Window 属性  忽略
top - 回最顶层的父窗口  忽略
getComputedStyle() - 取指定元素的 CSS 样式 忽略
btoa() - 建一个 base-64 编码的字符串 忽略
atob() - 码一个 base-64 编码的字符串  忽略

Window Screen（窗口屏幕）(实际中用的少，了解)

window.screen 对象包含有关用户屏幕的信息。（实际中用的少，主要针对移动和平板设备） 
window.screen对象在编写时可以不使用 window 这个前缀。
属性：
screen.width - 屏幕宽度
screen.height - 屏幕高度
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
实例，返回您的屏幕的可用宽度：
<script>
document.write("可用宽度: " + screen.availWidth);
</script>
Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
实例，返回您的屏幕的可用高度：
<script>
document.write("可用高度: " + screen.availHeight);
</script>

Window Location（窗口地址栏）（重点）

window.location 对象用于获得当前页面的地址 (URL)（获取浏览器地址栏的一些信息），
并把浏览器重新定向到新的页面（打开新的网址）。
window.location对象在编写时可不使用 window 这个前缀。
location.hostname 返回 web 主机的域名（不是IP），如果不是一个域名就会显示空的。
Document.write(location.hostname);
location.pathname 返回当前页面的路径和文件名。Document.write(location.pathname);
location.search返回一个URL的查询部分
location.reload()刷新当前文档，提交文档时自动刷新
location.replace()用一个新文档取代当前文档。
对比window.open();打开新窗口。
location.href也能实现地址的跳转。
location.href = “https://www.baidu.com”;  
location.assign()也可实现页面跳转。 
location.assign(“https://www.baidu.com”);
上面这些是打开新窗口的方式

location.port 返回 web 主机的端口号 （80（默认） 或 443）（实际中用的少）
location.protocol 返回所使用的 web 协议（http或 https）（实际中用的少）
现在域名普遍采用HTPS协议（是一种加密协议），http（没有加密）
location.hash 返回一个URL的锚部分。打开网页大部分没锚，只有特殊界面有。
location.href 属性返回当前页面的 URL。返回（当前页面的）整个 URL：
<script>
document.write(location.href);
</script>
location.pathname 属性返回 URL 的路径名。返回当前 URL 的路径名：
<script>
document.write(location.pathname);
</script>

location.assign() 方法加载新的文档。加载一个新的文档(html页面）：
<html>
<head>
<script>
function newDoc(){
  window.location.assign("http://www.w3cschool.cc")
  }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

计时事件（定时器）（重点）

JS计时事件，设置隔一段时间再执行代码，而不是在函数被调用后立即执行。
setInterval()间隔指定的毫秒数不停地执行指定代码。执行多次，循环执行setTimeout()在指定的毫秒数后执行指定代码。只执行一次，执行一次后结束
注意:setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

window.setInterval()可不使用window前缀，直接使用setInterval()
setInterval() 间隔指定的毫秒数不停地执行指定的代码。
语法：window.setInterval("javascript function",milliseconds);
第一个参数是不间断地执行某个函数（function）。匿名非匿名函数都行。
第二个参数间隔的毫秒数。（注意: 1000 毫秒是一秒。）
隔多少时间不间断执行，很耗浏览器的性能，类似死循环，手机会卡。
实例：每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);
实例展示了如何使用 setInterval() 方法，但每三秒弹出一次对用户体验不好。
以下实例将显示当前时间。设置每秒钟执行一次代码，就是手表一样。
实例：显示当前时间
var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; }
如何停止执行?（清除定时器clearInterval()）
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法：window.clearInterval(intervalVariable)
window.clearInterval()方法可不使用window前缀，直接用clearInterval()
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
myVar=setInterval("javascript function",milliseconds);
然后你可使用clearInterval() 方法来停止执行。
以下例子,我们添加了 "停止" 按钮：
<p id="demo"></p> <button onclick="myStopFunction()">停止</button> <script> var myVar=setInterval(function(){myTimer()},1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction(){ clearInterval(myVar); } </script>

setTimeout() 方法（清除定时器clearInterval()）
语法：myVar= window.setTimeout("javascript function", milliseconds);
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。
第二个参数指示从当前起多少毫秒后执行第一个参数。
实例：等待3秒，然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);
如何停止执行?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
语法：window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不使用window 前缀。
要使用clearTimeout() 方法, 你必须在创建setTimeout使用全局变量:
myVar=setTimeout("javascript function",milliseconds);
如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。
以下是同一个实例, 但是添加了 "Stop the alert" 按钮:
var myVar; function myFunction() { myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction() { clearTimeout(myVar); }

Cookie(Cookie 用于存储 web 页面的用户信息。)（重点）

什么是 Cookie？  Cookie 是一些数据, 存储于你电脑上的文本文件中。
当web服务器向浏览器发送web页面时，在连接关闭后服务端不会记录用户信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 web 页面时，用户的信息可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储，如: username=John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。
服务端通过这种方式来获取用户的信息。

JS可使用document.cookie属性来创建 、读取、及删除 cookie。
使用JS创建Cookie：document.cookie="username=John Doe";
还可以为cookie 添加一个过期时间（以 UTC 或 GMT 时间）。
默认情况下，cookie 在浏览器关闭时删除：document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
使用path参数告诉浏览器cookie的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

用JS读取 Cookie。可用以下代码来读取 cookie：var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie，
类型格式：cookie1=value; cookie2=value; cookie3=value;

用JS修改 Cookie。修改 cookie 类似于创建 cookie，如下所示：
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";      旧的 cookie 将被覆盖。

用JS删除 Cookie。
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意，当您删除时不必指定 cookie 的值。

Cookie 字符串
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie，旧的 cookie 不会被覆盖。新cookie将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：cookie1=value; cookie2=value;
显示所有Cookie     创建 Cookie 1 创建 Cookie 2 
删除 Cookie 1  删除 Cookie 2
如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

JavaScript Cookie 实例。
在以下实例中，我们将创建 cookie 来存储访问者名称。
首先访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。
访问者下一次访问页面时，他会看到一个欢迎的消息。
在这个实例中我们会创建 3 个 JavaScript 函数:
设置 cookie 值的函数
获取 cookie 值的函数
检测 cookie 值的函数

设置 cookie 值的函数
首先，我们创建一个函数用于存储访问者的名字：
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
函数解析：
以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。
该函数设置了 cookie 名、cookie 值、cookie过期时间。

获取 cookie 值的函数
然后，我们创建一个函数用户返回指定 cookie 的值：
function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}
函数解析：
cookie 名的参数为 cname。
创建一个文本变量用于检索指定 cookie :cname + "="。
使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。
循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果没有找到 cookie, 返回 ""。

检测 cookie 值的函数
最后，我们可以创建一个检测 cookie 是否创建的函数。
如果设置了 cookie，将显示一个问候信息。
如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：
function checkCookie(){
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}


完整实例
实例
function setCookie(cname,cvalue,exdays){ 
var d = new Date(); 
d.setTime(d.getTime()+(exdays*24*60*60*1000)); 
var expires = "expires="+d.toGMTString(); 
document.cookie = cname+"="+cvalue+"; "+expires; } 
function getCookie(cname){ var name = cname + "="; 
var ca = document.cookie.split(';'); 
for(var i=0; i<ca.length; i++) { 
var c = ca[i].trim(); 
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } 
return ""; } 
function checkCookie(){ 
var user=getCookie("username"); 
if (user!=""){ alert("欢迎 " + user + " 再次访问"); } 
else { user = prompt("请输入你的名字:",""); if (user!="" && user!=null){ setCookie("username",user,30); } } }