Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象集合
| 集合 | 描述 |
|---|---|
| all[] | 提供对文档中所有 HTML 元素的访问。 |
| anchors[] | 返回对文档中所有 Anchor 对象的引用。 |
| applets | 返回对文档中所有 Applet 对象的引用。 |
| forms[] | 返回对文档中所有 Form 对象引用。 |
| images[] | 返回对文档中所有 Image 对象引用。 |
| links[] | 返回对文档中所有 Area 和 Link 对象引用。 |
Document 对象属性
| 属性 | 描述 |
|---|---|
| body |
提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。 |
| cookie | 设置或返回与当前文档有关的所有 cookie。 |
| domain | 返回当前文档的域名。 |
| lastModified | 返回文档被最后修改的日期和时间。 |
| referrer | 返回载入当前文档的文档的 URL。 |
| title | 返回当前文档的标题。 |
| URL | 返回当前文档的 URL。 |
Document 对象方法
| 方法 | 描述 |
|---|---|
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName() | 返回带有指定名称的对象集合。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
一：Dom模型的全称--->Document Object Model
---->文档对象模型
二WEB页面的html文档，document就是根节点。其他的子对象就是子节点
三节点类型 （1）元素节点 例子：<input>
（2）文本节点 例子：尚晓飞 文本节点
（3）属性节点 例子：<input type="shang"/> shang 就是属性节点
四获取元素节点的方法
【1】直接获取节点：
（1）获取指定的id属性指定值的节点-->唯一
var name=document.getElementById("uname");
（2）获取指定的name属性值的节点--->返回的是一组
var ad=document.getElementsByName("unameName");
（3）获取指定元素名的节点--->返回的是一组
var aaa=document.getElementsByTagName("input");
【2】间接获取节点
（1）通过父节点，获取子节点。
//获取父节点
var father=document.getElementById("showDiv");
//获取该父节点的子节点node集合
var sonarray=father.childNodes;
alert(array[2].nodeValue);
（2）通过字节点，获取父节点
//通过子节点，获取父节点
var son=document.getElementById("a");
var fathera=son.parentNode;
alert(fathera.id);
(3)通过兄弟节点，获取节点
//兄弟节点
var borther2=document.getElementById("realname");
var borther1=borther2.previousSibling;//上一个兄弟节点
var borther3=borther2.nextSibling;//下一个兄弟节点
while(borther1.nodeType!=1){
borther1=borther1.previousSibling;
}
alert(borther1.value);
注意：节点的三个属性 ---->nodeName
----->nodeValue
----->nodeType
四：处理属性节点
（1）元素节点.属性----->获取属性值，也可以为属性重新赋值
（2）getAttribute(key)--->获取key属性的值
setAttribute(key,value)--->为该节点设置属性，及属性的值
五：处理文本节点
（1）获取一个节点内的文本，一般使用innerHtml
(2)innerHtml不局限操作一个节点,而是可以使用Html片段直接填充页面，或直接获取Html片段。大大提高开发的灵活性
例子： function innerhtml(){
alert(document.getElementById("showDiv").innerHTML);
}
六 改变文档的层次结构
（1）创建元素节点document.creatElement
var input=document.createElement("input");
input.type="text";
input.id="123";
input.value="天下无双";
（2）通过父节点，添加到父节点里。parentNode.appendChild
var father=document.getElementById("showDiv");
father.appendChild(input);
(3)插入节点 parentNode.insertBefore(newnode,beforenode)
var ab=document.getElementById("a");
father.insertBefore(input,ab);
(4)覆盖节点 parentNode.replaceChild（newnode,oldnode）
旧节点必须存在，否则发生异常
father.replaceChild(input,ab);
（5）移除某个节点parentNode.removeChild(childNode)
father.removeChild(ab)
Html页面Dom对象之Document