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. 笔记本wifi热点设置好后，手机连上但不能上网问题

    这个问题我遇到过,我的原因是因为电脑上装有安全防护软件360的原因 解决方法是:打开360-->找到功能大全中的流量防火墙-->打开局域网防护-->关闭局域网隐身功能,立刻解决了这个 ...

  2. C#.NET常见问题(FAQ)-无法直接启动带有类库输出类型的项目怎么办

    我把Driver.cs文件去掉了一行注释,发现报错   右击这个解决方案,选择属性,然后再启动项目中改成MySample   更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http:// ...

  3. windows系统上安装Redis，并且设置Redis密码

    一.Windows版本的Redis下载 下载地址:https://github.com/MSOpenTech/redis/releases 我下载的是最新版的3.2 二.安装Redis 我下载的是安装 ...

  4. ADO.Net 之 数据库连接池（二）

    连接到数据库服务器通常由几个需要很长时间的步骤组成.必须建立物理通道(例如套接字或命名管道),必须与服务器进行初次握手,必须分析连接字符串信息,必须由服务器对连接进行身份验证,必须运行检查以便在当前事 ...

  5. IOS学习笔记45--UITableView性能优化

    说实话,面试的时候已经被问到几次这个问题,然后就搜索了一下,看到了这篇优化文章,感觉不错,转来日后作为一种UITableView优化的方法. 使用不透明视图.      不透明的视图可以极大地提高渲染 ...

  6. 笔记本样式的EditText控件(每行均带下划虚线)

    package com.zongyi.trip.ui; import com.zongyi.trip.R; import android.annotation.SuppressLint; import ...

  7. 在线sass编译器

    工作中,我们可能遇到突发情况(无法安装考拉,gulp以及webpack以及其它的自动化工具),我们这时就要用即时编译工具了,那么它就是你的首选: http://tool.oschina.net/

  8. 算法笔记_169:历届试题 兰顿蚂蚁(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种. 平面上的正方形格子被填上黑色或白色.在其中一格正方形内有一只“蚂 ...

  9. 转：StdRegProv类所属方法的使用

    在root\default命名空间中的StdRegProv类(标准注册表提供程序)提供了下面16种方法,我们将陆续介绍这些方法的使用规则,并给出分别用WBscript和Powershell编写的例子. ...

  10. vue provide和inject使用

    provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件). provide 选项应该是一个对象或返回一 ...