深入学习DOM模型基础

本文和大家重点讨论一下DOM模型的概念和用法，DOM的全称是DocumentObjetModule即文档对象模型，在Web上把页面的HTML表现看作一个有树型结构的对象模型，可以通过一些操作接口来对Document的每一个子对象节点进行访问和操作，这就为Ajax在不刷新页面的情况下改变页面显示数据成为了可能。

十载的贵港网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整贵港建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“贵港网站设计”,“贵港网站推广”以来，每个客户项目都认真落实执行。

DOM模型基础

DOM的全称是DocumentObjetModule即文档对象模型，在Web上把页面的HTML表现看作一个有树型结构的对象模型，可以通过一些操作接口来对Document的每一个子对象节点进行访问和操作，这就为Ajax在不刷新页面的情况下改变页面显示数据成为了可能。

先来看一个简单的HTML片段：

 
 
 
  
  
   
  
  
  DOM模型 
  
  
  DOM模型节点

在这个HTML页面中，只有一个Label控件，可以根据节点的层次画出这个页面的层次结构图。

通常来说，在HTML文档中的每一个标签都表示一个对象节点。而像上面这样的标签是我们的HTML元素节点，而标签中的title=“title1”是一个属性节点，而“DOM模型节点”这样的文本构成了一个文本节点。

那么，怎么才能对DOM模型中的一个节点进行操作呢，首先要做的是对这个节点进行引用。

1．对文档节点的引用

下面列举一些常用的对文档元素节点的引用方法。

◆document.GetElementById()方法直接引用节点，这个是我们在实际应用中最常用的一种方法，在HTML文档中每一个元素节点都可以定义一个唯一的id属性，然后使用GetElementById方法就可以准确地得到对这个节点的引用。

 
 
 
  
  
   
  
  
  DOM模型 
  
  
  Dom模型节点

HTML文档中每一个元素节点都有innerHTML这个属性，我们通过对这个属性的访问可以获取或者设置这个元素节点标签内的HTML内容，自IE4.0以来越来越多的浏览器支持了这一属性，通过使用这一属性使许多繁杂的动态生成HTML的工作变得简单。需要注意的是，我们如果对单标记标签，如这一类标签的innerHTML属性读取会得到一个空字符串，而写将会得到一个错误。

此外document对象还有一个类似的方法GetElementByName，我们可以通过form标签的name属性对表单元素节点进行引用，但返回的通常是一个数组，因为表单中的节点name属性的值不是唯一的，可以通过索引器得到每一个元素的引用。

◆document.getElementByTagName()

可以得到一个指定标记名称节点引用的数组集合，可以通过索引器对每个节点的引用进行访问。

var_div1=document.getElementById("div1");
//获取Div1节点var_sp3=document.createElement("span");
//创建一个元素节点_sp3.id="span3";
//将新节点的属性id设为"span3"var_txt1=document.createTextNode("节点3");
//创建一个文本节点_sp3.appendChild(_txt1);
//将文本节点添加到新元素节点下_div1.appendChild(_sp3);
//将元素节点添加到节点Div1下
//此时界面显示节点1节点2节点3var_sp4=_sp3.cloneNode(true);
//将元素节点复制_sp4.id="span4";
//为新复制的节点设置id属性var_txt2=document.createTextNode("节点4");
//新建一个文本节点_sp4.replaceChild(_txt2,_sp4.childNodes[0]);
//将节点_sp4的文本节点替换_sp3.parentNode.insertBefore(_sp4,_sp3);
//将节点_sp4添加到节点_sp3之前
//此时界面显示节点1节点2节点4节点3_sp4.parentNode.removeChild(_sp4);
//删除节点_sp4

vartab=document.getElementById("tab");
//得到对表格的引用varrow2=tab.insertRow(2);
//新增第三行varcell20=row2.insertCell(0);
//为第三行添加第一个单元格cell20.innerHTML="20";
//varcell21=row2.insertCell(1);//为第三行添加第二个单元格cell21.innerHTML="21";
tab.rows[1].deleteCell(1);//删除第二行第二列tab.deleteRow(1);
//删除第二行

var_div1=document.getElementById("div1");
//得到父节点var_sp1=document.createElement("span");
//创建span节点_sp1.id="span1";
var_txt1=document.createTextNode("节点1");
//创建文本节点_sp1.appendChild(_txt1);
//将文本加入到span节点下_div1.appendChild(_sp1);
//将span节点加入到父节点下