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. python 插入数据获取id

    python 插入数据获取id 学习了:https://blog.csdn.net/qq_37788558/article/details/78151972 commit之前获取 cursor.las ...

  2. 转码：gcc在代码中禁止某些warning

    http://www.itye.org/archives/3125 gcc 禁止warning 熟悉windows编程的人都知道,禁止编译器输出某个warning,在代码中可以这样 #pragma w ...

  3. window系统下调度数据库类型资源库中的kettle job

    已经存在kettle的一个资源库enfo,在目录/works/wxj下面有一个job (testmailsuccess.kjb)如何实现手工在kettle外部执行此job和让系统每天定时的调用此job ...

  4. （转）NGUI研究院之三种方式监听NGUI的事件方法

    NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,当按钮点击时就可以监听到,这种方法不太好很不 ...

  5. 【nodejs】修改了下对股票表进行crud操作的代码

    表是这样的: id是自增长字段,code和name都是255位的varchar. 下面是主角app.js的代码: 'use strict'; var express=require('express' ...

  6. hadoop2.2.0_hbase0.96_zookeeper3.4.5全分布式安装文档下载

    本文档主要内容有: 1.hadoop 2.2.0 集群安装与部署 2.HBase 0.96 集群安装与部署 3.Zookeeper 3.4.5集群安装部署 备注:安装文档可能有所遗漏,后续将持续更新. ...

  7. 87. 再谈变体型Variant

    在85. BASIC和LotusScript中的Variant一文中.我提到了BASIC风格的语言中的变体型Variant.由于下述种种原因.在LotusScript中常常要用到变体型. 1.     ...

  8. UVA 624 CD(DP + 01背包)

    CD You have a long drive by car ahead. You have a tape recorder, but unfortunately your best music i ...

  9. eclipse安装maven3

    maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版本是 3.0.4,我用的也是这个. 首先去官网下载 Maven ...

  10. Mapreduce实例-Top Key

    1 public class TopK extends Configured implements Tool { public static class TopKMapper extends Mapp ...