DOM(Domcument Object Model)
- 是万维网联盟（W3C）的标准。
- 定义了访问html和xml文档的标准："文档对象模型(DOM）是中立平台和语言的接口。允许程序和脚本动态的访问和更新文档内容、结构和样式。"
分三部分：
- DOM——针对任何文档的标准模型
- XML DOM——针对XML文档
- HTML DOM——针对HTML
XML DOM
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
HTML DOM
HTML的标准对象模型，标准编程接口，W3C标准。
定义了所有html元素的对象和属性。以及访问他们的方法。（是关于获取、修改、添加或删除html的标准）
DOM节点
HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM方法
——可以在节点（html）上执行的动作。
编程接口
通过JavaScript（及其他编程语言）对齐访问。
元素为对象，编程接口则是对象方法和属性。
方法：内够执行的动作。（添加或修改元素）
属性：能够获取或设置的值。（节点名称或内容）。
___________________________
getElementById()方法:返回带有指定id的元素。
___________________________
HTML DOM对象-方法和属性
一些常用的 HTML DOM 方法：
-
getElementById(id) - 获取带有指定 id 的节点（元素）
-
appendChild(node) - 插入新的子节点（元素）
-
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性： -
innerHTML - 节点（元素）的文本值
+parentNode - 节点（元素）的父节点 -
childNodes - 节点（元素）的子节点
-
attributes - 节点（元素）的属性节点
DOM对象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的 |
属性
innerHTML属性：获取元素内容
//获取id="intro"的<p>元素的innerHTML
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
nodeName属性：规定节点名称
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
nodeValue属性：规定节点的值。 - 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
获取值实例
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
nodeType属性：返回类型。
重要节点类型：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
访问
方式（1）：getElementById() 方法
语法：
node.getElementById("id");
实例：
document.getElementById("intro");//id="intro"的元素
方式（2）：getElementsByTagName() 方法
语法：
node.getElementsByTagName("tagname");
实例：
document.getElementsByTagName("p");//获取文档所有<p>元素的列表
document.getElementById("mian").getElementByTagName("p");
方式（3）： getElementsByClassName()方法
语法：
docuement.getElementByClassName("intro");//带有相同类名的所有HTML元素（包含class="intro"的所有元素列表）
注释：在Inter Explorer 5，6，7，8中无效
修改
修改元素
- 改变html内容
- 改变css样式
- 改变html属性
- 创建新的html元素
- 删除已有的html元素
- 改变事件（处理程序）
创建内容(改变一个
元素的 HTML 内容)
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
改变样式
<html>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
添加新元素（必须先创建该元素（接点），然后把它追加都爱已有的元素上）
<div id="d1">
<p id="p1">This is a prograph.</p>
<p id="p2">This is another pargraph.</p>
</div>
<script>
var para= document.createElement("p");
var node= document.createTextNode("This is new.");
para.appendChild(node);
var element = docuemt.getElementById("d1");
element.appendChild(para);
</script>
/
/
var para=document.createElement("p");
使用事件
- 在元素上点击
- 加载页面
- 改变输入字段
//按钮点击时改变<dody>元素的背景色
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color"/>
</body>
</html>
/
/
/函数
<html>
<body>
<script>
function ChangeBackground(){
dovument.body.style.backgroundColor="lavender"
}
</sctript>
<input type="button" onclick="ChangeBackground()" value="Change background color" />
</body>
</html>