好开发者撷取JavaScript之 -文件格式第一类数学模型(DOM)：DOM —–Document Object Model
文件格式第一类数学模型（DOM）是两个能让流程和JAVA静态出访和预览文件格式文本、内部结构和式样的词汇网络平台， 提供更多了国际标准的 HTML 和 XML 第一类集， 并有两个国际标准的USB来出访并操
作它。 ”它使开发者能很方便快捷地出访 HTML 或 XML 网页上的国际标准模块，如原素、JSP、JAVA之类东开经相应的处置。DOM 国际标准面世以后，建立后端 Web 插件都要采用
Java Applet 或 ActiveX 等繁杂的模块， 那时如前所述 DOM 规范化， 在全力支持 DOM 的插件自然环境中，Web开发者能很方便快捷、 安全可靠地建立多元化、 采用方便的Web插件。 这儿只探讨
HTML DOM。
一、DOM简述
1、文件格式第一类数学模型表述了 JavaScript 能展开操作方式的插件，叙述了文件格式第一类的方法论内部结构及各机能组件的国际圣克雷潘。主要就主要包括如下表所示各方面：
1）核心理念 JavaScript 词汇参照（正则表达式、操作方式符、基本上句子、表达式等）
2）与正则表达式有关的核心理念第一类（String、Array、Math、Date 等数据类型）
3）插件第一类（window、location、history、navigator 等）
4）文件格式第一类（document、images、form 等）
2、JavaScript 中三种主要就的第一类数学模型
1）插件第一类数学模型 （BOM）
提供更多了出访插件各个机能组件，如插件窗口本身、浏览历史等的操作方式方法。（见前一篇）
2）文件格式第一类数学模型 （DOM）
提供更多了出访插件窗口文本，如文件格式、图片等各种 HTML 原素以及这些原素包含的文本的操作方式方法。
在早期的插件版本中，插件第一类数学模型和文件格式第一类数学模型之间没有很大的区别。
二、主要就作用
主要就用来将标记型文件格式封装成第一类，并将标记型文件格式中的所有文本(标签、文本、属性等)都封装成第一类。
文件格式：标记型文件格式—-标签、文本、属性等
第一类： 封装了属性和方法，能调用里面的属性和方法。
数学模型：所有标记型文件格式都具备一些共性特征的体现。
三、一些重要的概念（主要就DOM树）
1、DOM树数学模型：
DOM解析将按照标签的层次体现出标签的所属，形成两个树状内部结构—DOM树。
标签、属性和文本文本称为节点(node)，节点也称为第一类，标签通常也称为网页中的原素(element)
1）DOM技术的核心理念内容：
把标记文件格式变成第一类树，通过对树中的第一类展开操作方式，实现对文件格式文本的操纵。
2）DOM解析的方式：
将标记文件格式解析成一棵DOM第一类树，并将树中的文本都封装成第一类。—-这些动作由插件帮我们完成
3）DOM解析的好处：
能对树中的节点展开任意的操作方式：增删改查
4）DOM解析的弊端：
这种解析需要将整个标记型文件格式加载进内存，因此，如果标记型文件格式很，耗内存。
2、DHTML：静态的HTML，它不是一门词汇，是多项技术综合体的简称。
以HTML+CSS的方式做的是静态网页，要想变成静态的，要在此基础上加入JS和DOM技术。因此，DHTML包含：HTML+CSS+JS+DOM
3、HTML:提供更多标签，封装数据
4、CSS：提供更多式样属性，对数据的显示式样展开表述
5、DOM: 把标记型文件格式封装成第一类，供JS操纵
6、JS: 提供更多流程设计词汇，通过DOM来操纵文件格式文本和显示式样
节点都具备三个必备属性：节点名称、节点类型、节点值。
节点的类型： 标签节点的类型值为1，属性节点的类型值为2，文本节点的类型值为3
节点值：标签型节点是null,没有值的。只有属性和文本节点才能有值。
1、getEl
function getNodeDemo1(){
//var divNode= document.getElementById(“divid1”);
var divNode= document.getElementById(“divid2”);
//alert(divNode.nodeName+”,”+divNode.nodeType+”,”+divNode.nodeValue);
var txtHTML = divNode.innerHTML;
var txt = divNode.innerText;
alert(txtHTML+”,”+txt);
//更改div节点中的文本文本
//divNode.innerHTML=”我把它改成湖南城市学院了….”;
divNode.innerHTML=”我把它改成湖南城市学院了….”.fontcolor(“red”);
}
—-注意，是集合
function getNodeDemo2(){
var node = document.getElementsByName(“userName”);
//alert(node.nodeName);//undefined
//alert(node);//因为是数组，所以是集合
//alert(node[0].nodeName);//INPUT
//alert(node.length);//1
//alert(node[0].nodeType);//1
alert(node[0].nodeValue);//标签型节点的value都是null
//alert(node[0].getAttribute(“value”));
}
function getNodeDemo3(){
var nodes = document.getElementsByTagName(“a”);
//alert(nodes.length);//5
<a>标签容器封装的文本：城市首页
//给网页当中的所有<a>标签添加 target属性 //给第一类添加属性并赋值时，若属性不存在则是添加，若存在则是修改
for(var x=0; x<nodes.length; x++){
//alert(nodes[x].innerHTML);
nodes[x].target = “_blank”;
}
}
function getNodeDemo4(){
var divNode = document.getElementById(“mylink”);
var nodes =
divNode.getElementsByTagName(”for(var x=0; x<nodes.length; x++){
nodes[x].target = “_blank”;
}
}
五、利用节点的层次关系
父节点：parentNode属性
子节点：childNodes集合, firstChild() , lastChild()
上两个兄弟节点：previousSibling属性
下两个兄弟节点：nextSibling属性
var tabNode = document.getElementById(“tableid1”);
var node = tabNode.parentNode;
var nodes = tabNode.childNodes;
注意：1）如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，而低版本IE会直接越过—–不光是<table>节点，其它节点也一样
2）表格的,<table>标签和<tr>标签中间，其实还隐藏着两个<tbody>标签—-表格体
var node =
tabNode.previousSibling.previousSibling;//上两个兄弟alert(node.nodeName);//div
var node =
tabNode.nextSibling.nextSibling;//上两个兄弟alert(node.nodeName);//dl
六、DOM中的一些操作方式
1、建立文本第一类
function createAndAdd1(){
//1利用createTextNode()建立两个文本第一类
var oTextNode = document.createTextNode(“新的文本，很好！”);
var divNode = document.getElementById(“div1”);
//3把oTextNode添加成div第一类的孩子
divNode.appendChild(oTextNode);
}
2、建立标签第一类
function createAndAdd2(){
//1利用createElement()建立两个标签第一类
var oBtnNode = document.createElement(“input”);
oBtnNode.type=”button”;
oBtnNode.value=”新建的按钮”;
var divNode = document.getElementById(“div1”);
//3把oTextNode添加成div第一类的孩子
divNode.appendChild(oBtnNode);
}
3、直接利用容器标签中的两个属性：innerHTML—–本质上改该标签容器中的“html代码”，不是我们认为的第一类树的操作方式
function createAndAdd3(){
var divNode = document.getElementById(“div1”);
//divNode.innerHTML=”<input type=button value=两个新按钮/> “;
divNode.innerHTML=”<a href=http://********>两个超链接</a> “;
}
4、删除节点 利用标签容器第一类中的removeChild()和removeNode(),前者删子节点，后者删自己—-不建议采用
function deleteNode(){
var oDivNode = document.getElementById(“div2”);
//自杀式—-不建议
//oDivNode.removeNode();//默认false,不删除子节点集合
//oDivNode.removeNode(true);//true,删除子节点集合
//通过父节点去删除它的孩子
oDivNode.parentNode.removeChild(oDivNode);
}
5、替换节点(移除替换) 利用标签容器第一类中的replaceChild()和replaceNode(),前者替换子节点，后者替换自己—-不建议采用
function updateNode(){
var oDivNode = document.getElementById(“div2”);
var oDivNode4 = document.getElementById(“div4”);
//自杀式—-不建议
//oDivNode.replaceNode(oDivNode4);
//通过父节点去替换它的孩子：用oDivNode4去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);
}
6、替换节点(克隆替换)
function updateNode2(){
var oDivNode = document.getElementById(“div2”);
var oDivNode4 = document.getElementById(“div4”);
var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆两个第一类,默认参数为false。参数为true时，连子节点一起克隆
//通过父节点去替换它的孩子：用oDivNode4_2去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);
}
