什么是Dom？.doc

什么是Dom？ Dom:英文全称Document Object Model 译成中文即是：文档对像模型听起来很术语，其实就是文档内容的结构关系文档类型可以是HTML或XML Dom具有对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的神秘与精彩世界！ 这是网页的标题 文本内容 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.childNodes0.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.childNodes0;/虽然是子div,但是按解析顺序他在该页内是第二个出现的div, alert(我是第一个div的子元素我也是+child_div.tagName); function up_div_text() var div = document.getElementsByTagName(div)2;/其实如果按解析顺序该div在本页应该是第3个， div.innerHTML = 欢迎阅读web圈提供的Dom图解入门教程 作者：康董; 上面演示的代码实例略有繁琐并非是Dom最优秀的使用方法但足以让你了解Dom是怎样工作的 下面将演示Dom迅速访问某个标签的方法可以让你在成千上万个html标签中迅速找到你想的某个标签比如你可以为你的html标签添加一个 ID属性在Dom中有一个getElementById方法该方法可以根据html标签的ID属性值，迅速找到这个标签然后对其进行更改或其他操作 下面的代码我只为table和第一个div添加一个id属性值利用getElementByid迅速向able和第一个div的子div添加内容 这是网页的标题 文本内容 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.childNodes0.innerHTML=我是子div，我被写入文本了; 上面的两个例子中分别使用了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之引用当前整个网页文档：document 2. Dom如何快速在网页中查找某一元素：getElementById 3. Dom中查找一组标签，具有相同名称的标签元素：getElementsByTagName 4. 根据标签的Id属性值或name属性来查找多个元素：getElementsByNameDom中创建，添加，删除，修改，替换，复制，网页中的标签和文本内容的方法如下 1. 在网页中的创建一个标签元素：createElement 2. 创建一段文本内容：createTextNode 3. 向网页中添加元素：appendChild 4. 删除元素的Dom方法是：removeChild 5. 修改网页中标签元素的属性：setAttribute 6. 替换已存在的标签或元素：replaceChild 7. 复制克隆已存在的标签或元素：cloneNode 8. 获取和修改元素内的html标签与文本内容：innerHTML 9. 获取或修改元素的文本内容，仅支持IE：innerText 10. 获取或修改元素的文本内容，支持FF：textContentHTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素 1. HTML Dom中的insertRow方法可以为表格增加一行 2. 删除表格中一行的方法是：deleteRow 3. HTML Dom中的insertCell方法可以为表格某行中增加一列 4. 删除行中的一列的方法是：deleteCell 5. HTML Dom中的createCaption方法可以为表格创建一个标题 6. HTML Dom中的createTHead方法可以为表格创建一个Thead 7. HTML Dom中的createTFoot方法可以为表格创建一个TFoot 8. 引用表格中所有行的属性为：rows 9. 引用表格中某行的所有列：cells 10. 移动表格中的行，