html dom 对象 window对象 document对象,Html页面Dom对象之Document

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象集合

集合描述

提供对文档中所有 HTML 元素的访问。

返回对文档中所有 Anchor 对象的引用。

applets

返回对文档中所有 Applet 对象的引用。

返回对文档中所有 Form 对象引用。

返回对文档中所有 Image 对象引用。

返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性描述

body

提供对

元素的直接访问。

对于定义了框架集的文档，该属性引用最外层的

。

设置或返回与当前文档有关的所有 cookie。

返回当前文档的域名。

返回文档被最后修改的日期和时间。

返回载入当前文档的文档的 URL。

返回当前文档的标题。

返回当前文档的 URL。

Document 对象方法

方法描述

关闭用 document.open() 方法打开的输出流，并显示选定的数据。

返回对拥有指定 id 的第一个对象的引用。

打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

向文档写 HTML 表达式 或 JavaScript 代码。

等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

一：Dom模型的全称--->Document Object Model

---->文档对象模型

二WEB页面的html文档，document就是根节点。其他的子对象就是子节点

三节点类型    (1)元素节点  例子：

(2)文本节点  例子：尚晓飞   文本节点

(3)属性节点  例子： 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)