浅介HTML DOM

什么是DOM？

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

DOM是W3C（万维网联盟）的标准。

DOM定义了访问HTML和XML文档的标准：

　　“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中，所有事物都是节点。DOM是被视为节点树的HTML。

HTML DOM节点

DOM节点

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

HTML DOM节点树

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

HTML DOM Tree实例

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

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点，除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

请看下面的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>元素的最后一个子节点

HTML DOM方法

方法是我们在节点（HTML元素）上执行的动作。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

getElementById()方法

getElementById()方法返回带有指定ID的元素：

例：

 <!DOCTYPE html>

 <html>

 <body>

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

 <p>本例演示 <b>getElementById</b> 方法！</p>

 <script>

 x=document.getElementById("intro");

 document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");

 </script>

 </body>

 </html>

运行结果：

HTML DOM对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

现实生活中的对象

某个人是一个对象。

人的方法可能是 eat(), sleep(), work(), play() 等等。

所有人都有这些方法，但会在不同时间执行它们。

一个人的属性包括姓名、身高、体重、年龄、性别等等。

所有人都有这些属性，但它们的值因人而异。

一些DOM对象方法

HTML DOM属性

属性是节点（HTML元素）的值，你能够获取或设置。

innerHTML属性

获取元素内容的最简单方法是使用innerHTML属性。

innerHTML属性对于获取或替换HTML元素的内容很有用。

例子

下面的代码获取 id="intro"的<p>元素的innerHTML:

代码：

 <!DOCTYPE html>

 <html>

 <body>

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

 <script>

 var txt=document.getElementById("intro").innerHTML;

 document.write(txt);

 </script>

 </body>

 </html>

运行结果：

在上面的例子中，getElementById是一个方法，而innerHTML是属性。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

nodeName属性

nodeName 属性规定节点的名称。

nodeName是只读的
元素节点的nodeName与标签名相同
属性节点的nodeName与属性名相同
文本节点的nodeName始终是#text
文档节点的nodeName始终是#document

注：nodeName始终包含HTML元素的大写字母标签名。

获取文本节点的名称

代码：

 <!DOCTYPE html>

 <html>

 <body>

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

 <script>

 x=document.getElementById("intro");

 document.write(x.firstChild.nodeName);

 </script>

 </body>

 </html>

运行结果：

nodeValue属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeValue实例

代码：

 <!DOCTYPE html>

 <html>

 <body>

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

 <script>

 x=document.getElementById("intro");

 document.write(x.nodeValue);//元素节点的值

 document.write("<br>");//换行

 document.write(x.firstChild.nodeValue);//元素节点下的首个子节点（即文本节点）的值

 </script>

 </body>

 </html>

运行结果：

nodeType属性

nodeType属性返回节点的类型。nodeType是只读的。

比较重要的节点类型有：

HTML DOM访问

访问HTML DOM -查找HTML元素。

访问HTML元素（节点）

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

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

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

getElementById()方法

getElementById()方法返回带有指定ID的元素：

语法：

node.getElementById("id");

下面的例子获取id="intro"的元素：

代码：

 <!DOCTYPE html>    <!-- html5标准网页说明 --> <html>

 <body>

 <p id="intro">Hello getElementById</p>

 <p>this example is a demo for <b>getElementById</b></p>

 <script>

 x=document.getElementById("intro");

 document.write("<p>From the text of paragraph intro:"+x.innerHTML+"</p>");

 </script>

 </body>

 </html>

运行结果：

getElementsByTagName()方法

getElementsByTagName()返回带有指定标签名的所有元素。

语法：

node.getElementsByTagName("tagname");

下面的例子返回包含文档中所有<p>元素的列表：

 <!DOCTYPE html>    <!-- html5标准网页说明 -->>

 <html>

 <body>

 <p>Hello getElementByTagName!</p>

 <p>DOM is useful!</p>

 <p>this example is a demo for <b>getElementByTagName</b></p>

 <script>

 x=document.getElementsByTagName("p");

 document.write("the text of first paragraph:"+x[0].innerHTML);

 </script>

 </body>

 </html>

运行结果：

下面的例子返回包含文档中所有<p>元素的列表，并且这些<p>元素应该是id="main"的元素的后代（子、孙等等）：

 <!DOCTYPE html>    <!--html5标准网页说明  -->

 <html>

 <body>

 <p>Hello GetElementByTagName!</p>

 <div id="main">

 <p>DOM is useful!</p>

 <p>this example is a demo for <b>getElementByTagName</b></p>

 </div>

 <script>

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

 document.write("the text of first paragraph in div:"+x[0].innerHTML);

 </script>

 </body>

 </html>

运行结果：

getElementByClassName()方法

如果您希望查找相同类名的所有HTML元素，请使用这个方法：

 <!--

 @author:CodingMengmeng

 @theme:Demo for getElementByClassName

 @time:2017-2-25 13:08:42

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

 <!DOCTYPE html>    <!-- html5标准网页声明 -->

 <html>

 <head>

 <meta charset="utf-8">

 <title>Demo for getElementByClassName</title>

 </head>

 <body>

 <div class="exm">the first div element,and the class="exm".</div>

 <div class="exm">the second div element,and the calss="exm".</div>

 <p>click the button to alter the text of the first div(the index value is 0 and class="exm").</p>

 <input type="button" value="click me" onclick="myFunction()"/> 

 <p><strong>NOTICE:</strong>Internet Explorer 8 and earlier version than that don't support "getElementByClassName()".</p>

 <script>

 //function to change the text of div

 function myFunction()

 {

     var x=document.getElementsByClassName("exm");

     x[0].innerHTML="Hello getElementByClassName!";

 }

 </script>

 </body>

 </html>

点击按钮后的结果：

注：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

HTML DOM -修改

修改 HTML = 改变元素、属性、样式和事件。

修改HTML元素

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

改变HTML样式

通过HTML DOM，你能够访问HTML元素的样式对象。

下面的例子改变一个段落的HTML样式：

 <!--

 @author:CodingMengmeng

 @theme:Demo for changing style by DOM

 @time:2017-2-25 13:19:32

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <!DOCTYPE html>

  <html>

  <body>

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

  <p id="p2">Hello Style!</p>

  <script>

  document.getElementById("p2").style.color="red";

  document.getElementById("p2").style.fontFamily="Arial";

  document.getElementById("p2").style.fontSize="larger";

  </script>

  </body>

  </html>

运行结果：

创建新的HTML元素

如需向HTML DOM添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

例子：

 <!--

 @author:CodingMengmeng

 @theme:Demo for creating new html element by DOM

 @time:2017-2-25 13:28:15

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <!DOCTYPE html>

  <html>

  <body>

  <div id="div">

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

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

  </div>

  <script>

  var para=document.createElement("p3");//create a new html element.

  para.style.color="red";

  var node=document.createTextNode("This is a new paragraph.");//create text node

  para.appendChild(node);//add the text node to para

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

  element.appendChild(para);//add the para element to div element

  </script>

  </body>

  </html>

运行结果：

上一个例子中的appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，你可以使用 insertBefore() 方法：

 <!--

 @author:CodingMengmeng

 @theme:Demo for creating new html element by DOM

 @time:2017-2-25 13:49:11

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <!DOCTYPE html>

  <html>

  <body>

  <div id="div">

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

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

  </div>

  <script>

  var para=document.createElement("p3");//create a new html element.

  para.style.color="red";

  var node=document.createTextNode("This is a new paragraph.");//create text node

  para.appendChild(node);//add the text node to para

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

 // element.appendChild(para);//add the para element to div element(to the end)

  var child=document.getElementById("p1");

  element.insertBefore(para,child);//add the para element to div element(before the specified element)

  </script>

  </body>

  </html>

运行结果：

删除已有的HTML元素

如需删除HTML元素，必须清楚该元素的父元素：

 <!--

 @author:CodingMengmeng

 @theme:Demo for delete the html element by DOM

 @time:2017-2-25 13:51:50

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <!DOCTYPE html>

  <html>

  <body>

  <div id="div">

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

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

  <input type="button" value="click me" onclick="myFunction()" />

  </div>

  <script>

  //function to delete a html element

  function myFunction()

  {

      var parent=document.getElementById("div");

      var child=document.getElementById("p1");

      parent.removeChild(child);

  }

  </script>

  </body>

  </html>

运行结果：

点击按钮后：

替换HTML元素

如需替换HTML DOM中的元素，请使用replaceChild()方法：

 <!--

 @author:CodingMengmeng

 @theme:replace the html element by DOM

 @time:2017-2-25 14:02:57

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <!DOCTYPE html>

  <html>

  <body>

  <div id="div">

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

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

  <input type="button" value="click me" onclick="myFunction()"/>

  </div>

  <script>

  //function to replace a html element

  function myFunction()

  {

      var parent=document.getElementById("div");

      var child=document.getElementById("p1");

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

      para.style.color="blue";

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

      para.appendChild(node);

      parent.replaceChild(para,child);

  }

  </script>

  </body>

  </html>

运行结果：

点击按钮后：

HTML DOM - 事件

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

如需在用户点击某个元素时执行代码，请把JavaScript代码添加到HTML事件属性中：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

onload和onunload事件

当用户进入或离开页面时，会触发onload和onunload事件。

onload事件可用户检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload和onunload事件可用于处理cookies。

实例：

 <!--

 @author:CodingMengmeng

 @theme:onload检测浏览器是否已启用cookies

 @time:2017-2-25 14:34:46

 @blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <!DOCTYPE html>

  <html>

  <body onload="checkCookies()">

  <script>

  //function to check cookies

  function checkCookies()

  {

      if(navigator.cookieEnabled==true)

      {

          alert("Cookies are enabled");

      }

      else

      {

          alert("Cookies are not enabled");

      }

  }

  </script>

  <p>弹出的提示框会告诉你浏览器是否已启用Cookies。</p>

  </body>

  </html>

运行结果：

onchange事件

onchange 事件常用于输入字段的验证。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数：

 <!--

 @author:CodingMengmeng

 @theme:onchange事件用于输入字段的验证

 @time:2017-2-25 14:44:48

 blog:http://www.cnblogs.com/codingmengmeng/

  -->

  <html>

  <body>

  <p>Please input your English name:<input type="text" id="fname" onchange="myFunction()"/></p>

  <p>当你离开输入框时，被触发的函数会把输入的文本转换为大写字母。</p>

  <script>

  function myFunction()

  {

      var x=document.getElementById("fname");

      x.value=x.value.toUpperCase();

  }

  </script>

  </body>

  </html>

运行结果：

离开输入框后，变为：

HTML DOM总结

本文粗略地记录了如何使用HTML DOM来增强网站的动态交互性，为自己涉足Java Web领域迈出一小步。

浅介HTML DOM的更多相关文章

Backbone.js源码浅介
终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Bac ...
浅谈JavaScript DOM编程艺术读后感和一点总结
最近工作不是很忙就想想想JavaScript的内部组成和一些要点,就是从这本书开始的.对新手来说还好,简单易懂. 简单终结下我重书中学到的一些要点. 下面都是个人学习的要点提取: 1.给自己预留退路, ...
浅谈 Virtual DOM 的那些事
背景我们都知道频繁的dom给我们带来的代价是昂贵的,例如我们有时候需要去更新Table 的部分数据,必须去重新重绘表格,这代价实在是太大了,相比于频繁的手动去操作dom而带来性能问题,vdom很好的 ...
javascript的AMD规法--esl与requirejs浅介。
AMD规范,全称是Asynchronous Module Definition,即异步模块加载机制.从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制 ...
linux脚本编程(shell)浅介（转载）
linux脚本(shell)编程啊,昨天上网看到一篇讲 linux/unix shell 的文章,想想自己最后写这东西也是一年前的事了,想想都快忘光了. 还是整理一下,做一次回顾,以后说不定还用得上 ...
浅介MVC与Backbone
1.MVC是什么东西? MVC (Modal View Controler) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controll ...
MySQL版本浅介
一.关于MySQL发行版介绍: 1. MySQL官方发行版 MySQL是最流行的数据库,主要特点: 简单:MySQL使用很简单,可以无师自通地参照文档安装运行和使用MySQL,几乎没有什么门槛. 开源 ...
浅谈DOM性能考虑
浅谈DOM性能考虑很多人都会忽视脚本对Web应用整体性能的影响.为保证应用的流畅运行,在为文档编写和应用脚本时,需要注意一些问题.一.尽量减少访问DOM和尽量减少标记访问DOM的方式对脚本性 ...
Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

随机推荐

评论beta发布
1. 组名:飞天小女警项目名:礼物挑选小工具评价:该系统可以通过选择所要接礼的人的性别.年龄和与送礼者的关系及所要送礼的价值,就可以推荐出所送的礼物.还可以通过男/女所选的Top前10进行简单推荐 ...
[windows]转帖 windows 版本的含义
1.N是None的意思,由于欧洲反垄断法不让系统捆绑浏览器ie和播放器.LTSB全称为Long Term Support Branch,意思为长期支持分支,是给Windows 10企业用户的一个更新选 ...
mybatis 注解和xml 优缺点
xml: 增加了xml文件,修改麻烦,条件不确定(ifelse判断),容易出错,特殊转义字符比如大于小于注释: 复杂sql不好用,搜集sql不方便,管理不方便,修改需重新编译 #和$区别: 相同都 ...
简单封装DBUtils 和 pymysql 并实现简单的逆向工程生成class 类的py文件
这里使用的 Python 版本是:Python 3.6.0b2. 涉及的三方库:DBUtils.pymysql 1.ConfigurationParser 通过调用Python内置的 xml.dom. ...
数据库中增加操作insert into的用法和查询select的用法
insert into的用法 1.一条insert into 可以插入多条记录 2.insert into 能判断主键是否冲突,和做出冲突处理如果主键冲突的话会报错,还能写成如果冲突就更新的形式格式 ...
delphi JPG或BMP图片透明显示
procedure SaveBmpAsIcon(const Bmp: TBitmap; const Icon: string; const SmallIcon: Boolean; const Tran ...
【刷题】BZOJ 1487 [HNOI2009]无归岛
Description Neverland是个神奇的地方,它由一些岛屿环形排列组成,每个岛上都生活着之中与众不同的物种.但是这些物种都有一个共同的生活习性:对于同一个岛上的任意两个生物,他们有且仅有一 ...
学习Spring Boot：（十六）使用Shiro与JWT 实现认证服务
前言需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时access_token进行资源访问.这里我们将使用 JWT 1,基于散列的消息认证码,使用一 ...
DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)
直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...
M公司的回忆录——L公司
2013年3月笔者回国的第一站便是这人称有福之州的福州.受我兄弟之邀笔者来到了L公司.而这也是笔者与M公司相遇的前缘.此时的L公司只是一个刚起步的创业公司.与所有创业公司一样子——创业初期存在着很多问 ...

浅介HTML DOM

浅介HTML DOM的更多相关文章

随机推荐

热门专题