动态HTML和W3C文档对象模型

最新推荐文章于 2021-07-20 17:06:26 发布

Archer_An

最新推荐文章于 2021-07-20 17:06:26 发布

阅读量638

点赞数

分类专栏： JavaScript 文章标签： html w3c 对象标准文档

本文链接：https://blog.csdn.net/haandxc/article/details/50908377

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、Web标准

1994年，Tim创立了万维网联盟（World Wide Web Consortium，W3C），该组织致力于Web技术演变的管理。它主要有三个目标：

提供通用的访问技术，让任何人都能使用Web
开发相应的软件环境，允许用户利用Web
指导Web的发展，考虑由Web引发的法律、社会和经济问题。

HTML4.01是一个相对稳定的HTML标准，其中包含了大量的特性，20世纪90年代后期，引入了一批新标准来控制HTML的呈现方式（样式表）和HTML在脚本中的表示方式（DOM）。还建立了其它标注，如可扩展标记语言（XML）。

HTML标准由W3C维护。这个标准看起来简单，但是每一版本都在引入新的元素，目前已经到了HTML5版本了。XML是一个创建标记语言的的标准，XML本身看上去与HTML非常相似，但二者存在本质上的区别。XML一个用途是用来表示数据，普通的数据库可以保存信息，但是不允许其存储的项包含结构信息。XML则可以使用标记语言的元素结构来表示任何类型的数据。XHTML1.0则是XML与HTML标准的结合。

XHTML还提供了一种通用的方法来定义自己的元素，而不能随意的添加元素，可以使用XML DTD和XML名称空间。这特别适用于新的标记语言。因此，任何熟悉HTML的人都应能查看XHTML页面。下面列出了XHTML与HTML的主要区别：

XHTML建议在文件顶部的第一行放置一个XML的声明，其格式为：<?xml version='1.0'?>
在文件顶部还必须提供一个DTD声明，指出所使用的DTD标准的版本。
在HTML元素中必须添加对XML名称空间的引用。
由于XML区分大小写，因此所有的XHTML元素名都必须是小写。
<head/>和<body/>元素必须总是包含在XHTML文档中。
必须正确的关闭和嵌套标记。只需要一个标记时，如换行标记，必须用一个斜线关闭该标记，例如<br/>。
属性的值必须用引号括起来。

2、文档对象模型

如前所述：文档对象模型（DOM）是一种独立于浏览器类型来表示文档的方法。它允许开发人员通过一组通用的对象、属性、方法和事件来访问文档，并通过脚本动态修改网页内容。可以使用几种脚本语言，如JavaScript 和 VBScript。

2.1 DOM标准

DOM标准不是最容易理解的一种标准。DOM(文档对象类型)和BOM（浏览器对象类型）之间存在两个主要的区别，主要区别如下：

首先，DOM仅包含Web页面的文档，而BOM提供了浏览器各个领域的脚本编程访问，包括按钮、标题栏以及页面的某些部分。
其次，BOM专用于某个浏览器。浏览器是不能标准化的，因为它们必须提供有竞争力的特性。因此，需要另外一组属性、方法甚至对象，才能使用JavaScript操作它们。

2.2 基本的DOM对象

对象	说明
Node	文档中每个节点都有自己的Node对象
NodeList	这是Node对象的列表
NamedNodeMap	允许按名称（而不是按索引）访问所有的Node对象

2.3 高级DOM对象

对象	说明
Document	文档的根节点
DocumentType	XML文档的DTD或模式模型
DocumentFragment	文档部分的临时存储空间
EntityReference	XML文档中的实体引用
Element	文档中的一个元素
Attr	文档中元素的一个属性
ProcessingInstruction	处理指令
Comment	XML文档或HTML文档中的注释
Text	构成元素子节点的纯文本
CDATASection	XML文档中的CDATA部分
Entity	DTD中未解析的实体
Notation	DTD中声明的记号

2.3 DOM对象及其属性和方法

如果要讨论DOM中所有对象的属性和方法，则需要很长的篇幅。本文中则只针对于Node、Element和 Document。通过这三个对象，就可以创建、修改和导航树形结构。本文中只讨论最常用的属性和方法，使用它们实现指定的功能。

2.3.1 Document对象及方法

Document引用类型提供了各种属性和方法，非常有助于编写DOM的脚本。其方法允许查找单个元素或者元素组，创建新元素、属性和文本节点。任何DOM编写脚本人员都应该了解这些方法好属性，因为它们确实非常有用。Document对象的方法可能是最重要的。尽管我们有许多工具，但只有Document对象的方法可以在页面上查找、创建和删除元素。

查找一个或多个元素

doucment对象的方法	说明
getElementById(idValue)	根据所提供的元素的id值，返回对该元素的引用（节点）
getElementsByTagNmae(tagName)	根据参数中提供的标记，返回对一组元素的引用（节点列表）

举例说明getElementsByTagNmae(tagName)的使用，getElementsByTagNmae(tagName) 的工作方式与 getElementById(idValue)是相同的，但是它可以返回多个元素，所以应该在使用时指定特定元素的索引号。可以使用方括号来指定，另一种方法是使用NodeList对象的item() 方法，具体实现代码及效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>getElementByTagName() Test</title>	 
</head>

<body>
    <span>Below is a table</span>
	<table border="1">
	    <tr>
		   <td>ROW 1  CELL 1</td>
		   <td>ROW 1  CELL 2</td>
		</tr>
		
		<tr>
		   <td>ROW 2  CELL 1</td>
		   <td>ROW 2  CELL 2</td>
		</tr>
	</table>
</body>

<script type="text/javascript">
	      var tagElements=document.getElementsByTagName("td");
		  var length=tagElements.length;
		  for(var i=0;i<length;i++)
		  {
		     tagElements[i].style.color="red";
		  }
</script>

</html>

效果如下图所示：

查找一个或多个元素

Document对象的方法	说明
createElement(elementName)	使用指定的标记名创建一个元素节点，返回所创建的元素
creatTextNode(text)	创建并返回包含所提供文本的文本节点

下面的代码演示了这些方法的使用：

var pElement = document.creatElement("p");
var text  = document.creatTextNode("This is some text.");

Document对象的属性：获取文档的根元素

要使用文档document对象的一个特殊属性，该属性返回文档的最外层元素。在HTML中，它应总是<html/>元素。返回这个元素的属性是documentElement。

Document对象属性	说明
documentElement	返回对文档最外层元素的引用（即根元素）

2.3.2 Element对象及方法

Element对象非常简单，与Node对象相比尤其如此，它只有几个成员（属性和方法）。

成员名	说明
tagName	返回元素的标记名称
getAttribute()	获取属性的值
setAttribute()	用指定的值设置属性
removeAttribute()	从元素中删除指定的属性及其值

如果要设置元素中除style之外的其他属性，应使用Element对象专用于DOM的方法。可以用于返回和修改HTML元素属性的内容的3个方法是getAttribute()、setAttribute()和removeAttribute()。下面代码简要说明下这几个方法的使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>getAttribute() Test</title>	 
</head>

<body>
     <p id="paragraph1"> This is some text.</p>
	 <script type="text/javascript">
	    var pElement = document.getElementById("paragraph1");
		pElement.setAttribute("align","center");
		alert(pElement.getAttribute("align"));
		pElement.removeAttribute("align");
	 </script>
</body>
</html>

在浏览器打开后。屏幕中央会显示<p/>元素的文本，警告框真现实文本center，点击OK按钮后，文本恢复左对齐。

2.3.3 Node对象及方法

从网页中获取了元素后，如果要在页面中一个元素一个元素或一个属性一个属性地访问，该怎么办？这需要返回到更低层次。要遍历元素、属性和文本，需要沿着树形结构的节点移动。至于节点包含什么内容，甚至节点是什么类型，都是无关紧要的。因此需要使用DOM核心规范的一个对象Node，整个树形结构都是由这些基本的Node对象构成的。

Node对象：导航DOM

下表列出了Node对象的常用属性，这些属性提供了节点的信息，即当前节点是元素、属性还是文本，并可以从一个节点移到另一个节点。

Node对象的属性	对象属性的说明
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
previousSibling	在同级子节点中，返回当前子节点的前一个兄弟节点
nextSibling	在同级子节点中，返回当前子节点的后一个兄弟节点
ownerDocument	返回包含节点的文档的根节点
parentNode	返回树形结构中包含当前节点的元素
nodeName	返回节点的名称
nodeType	返回一个数字，表示节点的类型
nodeValue	以纯文本格式获取或设置节点的值

下表列出了Node对象的方法：

Node对象的方法	说明
appendChild(newNode)	将一个新的Node对象添加到子节点的末尾。该方法返回追加的节点
cloneNode(cloneChildren)	返回当前节点的一个副本。该方法的参数是一个布尔值，如果该值为 true，则克隆当前节点及其所有的子节点。如果该值为false，则仅克隆当前节点，而不包含其子节点。
hasChildNodes()	如果节点上有子节点，则返回true，否则返回false。
insertBefore(newNode,referenceNode)	在referenceNode指定的节点前，插入一个node对象，返回新插入的节点。
removeChild(childNode)	从Node对象的子节点列表中，删除一个子节点，并返回删除的节点。