浅介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文档的应用编程接口. 怎么说,我从两 ...

随机推荐

HDU 2088 Box of Bricks
http://acm.hdu.edu.cn/showproblem.php?pid=2088 Problem Description Little Bob likes playing with his ...
C++ STL 整理
一.一般介绍 STL(Standard Template Library),即标准模板库,是一个具有工业强度的,高效的C++程序库.它被容纳于C++标准程序库(C++ Standard Library ...
oracle-表空间剩余空间大小占比查询
select tablespace_name, max_gb, used_gb, round(100 * used_gb / max_gb) pct_used from (select a.table ...
Vue入门---属性、style和class绑定方法
一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
【Mysql】根据时间去除重复数据
SELECT a.project_id,a.user_id,a.app_version,a.src_system,a.channel,a.thedate FROM rpt_innoreport_luc ...
pgm2
MRF 笔记我们先讨论引入 MRF 的必要性.经典的例子就是四个 r.v.s 连成一个正方形的结构的时候,我们没法通过 BN 获得给定对角线两个 r.v.s 而剩下的条件独立(不都是 d-sep), ...
Spring MVC 异步测试
从spring3.2开始,支持servlet3的异步请求,这对于处理耗时的请求如缓慢的数据库查询是非常有好处的,不至于很快的耗光servlet的线程池,影响可扩展性. 让我们先来了解一下servlet ...
oracle clob blob dblink
Create global temporary table temp on commit preserve rows as select * from abc@xxx select * from te ...
Codeforces 817
A 你可以按如下方式移动问能不能从给定的一个坐标走到另一个. [solution] 裸,奇偶性注意 #include<stdio.h> #include<stdlib.h> ...
【hdu3842】 Machine Works
http://acm.hdu.edu.cn/showproblem.php?pid=3842 (题目链接) 题意一个公司使用一个厂房$D$天,希望获利最大.有$n$台机器,每一台可以在第$D_i$天 ...

浅介HTML DOM

浅介HTML DOM的更多相关文章

随机推荐

热门专题