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. 独立开发人员低成本推广APP的18条技巧

    导语:知道并不等于运行,有些最主要的推广方法往往会被忽略.这些,是自国外开发人员总结出的这18条经验. 如今市面上充满了大牌子大公司和大制作的手机游戏,常常有游戏花300万成本开发,然后再花2000万 ...

  2. ArcGIS高程Z值的去除方法

    在ArcGIS中,我们常用的几何类型有点.线.面.体(体,在涉及三维的情况下使用),但在这之外,可能会遇到带ZM的类型,如图所示,面ZM,它与面类似,但比面多两个字段. 在编辑中查看草图属性可看到Z值 ...

  3. Android 之 Android目录

    Android的目录结构如图所示: 下面来分别说说各个目录: 1.src:存放应用程序中所有的(后台)源代码,代码的源文件一般存放在相应的包下面. 2.gen:该目录下一般有BuildConfig.j ...

  4. UIKeyboardTypeNumberPad 数字键盘添加完成按钮

    一:添加通知 //数字键盘添加完成 [[NSNotificationCenterdefaultCenter] addObserver:selfselector:@selector(keyboardWi ...

  5. PHPstorm最常用的快捷键，提高开发效率

    PHPstorm最常用的快捷键,提高开发效率 •ctrl+b 跳到变量申明处 •Ctrl + E 打开最近文件 •Ctrl + R 替换. •Ctrl + D 复制粘贴.将当前行或者选择的内容复制粘贴 ...

  6. vue 目录结构与文件配置说明

    目录结构与文件配置说明 首先对目录结构进行说明, 1.build目录,主要利用webpack与node插件启动一些相关服务的js文件 2.config目录主要是针对开发环境,生产环境,测试环境的配置信 ...

  7. glibc的几个有用的处理二进制位的内置函数（转）

    — Built-in Function: int __builtin_ffs (unsigned int x) Returns one plus the index of the least sign ...

  8. Oracle 去重查询

      Oracle 去重查询 CreateTime--2018年2月28日15:38:45 Author:Marydon (一)使用distinct --查询指定区间内表停诊字段的值 SELECT DI ...

  9. 【FinacialKnowledge】财务报表及名词解释

    1.财务报表 以下三张表为:资产负债表.利润表.现金流量表                                                                        ...

  10. 使用spring的事务的三种方法

    1.编程式事务管理 spring的配置文件 <!-- 事务管理器 --> <bean id="transactionManager" class="or ...