首页 > 代码库 > HTML DOM的总结
HTML DOM的总结
DOM 是 Document Object Model（文档对象模型）的缩写,是 W3C（万维网联盟）的标准
W3C DOM 标准被分为 3 个不同的部分：
1、核心 DOM - 针对任何结构化文档的标准模型
2、XML DOM - 针对 XML 文档的标准模型
3、HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
DOM技术使用户页面可以动态的变化，从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行操作。
简单说就是DOM规定了HTML，XML等的一些规范，使JavaScript可以根据这些规范来进行各种操作。而这些规范我们可以用树来形象的表示：
通过这样的树，我们就可以很快找到我们想要操作的节点，进而进行各种属性，方法，事件等的操作。
使用前先来了解一下元素节点的意思吧。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。看这个图：
再来看一下html DOM的常用属性吧,如图
接下来就说一下具体的JavaScript对HTML网页内容进行的操作，常用的方法如下：
DOM中常用的事件如下：
下面根据以上来实现几个小例子：
1，添加新的节点：
<span style="font-size:18px;"> <!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var para=document.createElement("p");//创建一个标签p节点名为para var node=document.createTextNode("这是新段落。");//定义节点元素的内容 para.appendChild(node);//将元素和内容联系起来 var element=document.getElementById("div1");//找到节点为div1的节点 element.appendChild(para);//向节点div1中添加新节点para </script> </body> </html> </span>
2,删除某个节点元素：
<span style="font-size:18px;"> <!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child);//删除父节点中的子节点child </script> </body> </html> </span>
3，获得焦点时改变颜色，这个是经常用的：
<span style="font-size:18px;"> <!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.background="yellow"; } </script> </head> <body> 请输入英文字符：<input type="text" onfocus="myFunction(this)"> <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p> </body> </html> </span>
4，鼠标移动上元素和移开元素：
<span style="font-size:18px;"> <!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onm ouseout="mOut(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;"> Mouse Over Me </div> <script> function mOver(obj) { obj.innerHTML="谢谢你" } function mOut(obj) { obj.innerHTML="把鼠标指针移动到上面" } </script> </body> </html> </span>
总结起来就是：DOM文档对象模型，可以理解为所建的html文件就是一个文档。W3C把这个文档中的html元素都抽象成了一个个对象，js就是通过这些抽象的对象来执行各种操作。
HTML DOM的总结