下载文档原格式
什么是DOM及DOM操作？什么是 DOM ?DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝，定义了访问和操作html的⽂档的标准。
W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝，它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。
总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。
DOM 分层节点DOM的分层节点⼀般被称作是DOM树，树中的所有节点都可以通过脚本语⾔例如js进⾏访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页⾯就是⽤分层节点图表⽰的。
整个⽂档是⼀个⽂档节点，就想是树的根⼀样。
每个HTML元素都是元素节点。
HTML元素内的⽂本就是⽂本节点。
每个HTML属性时属性节点。
当咱们访问⼀个web页⾯时，浏览器会解析每个HTML元素，创建了HTML⽂档的虚拟结构，并将其保存在内存中。
接着，HTML页⾯被转换成树状结构，每个HTML元素成为⼀个叶⼦节点，连接到⽗分⽀。
考虑以下 Html 结构：<!DOCTYPE html><html lang="en"><head><title>A super simple title!</title></head><body><h1>A super simple web page!</h1></body></html>在这个结构的顶部有⼀个document，也称为根元素，它包含另⼀个元素：html。
html元素包含⼀个head，⽽ head ⼜有⼀个title。
然后body 包含⼀个h1。
每个HTML元素都由特定类型（也称为接⼝）表⽰，并且可能包含⽂本或其他嵌套元素：document (HTMLDocument)|| --> html (HTMLHtmlElement)|| --> head (HtmlHeadElement)| || | --> title (HtmlTitleElement)| | --> text: "A super simple title!"|| --> body (HtmlBodyElement)| || | --> h1 (HTMLHeadingElement)| | --> text: "A super simple web page!"每个HTML元素都来⾃Element，但其中很⼤⼀部分都是专⽤的。
一、DTM（Digital Terrain Model）数字地面模型是利用一个任意坐标系中大量选择的已知x、y、z的坐标点对连续地面的一个简单的统计表示，或者说，DTM就是地形表面形态属性信息的数字表达，是带有空间位置特征和地形属性特征的数字描述。
地形表面形态的属性信息一般包括高程、坡度、坡向等。
数字地形模型（DTM, Digital Terrain Model）最初是为了高速公路的自动设计提出来的（Miller，1956）。
此后，它被用于各种线路选线（铁路、公路、输电线）的设计以及各种工程的面积、体积、坡度计算，任意两点间的通视判断及任意断面图绘制。
在测绘中被用于绘制等高线、坡度坡向图、立体透视图，制作正射影像图以及地图的修测。
在遥感应用中可作为分类的辅助数据。
它还是的基础数据，可用于土地利用现状的分析、合理规划及洪水险情预报等。
在军事上可用于导航及导弹制导、作战电子沙盘等。
对 DTM的研究包括DTM的精度问题、地形分类、数据采集、DTM的粗差探测、质量控制、数据压缩、DTM应用以及不规则三角网DTM的建立与应用等。
二、DEM(Digital Elevation Matrix)数字高程矩阵。
GIS、地图学中的常用术语。
数字高程模型（Digital Elevation Model，缩写DEM）是一定范围内规则格网点的平面坐标（X，Y）及其高程（Z）的数据集，它主要是描述区域地貌形态的空间分布，是通过等高线或相似立体模型进行数据采集（包括采样和量测），然后进行数据内插而形成的。
DEM是对地貌形态的虚拟表示，可派生出等高线、坡度图等信息，也可与DOM或其它专题数据叠加，用于与地形相关的分析应用，同时它本身还是制作DOM的基础数据。
DEM是用一组有序数值阵列形式表示地面高程的一种实体地面模型，是数字地形模型(Digital Terrain Model，简称DTM)的一个分支。
一般认为,DTM是描述包括高程在内的各种地貌因子，如坡度、坡向、坡度变化率等因子在内的线性和非线性组合的空间分布，其中DEM是零阶单纯的单项数字地貌模型，其他如坡度、坡向及坡度变化率等地貌特性可在DEM的基础上派生。
DOM基础学习要点：1.DOM 介绍2.查找元素3.DOM 节点4.节点操作DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。
DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。
DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。
一．DOM介绍DOM 中的三个字母，D（文档）可以理解为整个Web 加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为 W3C 标准。
DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。
PS：IE 中的所有 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM 可能会和其他浏览器有一定的差异。
1.节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成。
节点树从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。
head标签是html子标签，meta和title标签之间是兄弟关系。
如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
2.节点种类：元素节点、文本节点、属性节点。
<div title="属性节点">测试 Div</div>二．查找元素W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。
对虚拟dom的理解随着前端技术的不断发展，虚拟DOM（Virtual DOM）逐渐成为了前端开发中不可或缺的一部分。
那么，什么是虚拟DOM呢？虚拟DOM与传统DOM有什么区别？如何使用虚拟DOM优化前端性能？本文将从这三个问题入手，对虚拟DOM进行详细的解析。
一、什么是虚拟DOM？DOM（Document Object Model）是一种用于表示HTML文档的树形结构，每个HTML元素都是DOM树的一个节点。
传统的DOM操作是直接操作真实的DOM树，例如通过document.getElementById()方法获取某个元素，然后对其进行修改。
这种操作方式会导致大量的DOM 操作，降低前端性能，因此需要寻找一种更高效的方式来操作DOM。
虚拟DOM是一种用于描述真实DOM树的JavaScript对象，它与真实DOM树一一对应。
例如，一个虚拟DOM对象可以表示一个div元素，它包含了该元素的属性、子元素等信息，但不包含任何真实的HTML元素。
通过虚拟DOM，我们可以在JavaScript层面对DOM进行操作，而不必直接操作真实的DOM树。
虚拟DOM的核心思想是，通过比较新旧两个虚拟DOM对象的差异，仅对发生变化的部分进行真实DOM操作，从而减少DOM操作的次数，提高前端性能。
二、虚拟DOM与传统DOM的区别1. 操作方式不同传统的DOM操作是直接操作真实的DOM树，例如通过document.getElementById()方法获取某个元素，然后对其进行修改。
而虚拟DOM操作是在JavaScript层面对DOM进行操作，例如通过React.createElement()方法创建一个虚拟DOM对象。
2. 渲染方式不同传统的DOM操作是直接操作真实的DOM树，每次修改都会引起页面的重新渲染。
而虚拟DOM操作是先对虚拟DOM进行修改，然后通过比较新旧两个虚拟DOM对象的差异，仅对发生变化的部分进行真实DOM操作，从而减少页面的重新渲染。
dom基本概念DOM基本概念DOM（Document Object Model）是一种用于处理HTML和XML文档的编程接口。
它将文档表示为一个树形结构，其中每个节点都是一个对象，每个对象都有其自身的属性和方法。
DOM的基本概念包括节点、元素、属性、文本、注释、文档对象等。
节点节点是DOM中最基本的单位，它可以是元素、属性、文本、注释等。
每个节点都有其自身的类型、名称、值等属性。
节点之间可以存在父子关系、兄弟关系等。
在DOM中，节点可以通过节点类型来进行分类，例如元素节点、属性节点、文本节点等。
元素元素是DOM中的一种节点类型，它表示HTML或XML文档中的标签。
每个元素都有其自身的标签名、属性、子元素等。
在DOM中，元素节点可以通过标签名来进行访问，例如document.getElementsByTagName()方法可以获取文档中指定标签名的所有元素。
属性属性是DOM中的一种节点类型，它表示HTML或XML文档中的属性。
每个属性都有其自身的名称和值。
在DOM中，属性节点可以通过元素节点来进行访问，例如element.getAttribute()方法可以获取元素节点的指定属性值。
文本文本是DOM中的一种节点类型，它表示HTML或XML文档中的文本内容。
每个文本节点都有其自身的文本值。
在DOM中，文本节点可以通过元素节点来进行访问，例如element.firstChild.nodeValue 可以获取元素节点的文本内容。
注释注释是DOM中的一种节点类型，它表示HTML或XML文档中的注释内容。
每个注释节点都有其自身的注释值。
在DOM中，注释节点可以通过元素节点来进行访问，例如element.childNodes可以获取元素节点的所有子节点，其中包括注释节点。
文档对象文档对象是DOM中的一种节点类型，它表示整个HTML或XML文档。
文档对象是DOM树的根节点，它包含了整个文档的所有元素、属性、文本、注释等节点。
什么是Dom？Dom:英文全称－Document Object Model 译成中文即是：文档对像模型．听起来很术语，其实就是文档内容的结构关系．文档类型可以是HTML或XMLDom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素．更改其现有的结构或内容．如果你未接触过Dom，你会发现Dom太神奇了．．．不管你是菜鸟还是高手，在这个注重用户体验的web设计时代里，Dom是至关重要的. 如果你是一名有经验的web设计者，你应该看到过或用过以下这些命令或方法getElementById getElementsByTagName offsetParent appendChild getAttribute 不过至今仍有人认为这些都是JavaScript中的东西，其实不然，这些全是Dom中很重要的方法！Dom手册下载地址Dom并非一种编程语言，Dom只是提供了一系列的接口，利用Dom的这些接口可以很方便的读取，修改，删除Html和XML 文件中的标签元素和文本内容．在这里我们侧重于讲解Dom对Html文件的操作．那么Dom是如何读取和管理Html文件的呢？首先你必须要了解html的源码结构．看图如果你有学过或写过Html，那么你会对上图一目了然．我想要说明的就是Html的源码结构是有层次的，而且标签与杯签之间还存在着父子，或相邻的关系．上图不难看出HTML这个标签是最顶级的．最上层的．也可以理解成html文件的根．其次是Head与Body标签．这两个标签是相邻的．也可以理解成兄弟关系．但他们都属于html的子标签或称为子元素．然后Body标签内包含了Table,Div,Div．这三个标签你可以理解为Body的子标签或子元素．Body为父他们为子．Head所含的标签也是同理．另外第一个div内包含了另一个div．第二个div内包含了一些文本内容．他们的关系也是父子关系．Dom正是利用了Html源码的这种关系结构．而巧妙的在你的html源码中行走自如．犹如一位武林高手一般．尽情地施展他的＂凌波微步＂．看下面的代码．代码结构与上图是吻合的．不同的是多了几个按扭来执行一些dom的指令操作．运行以后你便走进了Dom的神秘与精彩世界！！！<html><head><title>这是网页的标题</title><link/><meta/><body><table border="1"><table><div><div></div></div><div>文本内容</div><input type="button"value="弹出html标签"onclick="alert_HTML()"/><input type="button"value="弹出body标签"onclick="alert_Body()"/><input type="button"value="弹出head标签"onclick="alert_Head()"/><input type="button"value="修改网页标题"onclick="up_Title()"/><input type="button"value="更改表格"onclick="up_Table()"/><input type="button"value="获取第一个div和他的子元素"onclick="get_Div()"/><input type="button"value="更改第二个div中的文本内容"onclick="up_div_text()"/> </body></html><script type="text/javascript">function alert_HTML(){ //弹出html标签函数var html = document.documentElement;alert(html.tagName);}function alert_Body(){ //弹出body标签函数var body = document.body;alert(body.tagName);}function alert_Head(){//弹出head标签函数，var html = document.documentElement;//head是html标签中的第一个子元素//childNodes可以获取某一标签内的所有子元素var head = html.childNodes[0].tagName;alert(head);}function up_Title(){//注意title标签内的＂这是网页的标题＂将被改变．document.title = "Web圈提提供的Dom图解入门教程";}function up_Table(){//为表格添加行，添加列并写入文本内容var Table = document.getElementsByTagName("table")[0];//获取网页内第一个表格var Tr = Table.insertRow(0);//为表格添加一行var Td = Tr.insertCell(0);//为新建的行，添加一列Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本}function get_Div(){//获取第一个div和他的孩子var div = document.getElementsByTagName("div")[0];alert("我是第一个"+div.tagName);var child_div = div.childNodes[0];//虽然是子div,但是按解析顺序他在该页内是第二个出现的div,alert("我是第一个div的子元素．我也是"+child_div.tagName);}function up_div_text(){var div = document.getElementsByTagName("div")[2];//其实如果按解析顺序该div在本页应该是第3个，div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程． 作者：康董";}</script>上面演示的代码实例．略有繁琐．并非是Dom最优秀的使用方法．但足以让你了解Dom是怎样工作的．下面将演示Dom迅速访问某个标签的方法．可以让你在成千上万个html标签中迅速找到你想的某个标签．比如你可以为你的html标签添加一个ID属性．在Dom中有一个getElementById方法．该方法可以根据html标签的ID属性值，迅速找到这个标签．然后对其进行更改或其他操作．下面的代码我只为table和第一个div添加一个id属性值．利用getElementByid迅速向able和第一个div的子div添加内容<html><head><title>这是网页的标题</title><link/><meta/><body><table id="a"border="1"><table><div id="b"><div></div></div><div>文本内容</div><input type="button"value="更改table"onclick="up_table()"/><input type="button"value="为第一个div的子div写入文本"onclick="up_div()"/></body></html><script type="text/javascript">function up_table(){//更改table函数var Table = document.getElementById("a");//根据id获取标签元素var Tr = Table.insertRow(0);var Td = Tr.insertCell(0);Td.innerHTML = "欢迎光临Web圈，网址：";}function up_div(){//为第一个div的子div添加文本内容var div = document.getElementById("b");div.childNodes[0].innerHTML="我是子div，我被写入文本了";}</script>上面的两个例子中分别使用了Dom的以下方法：document：对当前整个Html网页的引用documentElement：获取html和xml文件中的根元素．在html文件中总是返回Html标签．在xml文件中总是返回最顶层的那个元素getElementsByTagName：根据指定的标签名称，来获取网页中所有相同的标签元素．如：table,或div．则会找出网页中所有table 元素，或所有div元素．以一个类似数组的方式来返回对这些元素的引用．getElementById：根据指定的标签id值．来寻找标签元素．并返回对该标签的引用childNodes：获取某个标签下所有的子标签元素，也就是我所说的孩子元素．并以一个类似数组的方式来返回对所有子元素的引用insertRow：为表格增加一行insertCell：为表格的某行增加一列该入门教程只讲解了Dom中的一部份知识，请了解更多关于Dom的内容Dom可以在网页中做什么？HTML Dom中最常用的几个方法之查找元素1.Dom之引用当前整个网页文档：document2.Dom如何快速在网页中查找某一元素：getElementById3.Dom中查找一组标签，具有相同名称的标签元素：getElementsByTagName4.根据标签的Id属性值或name属性来查找多个元素：getElementsByNameDom中创建，添加，删除，修改，替换，复制，网页中的标签和文本内容的方法如下．1.在网页中的创建一个标签元素：createElement2.创建一段文本内容：createTextNode3.向网页中添加元素：appendChild4.删除元素的Dom方法是：removeChild5.修改网页中标签元素的属性：setAttribute6.替换已存在的标签或元素：replaceChild7.复制克隆已存在的标签或元素：cloneNode8.获取和修改元素内的html标签与文本内容：innerHTML9.获取或修改元素的文本内容，仅支持IE：innerText10.获取或修改元素的文本内容，支持FF：textContentHTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素1.HTML Dom中的insertRow方法可以为表格增加一行2.删除表格中一行的方法是：deleteRow3.HTML Dom中的insertCell方法可以为表格某行中增加一列4.删除行中的一列的方法是：deleteCell5.HTML Dom中的createCaption方法可以为表格创建一个标题6.HTML Dom中的createTHead方法可以为表格创建一个Thead7.HTML Dom中的createTFoot方法可以为表格创建一个TFoot8.引用表格中所有行的属性为：rows9.引用表格中某行的所有列：cells10.移动表格中的行，只支持IE：moveRow Dom中操作父元素，子元素，兄弟元素的相关命令1.获取父元素的指令是：parentNode2.获取元素中第一个子元素：firstChild3.获取元素中最后面的那个子元素：lastChild4.获取元素中所有的子元素：childNodes5.获取前一个兄弟元素：previousSibling6.获取后一个兄弟元素作者：康董2010-10-22。
dom的提取方法一、DOM是什么？1.1 DOM的概念。
DOM啊，就是文档对象模型（Document Object Model）的简称。
这就好比是网页的一个大地图，把网页里的各种元素，像文字、图片、链接这些啊，都当作一个个小物件放在这个地图里，每个小物件都能被找到、被操作。
它是一种让我们可以通过脚本语言（像JavaScript）来和网页交互的接口。
比如说，你看到一个网页上有个按钮，你想让这个按钮在被点击的时候变色，那就要靠DOM来找到这个按钮元素，然后对它进行操作。
1.2 DOM的重要性。
这DOM的重要性可大了去了。
它就像一把万能钥匙，能打开网页里各个元素的大门。
没有它，网页就像是一个封闭的城堡，我们只能看，不能做任何改变。
对于开发者来说，DOM就是他们施展魔法的魔杖。
就像“巧妇难为无米之炊”，没有DOM，再厉害的开发者也没法让网页变得更加生动、交互性更强。
二、DOM的提取方法。
2.1 通过标签名提取。
最常见的一种方法就是通过标签名来提取DOM元素。
比如说，网页里有好多段落（<p>标签），你想把这些段落都找出来。
那就可以使用像JavaScript里的document.getElementsByTagName('p')这样的方法。
这就像是在一群人里按照衣服颜色（这里就是标签名）来找人一样。
一下子就能把所有穿同样颜色衣服（相同标签名）的人（元素）都找出来。
不过呢，这种方法有时候可能会找出来太多元素，就像一网下去捞了好多鱼，有些可能不是你想要的。
2.2 通过类名提取。
还有一种办法是通过类名来提取。
如果网页里有些元素被设置了特定的类名，那我们就可以用这个类名来找到它们。
就好比在一个班级里，你要找那些戴眼镜的同学（这里戴眼镜就相当于类名）。
在JavaScript里可以用document.getElementsByClassName('类名')。
但是要注意哦，一个类名可能被多个元素使用，就像可能有好几个同学都戴眼镜，所以得到的结果可能是一个元素集合。
DLG数字线划地图(DLG, Digital Line Graphic)：是与现有线划基本一致的各地图要素的矢量数据集，且保存各要素间的空间关系和相关的属性信息。
>在世字测图中，最为常见的产品就是数字线划图，外业测绘最终成果一般就是DLG。
该产品较全面地描述地表现象，目视效果与同比例尺一致但色彩更为丰富。
本产品满足各种空间分析要求,可随机地进行数据选取和显示,与其他信息叠加,可进行空间分析、决策。
其中部分地形核心要素可作为数字正射影像地形图中的线划地形要素。
数字线划图DLG.jpg。
数字线划地图(DLG)是一种更为方便的放大、漫游、查询、检查、量测、叠加地图。
其数据量小，便于分层，能快速的生成专题地图，所以也称作矢量专题信息DTI（Digital Thematic Information）。
此数据能满足地理信息系统进行各种空间分析要求，视为带有智能的数据。
可随机地进行数据选取和显示，与其他几种产品叠加，便于分析、决策。
数字线划地图(DLG)的技术特征为：地图地理内容、分幅、投影、精度、坐标系统与同比例尺地形图一致。
图形输出为矢量格式，任意缩放均不变形。
生产技术原始资料主要采用：外业数据采集、航片、高分辨率卫片、地形图等。
制作方法：1)数字摄影测量、三维跟踪立体测图。
目前，国产的数字摄影测量软件VintuoZo系统和JX-4C才DPW系统都具有相应的矢量图系统，而且它们的精度指标都较高。
其中VintuoZo系统有工作站版和NT版两种，而JX-4C DPW系统只有NT版一种。
2)解析或机助数字化测图。
这种方法是在解析测图仪或模拟器上对航片和高分辨率卫片进行立体测图，来获得DLG数据。
用这种方法还需使用GIS或CAD等图形处理软件，对获得的数据进行编辑，最终产生成果数据。
3)对现有的地形图扫描，人机交互将其要素矢量化。
目前常用的国内外矢量化软件或GIS和CAD软件中利用矢量化功能将扫描影像进行矢量化后转入相应的系统中。
DOM及DOM技术介绍本文概述了一些强大的，基本的DOM 级别一中的方法以及如何在JavaScript中使用它们。
你将会学习到如何动态地创建，访问，控制以及移除HTML元素。
这里提到的DOM方法，并非是HTML专有的；它们在XML中同样适用。
这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。
这里的示例代码在IE5中也能正常工作。
（这里所提到的DOM 方法是文档对象模型规范（级别一）的核心的一部分。
DOM 级别一包括对文档进行访问和处理的方法（DOM 1 核心）和专门为HTML文档定义的方法。
）DOM简介：DOM的全称是文档对象模型（即Document Object Model），它在本质上是一种文档平台。
文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。
支持Javascript的所有浏览器都支持DOM。
DOM实际上是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的一种语言平台。
这段文字是通过一个实例代码来介绍了DOM的。
那么我们从下面的HTML示例来开始吧。
这段示例使用了DOM 级别一的方法，从JavaScript动态创建了一个HTML表格。
它创建了一个包含了四个单元的小表格，并且在每个单元中含有文本。
单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。
<head><title>样例代码 - 使用 JavaScript 和 DOM 接口创建一个 HTML 表格</title><script>function start() {// 获得从body的引用varmybody=document.getElementsByTagName("body").item(0);// 创建一个TABLE的元素mytable = document.createElement("TABLE");// 创建一个TBODY的元素mytablebody = document.createElement("TBODY"); // 创建所有的单元格for(j=0;j<2;j++) {// 创建一个TR元素mycurrent_row=document.createElement("TR"); for(i=0;i<2;i++) {// 创建一个TD元素mycurrent_cell=document.createElement("TD");// 创建一个文本（text）节点currenttext=document.createTextNode("cellis row "+j+", column "+i);// 将我们创建的这个文本节点添加在TD元素里mycurrent_cell.appendChild(currenttext); // 将TD元素添加在TR里mycurrent_row.appendChild(mycurrent_cell); }// 将TR元素添加在TBODY里mytablebody.appendChild(mycurrent_row);}// 将TBODY元素添加在TABLE里mytable.appendChild(mytablebody);// 将TABLE元素添加在BODY里mybody.appendChild(mytable);// 设置mytable的边界属性border为2mytable.setAttribute("border","2");}</script></head><body onload="start()"></body></html>注意我们创建元素和文本节点的顺序：首先我们创建了TABLE元素。
然后，我们创建了TABLE的子元素--TBODY。
然后，我们使用循环语句创建了TBODY的子元素--TR。
对于每一个TR元素，我们使用一个循环语句创建它的子元素--TD。
对于每一个TD元素，我们创建单元格内的文本节点。
现在，我们创建了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：首先，我们将每一个文本节点接在TD元素上mycurrent_cell.appendChild(currenttext);然后，我们将每一个TD元素接在他的父TR元素上。
mycurrent_row.appendChild(mycurrent_cell);然后，我们将每一个TR元素接在他们的父TBODY元素上。
mytablebody.appendChild(mycurrent_row);下一步,我们将TBODY元素接在他的父TABLE元素上mytable.appendChild(mytablebody);最后，我们将TABLE元素接在他的父元素BODY上。
mybody.appendChild(mytable);请记住这个机制。
你将会在W3C DOM编程中经常使用它。
首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。
下面是由javascript代码生成的HTML代码：...<TABLE border=5><tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr><tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr></TABLE>...下面是由代码生成的TABLE及其子元素的DOM对象树：你可以只用一些DOM方法来创建这个表格和它内部的子元素。
请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。
在图1的TABLE树中，TABLE有一个子元素TBODY。
TBODY有两个子元素。
每一个TR又含有两个子元素（TD）。
最后，每一个TD有一个子元素--文本节点。
基本DOM方法 - Sample2.htmlgetElementByTagName是文档接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName。
用来通过它们的标签名称（tag name）来获得某些元素的一系列子元素。
你可以使用的方法是：element.getElementsByTagName(tagname)。
getElementsByTagName返回一个有特定标签名称（tagname）的子元素列表。
从这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。
列表中第一个元素的下标是0。
上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。
OK，我们下一个话题中要继续对我们的表格例子进行修改。
下面的示例更加简单，它意图展示一些基础的方法：<html><head><title>样例代码 - 使用 JavaScript 和 DOM 接口操作 HTML 表格</title><script>function start() {// 获得所有的body元素列表（在这里将只有一个）myDocumentElements=document.getElementsByTagName("body"); // 我们所需要body元素是这个列表的第一个元素myBody=myDocumentElements.item(0);// 现在，让我们获得body的子元素中所有的p元素myBodymyBodyElements=myBody.getElementsByTagName("p");// 我们所需要的是这个列表中的第二个单元元素myP=myBodyElements.item(1);} </script></head><body onload="start()"><p>hi</p><p>hello</p></body></html>在这个例子中，我们设置变量myP指向DOM对象body中的第二个p 元素：首先，我们使用下面的代码获得所有的body元素的列表，因为在任何合法的HTML文档中都只有一个body元素，所以这个列表是只包含一个单元的。
document.getElementsByTagName("body")下一步，我们取得列表的第一个元素，它本身就会body元素对象。
myBody=myDocumentElements.item(0);然后，我们通过下面代码获得body的子元素中所有的p元素myBodyElements=myBody.getElementsByTagName("p");最后，我们从列表中取第二个单元元素。
myP=myBodyElements.item(1);一旦你取得了HTML元素的DOM对象，你就可以设置它的属性了。
比如，如果你希望设置背景色属性，你只需要添加：myP.style.background="rgb(255,0,0)";// 设置inline的背景色风格使用document.createTextNode(..)创建文本节点使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。
你只需要传递文字内容给这个函数。
返回的值就是一个展示那个文本节点信息的对象。
myTextNode=document.createTextNode("world");这表示你已经创建了一个TEXT——NODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对myTextNode的引用都指向这个节点对象。
