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)"

        onmouseout="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的总结的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. Logistic Regression的几个变种

    原文:http://blog.xlvector.net/2014-02/different-logistic-regression/ 最近几年广告系统成为很多公司的重要系统之一,定向广告技术是广告系统 ...

  2. 【ACM】杭电ACM题一直WA求高手看看代码

    数据测试了好几个都没问题,可以就是WA不让过,检测了2个小时还是没发现有什么问题T_T!!求高手看看代码,小弟在此谢谢各位哦! #include <stdio.h> #include &l ...

  3. C#.NET常见问题(FAQ)-如何强制退出进程

    可以使用Process.Kill方法,但是有时候执行完了该进程还在,要等一会才会自动关掉     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/ac ...

  4. 跨站点脚本编制-XSS 描述及解决方法

    跨站点脚本编制可能是一个危险的安全性问题,在设计安全的基于 Web 的应用程序时应该考虑这一点.本文中,描述了这种问题的本质.它是如何起作用的,并概述了一些推荐的修正策略. 当今的大多数网站都对 We ...

  5. getaddrinfo()函数详解

    Socket的地址查询函数 http://blog.sina.com.cn/s/blog_988c054b010139e3.html http://www.cnblogs.com/cxz2009/ar ...

  6. visudo精确用户赋权（sudo)

    原文BLOG:http://iminmin.blog.51cto.com/689308/455992 sudo" 是Unix/Linux平台上的一个非常有用的工具,允许为非根用户赋予一些合理 ...

  7. 〖Linux〗zigbee实验之cc2430的cc debugger固件升级实录

    开发环境:Windows XP 1. (Trouble)一开始,使用IAR提示此设备不可使用(意味着无法下载程序): 2. (Search)通过一番的仔细查找,发现是cc debugger的Evalu ...

  8. Tomcat 设置URI默认字符集为UTF-8

    新配置一个Spring的MVC项目.发现对Get请求的中文參数出现了乱码: 查看了SpingMVC中关于编码的配置(在web.xml中).例如以下 <filter> <filter- ...

  9. Python之L.pop()和del L[i]

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之L.pop()和del L[i] #http://python.jobbole.com/826 ...

  10. doGet和doPost区别

    1,form运行方式 当form框里面的method为get时,执行doGet方法当form框里面的method为post时,执行doPost方法 2,生成方式 get方式有四种:1)直接在URL地址 ...