DOM（文档对象模型）

DOM：用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签，文本，属性等）都封装成对象。

封装成对象的目的是为了更为方便的操作这些文档以及文档中的内容。

文档对象模型

文档：标记型文档

对象：封装了属性和行为的实例，可以被直接调用。

模型：所有标记文档都具备一些共性特征的一个体现。

            标记型文档（标签，属性，标签中封装的数据）。

只要是标记型文档，DOM这种技术都可以对其进行操作。

常见的标记文档：HTML  XML

DOM这种技术是如何对标记型文档进行操作的呢？

要操作标记型文档必须对其进行解析。

DOM技术的解析方式：将标记型文档解析成一棵DOM树，并将树中的内容都封装成节点对象。

注意：这个DOM解析方式的好处：可以对树种的任意节点进行操作，比如：增删改查。

弊端：这种解析需要将整个标记型文档加载进内存。意味着如果标记型文档的体积很大，较为浪费内存空间。

document对象的演示

   该对象将标记型文档进行封装。

   该对象的作用，是对可以标记型文档进行操作。

   最常见的操作就是，想要实现动态效果，需要对节点操作，那么先要获取这个节点。

   要想获取节点。，必须要先获取到节点所属的文档对象docoment。

   所以document对象最常见的操作就是获取页面中的节点。

 节点都有三个必备的属性。节点名称，节点类型，节点值。

常见节点有三种：

1，标签型节点：类型1

2，属性节点：类型2

3，文本节点：类型3

标签型节点是没有值的，属性和文本节点都是可以有值得。 

 获取节点的方法体现:
1.getElementById():通过标签的id确性值获取该标签节点。返回该标签节点.
2.getElementsByName ():通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
3.getElementsByTagName():通过标签名获取节点。因为标签名会重复.所以返回的是一个数组。
凡是带s返回的都是数组。

例如:

1.获取文本框节点演示getElementsByName方法

function getNodeDemo(){

var userNode = document.getElementsByName("user")[0];

alert(userNode.value)

}

2.获取超链接节点对象。演示getElementsByTagName方法。

function getNodeDemo1(){

//直接用标签名获取。

(1)var nodes = document.getElementsByTagName("a");

alert(nodes.length);

alert(nodes[0].innerHTML);

(2)for(var x =0;x<nodes.length;x++){

alert(nodes[x].innerHTML);

node[x].target = "_blank";

}

}

创建文本节点

1.创建一个文本节点。

2.获取div节点。

3.将文本节点添加到div节点中。

（1）创建节点。使用document中的createTextNode方法。

var oTextNode = document.createTextNode方法。

（2）获取div节点

var oDivNode = document.getElementById("div");

(3)将文本节点添加到div节点中

oDivNode.appendChild(oTextNode);

4.在div中创建并添加一个按钮节点。

  1.创建一个按钮。

function crtAndAdd(){

var oButNode = document.createElement("input");

oButNode.type = "button";

oButNode.value = "一个新按钮";

  2.获取divjied。

var oDivNode = document.getElementById("div");

  3.将按钮节点添加到div节点中。

oDivNode.appendChild(oButNode);

}

通过另一种方式完成添加节点。

function crtAndAdd1(){

//其实是使用了容器标签中的一个属性。innerHTML.

//这个属性可以设置html文本。

  获取div节点

var oDiNode = document.getElementById("div");

oDivNode.innerHTML = "<input type='button' value='有个按钮'>";

oDivNode.innerHTML = "<a href='http://www.163.com'>有个超链接</a>";

}

5.用一个div-1节点替换另一个div-3节点。

function updateNode(){

/*

获取div-1和div-3.

使用replaceNode进行替换。

*/

var oDivNode_1 = document.getElementById(''div-1');

var oDidNode_3 = document.getElementById('div-3');

  oDivNode_1.replaceNoMe(oDidNode_3);

//建议使用replaceChild方法.

oDivNode_1.parentNode.replaceChild(oDivNode_3，oDivNode_1);

}