JavaScript入门JS外置对象：Window、Document对象与DOM实例详解
一）window对象
1、什么是DHTML？
1）DHTML是指操作HTML以创造各种动态视觉效果，是一种浏览器端的动态网页技术。
2）DHTML的功能：
①动态改变页面元素。
②事件响应机制制作动态折叠的树形结构和菜单。
③与用户进行交互等。
3）DHTML对象模型包括浏览器对象模型和DOM对象模型。
2、DHTML对象模型
将整个窗口均实现了对象化，结构如下：
3、什么是Window对象？它有哪些常用属性？常用子对象？
window对象表示浏览器打开的窗口，也是父对象。
1）常用属性
①name：窗口名称。
②opener：打开当前窗口的window对象（引用）。
③status：窗口底部状态栏信息。
2）常用子对象
①document：代表给定浏览器窗口中的HTML文档。
②history：包含了用户浏览过的URL信息。
③location：包含关于当前URL的信息。
④navigator：包含Web浏览器的信息。
⑤screen：包含关于客户屏幕和渲染能力的信息。
⑥event：代表事件状态。
4、Window对象有哪些常用方法？
1）对话框类
1>alert(str)：提示对话框，显示str字符串的内容。
例如：window.alert("aa"); //window.可省
2>confirm(str)：确认对话框，像是str字符串的内容，按“确定”返回true，其他操作返回false。
3>prompt(str,value)：输入对话框，采用文本框输入信息，str为提示信息，value为初始值，按“确定”返回输入值，其他操作返回undefine，value可省。
function testConfirm() {
var r = window.confirm("Are you really....");
alert(r);
window.prompt("请输入ID：");//因为不能控制它，所以很少用
}2）窗口的打开与关闭
1>window.open(url)：重复打开。
2>window.open(url,name)：采取命名方式，避免重复打开。
3>window.open(url,name,comfig)：config设置新窗口外观如高和宽。
4>window.close()：关闭窗口。
function testNewWindow(){
var config="toolbar=no,location=no,width=300,height=200";
window.open("http://www.baidu.com","a",config);
}3）周期性定时器
1>setInterval(exp,time)：周期性触发代码exp，返回已经启动的定时器。exp：执行语句，time：时间周期，单位为毫秒。
2>clearInterval(tObj)：停止启动的定时器。tObj：启动的定时器对象。
4）一次性定时器
1>setTimeout(exp,time)：一次性触发代码exp，返回已经启动的定时器。exp：执行语句，time：时间周期，单位为毫秒。
2>clearTimeout(tObj)：停止启动的定时器。tObj：启动的定时器对象。
5）动态时钟
dClock.html
这是动态时钟的测试
二）Document对象与DOM
1、什么是Document对象？什么是DOM？
1）Document对象：每个载入浏览器的HTML文档都会成为Document对象。
①通过使用Document对象，可以从脚本中对HTML页面中的所有元素进行访问（操作文档中的任何内容，都过Document）。
②Document对象是window对象的一部分，可通过window.document方式对其进行访问。
2）DOM：Document Object Model，文档对象模型，HTML文档中的所有节点组成了一个文档树（或节点树）。
①树起始于文档节点，Document对象是一颗文档树的根。
②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。
2、Document中查找节点的方式有哪几类？
1）根据元素ID查找节点
1>方法：document.getElementById(idValue)
2>忽略文档的结构，通过指定的ID来返回元素节点。
3>可以查找整个HTML文档中的任何HTML元素。
注意事项：如果ID值错误，则返回null。
2）根据层次查找节点
1>遵循文档的层次结构，查找单个节点：parentNode、firstChild、lastChild
2>遵循文档的层次结构，查找多个节点：
childNodes：以s结尾的都是数组，则有length属性。
3）案例
eg：根据层次查找节点
selectIDl.html
同理，第一个子节点为空格，firstChild的内容当然也就是undefined了。
3）根据标签名称查找节点
1>getElementsByTagName("namestr")：在某个节点的所有后代里查找某种类型的元素（根据指定的标签名），并返回所有的元素（返回一个节点列表）。
①忽略文档的结构，查找整个HTML文档中的所有元素。
②如果标签名错误，则返回长度为0的节点列表。
注意事项：单词Elements结尾有s，所以为数组。
2>length属性：返回的是一个节点列表，是个数组，因此可用length属性获取元素个数。使用[index]可定位具体的元素。例如：
文本
一周畅销榜
var spans=document.getElementsByTagName("span");
alert(spans.length);//2
alert(spans[1].innerHTML);//榜3、读取或者修改节点信息有什么规则限制？
主要有三个规则限制：
规则一：将HTML标签对象化，操作前先明确被对象化的标签都有什么属性。
如：aObj代表一个元素，有aObj.href属性，但没有aObj.value和aObj.src
规则二：innerHTML：设置或获取位于对象起始和结束标签内的内容。
如：aObj.innerHTML可修改元素标签中的“元素”两字
注意事项：单标签无法用innerHTML修改内容。
规则三：nodeName：得到某个元素节点和属性节点（即可得到标签或属性名称）及其类型位置。xxx.nodeName：当未知节点类型时，使用该属性获得节点的名称，全大写方式。
如：if(xxx.nodeName == "IMG") xxx.src = "http://...";
注意—节点属性：getAttribute()方法：根据属性名称获取属性的值。
将HTML标签、属性、CSS样式都对象化。
4、如何查找并修改节点？实例演示
1）修改节点样式
1>style属性：语法：node.style.color; node.style.fontSize
注意事项：CSS样式中属性名内有“-”的，这里省略，并把后面单词首字母大写！
2>className属性：语法：var Obj=document.getElementById("p1");
如：Obj.className="样式类名称";//可用于设置不同的样式。
2）查找并修改节点
1>使用getElectmentById（）方法找到节点元素；
2> 修改元素内容
3>修改样式：style属性或者className属性
4>修改属性：html属性
3）经典案例：
案例1：表单验证
validateForm.html
This is my HTML page.
注意事项：οnclick="return validDatas();返回值为true则提交表单，否则取消提交，即为return false时取消某事件。
案例2：读取或者修改节点信息
testDoc.html
这是一个读取以及修改节点的测试哦！
h2文本
段落文本
案例3：购物车
buy.html
购物车付款验证！
5、如何用Document增加新节点？删除节点？
1）步骤：
第一步：创建一个新元素，document.createElement("elementName");
比如：元素名可为a/input/option等；返回新创建的节点。
第二步：为新元素设置相关的数据
比如：var newNode=document.createElement("input");
newNode.type="text";
newNode.value="mary";
newNode.style.color="red";
第三步：把新节点加入树上（新元素加入文档），作为树上某个节点的子节点存在。
xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNode);//新节点放在旧节点之前
2）案例
eg：添加新节点
addNode.html
它会不断产生新节点的哦！
（为什么我的截图老被系统吃掉啊，无语！）
6、如何用Document删除节点？
1）语法：parentNode.removeChild(childNode);
注意事项：一定是从父节点删除子节点，不能直接删除子节点。
2）经典案例
案例1：
deleteNode1.html
节点是可以删除的哦
link1
案例2：联动菜单
deleteNode.html
联动菜单的测试
结果有没有被吞掉啊？系统大神！