文档对象模型：
在Web上把页面的HTML表现看作一个有树型结构的对象模型，可以通过一些操作接口来对Document的每一个子对象节点进行访问和操作，这就为Ajax在不刷新页面的情况下改变页面显示数据成为了可能。
Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。
document.GetElementById()方法直接引用节点，这个是我们在实际应用中最常用的一种方法，在HTML文档中每一个元素节点都可以定义一个唯一的id属性，然后使用GetElementById方法就可以准确地得到对这个节点的引用。<div id="Div1">
HTML文档中每一个元素节点都有innerHTML这个属性，我们通过对这个属性的访问可以获取或者设置这个元素节点标签内的HTML内容.(需要注意的是，我们如果对单标记标签，如<img>这一类标签的innerHTML属性读取会得到一个空字符串，而写将会得到一个错误。)
此外document对象还有一个类似的方法GetElementByName，我们可以通过form标签的name属性对表单元素节点进行引用，但返回的通常是一个数组，因为表单中的节点name属性的值不是唯一的，可以通过索引器得到每一个元素的引用。
·document.getElementByTagName()
可以得到一个指定标记名称节点引用的数组集合，可以通过索引器对每个节点的引用进行访问。
<body>
<div id="Div1">节点1</div>
<div id="Div2">节点2</div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--var _divs = document.getElementsByTagName("div");
for(var i = 0; i < _divs.length;i++)
alert(_divs[i].innerHTML);//依次显示了"节点1"和"节点2"-->
</script>
这个方法通常在要对整个文档的某一类元素节点进行操作时用到，比如说为全部的图片添加一个鼠标掠过时发生位移的效果，这时就可以通过这个方法对文档所有的节点进行引用。
·parentNode和childNodes，可以通过访问这两个属性获得当前节点的父节点和子节点集合的引用。
<body>
<div id="Div1">
<span id="sp1">节点1</span>
<span id="sp2">节点2</span>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--var _nod = document.getElementById("sp1");//得到对sp1的引用var _pNod = _nod.parentNode;//得到对Div1的引用alert(_pNod.innerHTML);//显示父节点内容
for(var i = 0; i < _pNod.childNodes.length;i++)//循环子节点alert(_pNod.childNodes[i].innerHTML);//依次显示了每一个节点的内容-->
</script>
2．文档元素节点的操作
得到一个文档元素节点的引用之后，就可以对这个节点进行一些控制和操作，以达到对HTML显示进行更新的目的。
（1） DOM标准操作，在DOM模型中定义了一套能够对文档结构进行更新的方法，我们可以通过这些方法创建文档节点，并将节点添加到文档中或者从文档中删除。
·document.createElement(elmName) 根据标记名称创建一个节点。
·document.createTextNode(text) 根据一段文本创建一个文本节点。
·node.appendChild(childNode) 将节点添加到一个节点下子节点的末尾。
·node.insertBefor(newNode,oldNode) 将节点插入到指定节点之前，newNode为新节点，oldNode为指定的节点，此节点必须为node的已经存在的一个子节点。
·node.Replace(newNode,oldNode) 用新节点取代一个旧节点，与上面方法类似，oldNode必须为node的一个已近存在的子节点。
·node.cloneNode(cloneChild) 复制一个节点，参数cloneChild是一个布尔值，表示是否复制子节点。
·node.removeChild(childNode) 删除一个子节点，需要注意的是该方法将返回被删除节点的引用。
var _div1 = document.getElementById("div1");//获取Div1节点
var _sp3 = document.createElement("span");//创建一个<span>元素节点_sp3.id="span3";//将新节点的属性id设为"span3"
var _txt1 = document.createTextNode("节点3");//创建一个文本节点_sp3.appendChild(_txt1);//将文本节点添加到新元素节点下
_div1.appendChild(_sp3);//将元素节点添加到节点Div1下//此时界面显示 节点1 节点2 节点3
var _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
（2）Table的操作
·tab.insertRow(idx) 在表格指定索引位置添加一行空行，idx为索引位置。
·tab.deleteRow(idx) 在表格指定索引位置删除一行。
·row.insertCell(idx) 在行的指定索引位置添加一个空单元格。
·row.deleteCell(idx) 在行的指定位置删除一个单元格。
可以通过document.createElement(“table”)创建一个表格，通过索引器可以访问talbe的各个行和单元格，如tab.rows[1].cells[3]，这样我们就能得到表格的第二行第四列的引用，我们可以向操作普通节点一样来对这个单元格对象进行操作。
var tab = document.getElementById("tab");//得到对表格的引用
var row2 = tab.insertRow(2);//新增第三行
var cell20 = row2.insertCell(0);//为第三行添加第一个单元格cell20.innerHTML = "20";//
var cell21 = row2.insertCell(1);//为第三行添加第二个单元格cell21.innerHTML = "21";
tab.rows[1].deleteCell(1);//删除第二行第二列
tab.deleteRow(1);//删除第二行
3）innerHTML 的灵活使用
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节点加入到父节点下
这样写我们通过六行代码完成了功能的实现，下面来看使用innerHTML的情况：
var _div2 = document.getElementById("div2");
_div2.innerHTML = "<span id='span1'>节点2</span>";
可见使用innerHTML属性，可以更为方便高效地改变文档结构，这使得在大多数情况下都使用innerHTML来操作文档，但是标准的DOM方法在特定的环境下也有不可取代的作用，在编码时要灵活判断，选择合适的方法解决问题。
分享到：
相关推荐
### BOM和DOM模型 #### 一、BOM与DOM概览 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。 ##### BOM：浏览器对象模型...
DOM文档对象模型介绍,DOM文档对象模型介绍
**DOM文档对象模型** DOM（Document Object Model）是W3C组织制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方式，并定义了访问和操作这些文档的标准方法。DOM将文档视为一棵由节点组成的树，每个节点...
### JavaScript文档对象模型(DOM)详解 #### 一、引言 文档对象模型（Document Object Model，简称DOM），是W3C为了统一不同浏览器环境下的文档处理方式而制定的一套标准。这一标准的诞生，旨在解决早期浏览器混战...
### W3C DOM模型参考手册知识点详解 #### 一、前言 本手册是一份针对W3C DOM（文档对象模型）模型的详尽参考指南，重点介绍了Gecko引擎所支持的DOM API特性。这份资料最初来自Mozilla开发网站，但由于各种原因，...
总的来说，2010版的"DOM文档对象模型"手册是Web开发者的宝贵资源，它详尽地解释了DOM的各个方面，无论你是新手还是经验丰富的开发者，都能从中受益匪浅。通过深入理解和熟练运用DOM，你可以更好地构建动态、交互性强...
**DOM对象模型** DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一个标准，用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构，使得JavaScript或其他...
Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。
**W3C标准文档——DOM模型对象详解** 在Web开发领域，W3C（World Wide Web Consortium）是一个至关重要的组织，它制定了一系列的开放标准，包括HTML、CSS、XML以及我们今天要讨论的DOM（Document Object Model）。...
通过阅读《常用手册 DOM文档对象模型》，开发者不仅可以深入理解DOM的基本概念，还能掌握实际操作DOM的技巧，从而提高网页和应用程序的交互性和动态性。此外，对于学习前端开发和Web应用的人员来说，这是一份非常...
总结一下，DOM模型是描述HTML或XML文档结构的数据模型，而Prototype是一个JavaScript库，它提供了一套强大的工具来操作DOM，并实现了面向对象编程的特性。通过学习Prototype，开发者可以更高效地进行前端开发，提升...
这是一个FLV视屏文件，介绍了JavaScript中dom的知识以及相关应用。
**DOM文档对象模型** DOM（Document Object Model）是万维网联盟（W3C）制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方法，并允许编程语言与这些文档进行交互。DOM将整个文档视为一个由节点组成的树形...
Virtual DOM 是一个 JavaScript DOM 模型，支持元素创建，区别计算和分支操作，提供高效的渲染。代码示例var h = require('virtual-dom/h'); var diff = require('virtual-dom/diff'); var patch = require...
**手写DOM事件模型** 在Web开发中，DOM（Document Object Model）事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件，如点击、鼠标移动、键盘输入等。本篇文章将深入...
JavaScript 操作 HTML DOM（文档对象模型）是网页动态交互的核心技术。DOM 是一种标准，它允许编程语言（如JavaScript）来访问和修改HTML或XML文档的结构、样式和内容。以下是一些关于JavaScript操作DOM的基本知识点...
arcgis中DEM+DOM导出地形模型导入3dmax中的素材，参考文章 arcgis中dem转模型导入3dmax https://blog.csdn.net/yilvyangguang520/article/details/143231058
### 文档对象模型（DOM）的关键知识点 #### DOM 基本概念 文档对象模型（DOM，Document Object Model）是一种跨平台和语言中立的接口，使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。DOM 主要用于...