什么是DOM？

DOM 是 Document Object Model（文档对象模型）的缩写。

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

请看下面的 HTML 片段：

<html>

  <head>

    <title>DOM 教程</title>

  </head>

  <body>

    <h1>DOM 第一课</h1>

    <p>Hello world!</p>

  </body>

</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点

<head> 和 <body> 的父节点是 <html> 节点

文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>

<head> 节点拥有一个子节点：<title> 节点

<title> 节点也拥有一个子节点：文本节点 "DOM 教程"

<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点

<body> 元素是 <html> 元素的最后一个子节点

<h1> 元素是 <body> 元素的首个子节点

<p> 元素是 <body> 元素的最后一个子节点

方法&属性

常见 DOM 对象方法

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值

parentNode - 节点（元素）的父节点

childNodes - 节点（元素）的子节点

attributes - 节点（元素）的属性节点

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

<!DOCTYPE html>

<html>

  <body>

    <p>Hello World!</p>

    <div id="main">

    <p>DOM 很有用！</p>

    <p>本例演示 <b>getElementsByTagName</b> 方法。</p>

    </div>

    <script>

    x=document.getElementById("main").getElementsByTagName("p");

    document.write("div 中的第一段的文本: " + x[0].innerHTML);

    </script>

  </body>

</html>

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容

改变 CSS 样式

改变 HTML 属性

创建新的 HTML 元素

删除已有的 HTML 元素

改变事件（处理程序）

<!DOCTYPE html>

<html>

	<body>

      <p id="p1">Hello World!</p>

      <script>

      document.getElementById("p1").innerHTML="New text!";

      </script>

      <p>上面的段落被一段脚本改变了。</p>

	</body>

</html>

添加、删除和替换 HTML 元素。

<!DOCTYPE html>

<html>

	<body>

      <div id="div1">

          <p id="p1">This is a paragraph.</p>

          <p id="p2">This is another paragraph.</p>

      </div>

      <script>

      var para=document.createElement("p");

      var node=document.createTextNode("This is new.");

      para.appendChild(node);

      var element=document.getElementById("div1");

      element.appendChild(para);

      </script>

	</body>

</html>

事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户触发按键时

<!DOCTYPE html>

<html>

	<head>

	</head>

	<body>

		<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>

		<button id="myBtn">试一试</button>

		<script>

		document.getElementById("myBtn").onclick=function(){displayDate()};

		function displayDate()

		{

			document.getElementById("demo").innerHTML=Date();

		}

		</script>

		<p id="demo"></p>

	</body>

</html>

DOM简介的更多相关文章

  1. HTML DOM简介

    HTML DOM简介 1.当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),HTML DOM模型被创建为对象的树.如下所示: 2.通过可编程的对象模型,Ja ...

  2. Dom 简介

    HTML DOM 简介 DOM 教程 DOM 节点 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CS ...

  3. BOM DOM 简介

    BOM和DOM简介 BOM,Browser Object Model ,浏览器对象模型. BOM主要提供了访问和操作浏览器各组件的方式. 浏览器组件:   window(浏览器窗口)   locati ...

  4. Javascript学习笔记2.1 Javascript与DOM简介

    DOM(文档对象模型)简介 DOM(文档对象模型)针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构,它是中立于平台和语言的接口,允许程序和脚本 ...

  5. javascript总结18:javascript DOM简介

    1 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应.在事件发生时,执行JavaScript 方法,做出交互. 2 格式: onclick=JavaScript脚本 3 H ...

  6. DOM简介及节点、属性、查找节点的方法

    DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式 ...

  7. 26 JavaScript HTML DOM简介&方法&文档

    HTML DOM: Document  Object  Model 文档对象模型.是HTML的标准对象模型和编程接口.(JavaScript只是可以操作HTML DOM的语言之一) 定义了HTML元素 ...

  8. JS DOM简介

    1. 概述 文档对象模型(Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口.W3C 已经定义了一系列的 DOM 接口 ...

  9. DOM文档对象模型简介

    DOM简介     DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...

随机推荐

  1. Linux环境PHP7.0.2安装

    PHP7和HHVM比较PHP7的在真实场景的性能确实已经和HHVM相当, 在一些场景甚至超过了HHVM.HHVM的运维复杂, 是多线程模型, 这就代表着如果一个线程导致crash了, 那么整个服务就挂 ...

  2. EasyUI 另一种form提交方式

    (function ($) { window.XW = {}; //全局系统对象 //异步请求统一调用方法 XW.ajax = function (options, param, callback) ...

  3. WPF 在TextBox失去焦点时检测数据，出错重新获得焦点解决办法

    WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法 在WPF的TextBox的LostFocus事件中直接使用Focus()方法会出现死循环的问题 正确的使用方式有2中方法: 方法一 ...

  4. linux下源代码搭建php环境之mysql（一）

    如今已经大半夜了,五一劳动节挺无聊的. 折腾一下吧.实在是睡不着.于是乎在电脑上安装个虚拟机,然后呢,在虚拟机上搭建一个php环境. 首先我得安装MYSQL吧. 发现遇到的问题真多. .待我娓娓道来. ...

  5. 【BZOJ1116】[POI2008]CLO 并查集

    [BZOJ1116][POI2008]CLO Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. ...

  6. vue+node+mongoDB 火车票H5（六）---城市列表保存到MongoDB数据库并且启用node.js服务

    把车站列表保存到数据库,并且从本地创建服务 node.js创建httpserver 1.搭建基于express的运行环境 全局安装express-gengerator cnpm install -g ...

  7. 面试之一：CMS收集器整理

      CMS收集器整理 @white 基本说明: 目标:获取最短回收停顿时间 算法:标记-清除算法 线程:并发 步骤: 初始标记:(会STP) 标记 GC Roots 能直接关联到的对象,速度很快 并发 ...

  8. CMS 收集器整理

    基本说明: 目标:获取最短回收停顿时间 算法:标记-清除算法 线程:并发 步骤: 初始标记:(会STP) 标记一下 GC Roots 能直接关联到的对象,速度很快 并发标记:(耗时最长,且可与用户线程 ...

  9. Java switch 详解

    switch 语句由一个控制表达式和多个case标签组成. switch 控制表达式支持的类型有byte.short.char.int.enum(Java 5).String(Java 7). swi ...

  10. document.compatMode介绍

    来自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html 问题描述:看到阮一峰的博客里面的代码使用到了document.c ...