DOM：Document Object Model 文档对象模型

该技术的出现，将标记型文档封装成了对象，并将该标记型文档的所有内容（标签，属性，文本）都封装成对象

这样就可以将对象中封装更多的属性和行为，我们操作这些对象，就可以实现静态页面具备动态的效果，比如下拉菜单

DOM技术不断的升级出现了三级模型

DOM1：将html文档封装成了对象

DOM2：在DOM1的基础上添加了一些新功能，比如对名称空间的解析

DOM3：将xml文档封装成了对象

该项技术本身跨平台，只要有具备ＤＯＭ解析器的应用程序，就可以对标记型进行DOM解析

DHTML(动态的HTML)：多个技术的综合体（html,css,dom,javascript)简称

Html:提供了标签用于封装数据，是基础，没标签什么都做不了

Css: 提供样式，对标签封装的内容进行演示的操作

Dom:将html文档封装成了对象，并将文档中的内容都封装成对象，对象中都定义了更多的 属性和行为，方便于对对象的操作

Javascript：提供逻辑性很强的程序设计语言，负责页面的行为

DOM-window

对象用于function中，事件：window.事件名 = function（）{}；

Document获取节点

    当一个html文本被dom解析后，加载进内存，就是一个dom树

每一个标签都是一个字节点，为了操作某一个节点，前提就是先要获取该节点对象

最常见的操作无非就是获取页面中的节点。

节点都具备三个属性：1节点名称（nodeName）

                    2.节点类型（nodeType）

                    3.节点值（nodeValue）

获取方法：

getElementById():通过标签的id属性值来获取该标签节点对象，改方法返回的是一个节点对象，因为一般情况id是唯一性的。不是说所有的标签都要定义id属性，这样做太麻烦

只有大的区域，获取特殊区域，为了方便于获取和操作，才定义id属性

getElementsByName():通过标签的name属性值来获取节点对象，返回的是一个节点数组

getElementsByTagName():通过标签名称获取节点对象，返回是一个节点数组

通过集合的属性来拿到页面中一系列的节点

例：window.onload = function()

{

  Var arr = document.links;//获取页面中所有带有href属性的标签对象

For(var x = 0;x<arr.length; x++)

{

   Alert(arr[x].innerText);

}

}

通过节点层次关系获取节点对象

节点之间都存在层次关系：父节点，子节点，兄弟节点（上一个兄弟节点，下一个兄弟节点）

获取表格节点:var tabNode = document.getElementById(“tabld”);

获取父节点： var node = tabNode.parentNode;

             Alert(node.nodeName+”...”+node.nodeType+”...”+node.nodeValue);

获取子节点：var node = tabNode.childNode;

            Alert(nodes.length);

获取所有节点用递归的方式获取

创建添加节点：

Var textNode = document.createTextNode(“div区域一”);

Var divNode = document.getElementById(“div_1”);

删除节点：divNode.removeChild(textNode);

对于文本的删除：divNode.innerHtml = “”;

替换节点：

思路：1获取原文本节点2创建一个新的文本节点3通过div方法完成替换

Var divNode = document.getElementById(“div_3”);

Var oldTextNode = divNode.childNode[0];

Var newTextNode = document.createTextNode(“一个新的文本”)

divNode.replaceChild(newTextNode,oldTextNode);

克隆节点：

Var divNode_4 = document.getElementById(“div_4”);

Var divNode_1 = document.getElementById(“div_1”);

Var copy_4 = divNode_4.cloneNode();

divNode_1.replaceNode(divNode_4);

DOM：Document Object Model 文档对象模型

该技术的出现，将标记型文档封装成了对象，并将该标记型文档的所有内容（标签，属性，文本）都封装成对象

这样就可以将对象中封装更多的属性和行为，我们操作这些对象，就可以实现静态页面具备动态的效果，比如下拉菜单

DOM技术不断的升级出现了三级模型

DOM1：将html文档封装成了对象

DOM2：在DOM1的基础上添加了一些新功能，比如对名称空间的解析

DOM3：将xml文档封装成了对象

该项技术本身跨平台，只要有具备ＤＯＭ解析器的应用程序，就可以对标记型进行DOM解析

DHTML(动态的HTML)：多个技术的综合体（html,css,dom,javascript)简称

Html:提供了标签用于封装数据，是基础，没标签什么都做不了

Css: 提供样式，对标签封装的内容进行演示的操作

Dom:将html文档封装成了对象，并将文档中的内容都封装成对象，对象中都定义了更多的 属性和行为，方便于对对象的操作

Javascript：提供逻辑性很强的程序设计语言，负责页面的行为

DOM-window

对象用于function中，事件：window.事件名 = function（）{}；

Document获取节点

    当一个html文本被dom解析后，加载进内存，就是一个dom树

每一个标签都是一个字节点，为了操作某一个节点，前提就是先要获取该节点对象

最常见的操作无非就是获取页面中的节点。

节点都具备三个属性：1节点名称（nodeName）

                    2.节点类型（nodeType）

                    3.节点值（nodeValue）

获取方法：

getElementById():通过标签的id属性值来获取该标签节点对象，改方法返回的是一个节点对象，因为一般情况id是唯一性的。不是说所有的标签都要定义id属性，这样做太麻烦

只有大的区域，获取特殊区域，为了方便于获取和操作，才定义id属性

getElementsByName():通过标签的name属性值来获取节点对象，返回的是一个节点数组

getElementsByTagName():通过标签名称获取节点对象，返回是一个节点数组

通过集合的属性来拿到页面中一系列的节点

例：window.onload = function()

{

  Var arr = document.links;//获取页面中所有带有href属性的标签对象

For(var x = 0;x<arr.length; x++)

{

   Alert(arr[x].innerText);

}

}

通过节点层次关系获取节点对象

节点之间都存在层次关系：父节点，子节点，兄弟节点（上一个兄弟节点，下一个兄弟节点）

获取表格节点:var tabNode = document.getElementById(“tabld”);

获取父节点： var node = tabNode.parentNode;

             Alert(node.nodeName+”...”+node.nodeType+”...”+node.nodeValue);

获取子节点：var node = tabNode.childNode;

            Alert(nodes.length);

获取所有节点用递归的方式获取

创建添加节点：

Var textNode = document.createTextNode(“div区域一”);

Var divNode = document.getElementById(“div_1”);

删除节点：divNode.removeChild(textNode);

对于文本的删除：divNode.innerHtml = “”;

替换节点：

思路：1获取原文本节点2创建一个新的文本节点3通过div方法完成替换

Var divNode = document.getElementById(“div_3”);

Var oldTextNode = divNode.childNode[0];

Var newTextNode = document.createTextNode(“一个新的文本”)

divNode.replaceChild(newTextNode,oldTextNode);

克隆节点：

Var divNode_4 = document.getElementById(“div_4”);

Var divNode_1 = document.getElementById(“div_1”);

Var copy_4 = divNode_4.cloneNode();

divNode_1.replaceNode(divNode_4);