什么DOM模型

最新推荐文章于 2024-10-08 14:26:15 发布

飞虎E线

最新推荐文章于 2024-10-08 14:26:15 发布

阅读量154

点赞数

分类专栏： EXTJS相关总结文章标签： Ajax 数据结构浏览器 HTML

本文链接：https://blog.csdn.net/liuguang1/article/details/83641231

版权

EXTJS相关总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文档对象模型：
在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()

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

[color=orange]<body>
<div id="Div1">节点1</div>
<div id="Div2">节点2</div>
</body>
</html>
<script language="javascript" type="text/javascript">

</script>[/color]
这个方法通常在要对整个文档的某一类元素节点进行操作时用到，比如说为全部的图片添加一个鼠标掠过时发生位移的效果，这时就可以通过这个方法对文档所有的节点进行引用。

·parentNode和childNodes，可以通过访问这两个属性获得当前节点的父节点和子节点集合的引用。

[color=orange]<body>
<div id="Div1">
<span id="sp1">节点1</span>
<span id="sp2">节点2</span>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">

</script>[/color]

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]，这样我们就能得到表格的第二行第四列的引用，我们可以向操作普通节点一样来对这个单元格对象进行操作。

[color=red] 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);//删除第二行[/color]

3）innerHTML 的灵活使用

[color=darkred]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节点加入到父节点下 [/color]

这样写我们通过六行代码完成了功能的实现，下面来看使用innerHTML的情况：

[color=darkred]var _div2 = document.getElementById("div2");
_div2.innerHTML = "<span id='span1'>节点2</span>";[/color]

可见使用innerHTML属性，可以更为方便高效地改变文档结构，这使得在大多数情况下都使用innerHTML来操作文档，但是标准的DOM方法在特定的环境下也有不可取代的作用，在编码时要灵活判断，选择合适的方法解决问题。