DOM其实是一套操作XML文档的标准，不同语言都有实现。前面也提到，HTML有特有的DOM，HTML DOM主要是为了简化一些常用的操作。
1.直接访问HTML元素的属性
HTML元素具有各种各样的属性，如果按照DOM的方式来访问这些属性，则需要采用setAttribute()和getAttribute()方法。而HTML DOM简化了这个操作，可以直接通过.操作符直接访问这些属性。
假设网页中有一个img元素，<img src="img.jpg" border="1">，我们已经获取了该元素的DOM对象oImg，如果需要操作其src或者border属性，我们之前讲过，需要写下列代码：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","newImg.jpg");
oImg.setAttribute("border","2");
有了HTML DOM ，上面的代码可以写成：
alert(oImg.src);
alert(oImg.border);
oImg.src = "newImg.jpg";
oImg.border = "2";
基本上所有HTML元素的特性对应的属性都是一样的，只有下面的例外：
<div class="myCls"></div>
对于上面的div中的class特性，在使用HTML DOM操作的时候，就必须写成：
alert(oDiv.className);
oDiv.className = "newCls";
2. HTML DOM处理表格的方法
HTML的DOM给<table/><tbody/></tr>等元素添加了一些特性和方法，如下面几个表所示：
(1)给table添加的部分：
| caption |
指向<caption/>元素（如果存在） |
| tBodies |
<tbody/>元素的集合 |
| tFoot |
<tfoot/>元素集合 |
| tHead |
<thead/>元素集合 |
| rows |
表格中所有行的集合 |
| createTHead() |
创建<thead/>元素并且放入表格 |
| createTFoot() |
创建<tfoot/>元素并且放入表格 |
| createCaption() |
创建<caption/>元素并且放入表格 |
| deleteTHead() |
删除<thead/>元素 |
| deleteTFoot() |
删除<tfoot/>元素 |
| deleteCaption() |
删除<caption/>元素 |
| deleteRow(pos) |
删除指定位置的行 |
| insertRow(pos) |
在指定位置插入行 |
(2)<tbody/>元素添加了以下内容：
| rows |
<tbody/>中所有行的集合 |
| deleteRow(pos) |
删除指定位置的行 |
| insertRow(pos) |
在指定位置插入行 |
(3)<tr/>中添加的内容：
| cells |
元素中所有单元格的集合 |
| deleteCell(pos) |
删除制定位置单元格 |
| insertCell(pos) |
指定位置插入单元格 |
下面，使用HTML DOM写一个完整的添加表格的例子：
<html>
<head>
<title></title>
<script type="text/javascript">
function createTableUsingHtmlDOM() {
//创建表格
var oTbl = document.createElement("table");
oTbl.setAttribute("border","1");
oTbl.setAttribute("width","800");
//插入一行
oTbl.insertRow(0);
//插入一列
oTbl.rows[0].insertCell(0);
//给列加入文本内容
oTbl.rows[0].cells[0].appendChild(document.createTextNode("单元格11"));
//插入一列
oTbl.rows[0].insertCell(1);
//给列加入文本内容
oTbl.rows[0].cells[1].appendChild(document.createTextNode("单元格12"));
//插入一行
oTbl.insertRow(1);
//插入一列
oTbl.rows[1].insertCell(0);
//给列加入文本内容
oTbl.rows[1].cells[0].appendChild(document.createTextNode("单元格21"));
//插入一列
oTbl.rows[1].insertCell(1);
//给列加入文本内容
oTbl.rows[1].cells[1].appendChild(document.createTextNode("单元格22"));
//别忘了把表格加到<body/>里面去
document.body.appendChild(oTbl);
}
</script>
</head>
<body>
<input type="button" value="添加表格" onclick="createTableUsingHtmlDOM()">
</body>
</html>
至此，JavaScript DOM最基础的部分就学习完了。DOM还有很多很多其他的特性，在后续的学习中，如果接触到了，我会另外开一个小系列专门记录。
参考书目：
《JavaScript高级程序设计》
分享到：
相关推荐
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
前端学习（六）——javascript学习笔记（四）HTML DOM.xmind
### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM（Document Object Model）文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档（如HTML和XML）的标准方法来访问、修改文档...
这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...
韩顺平js-DOM学习笔记
在这个学习笔记中，涵盖了从基础到高级的JavaScript和DOM操作技巧，一共涉及1~9章的内容。以下是对这些章节知识点的详细阐述： **第1章：JavaScript简介** 本章介绍了JavaScript的基本概念，包括它是一种解释型、弱...
这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据，数据类型分为基本类型（如字符串...
这种内联事件处理虽然简单，但在大型项目中通常不推荐，因为会使得HTML和JavaScript代码混杂，难以维护。 ### `this`关键字与`event.srcElement` 在最后一个示例中，`this`关键字和`event.srcElement`属性的使用被...
在"Javascript_DOM学习笔记+代码"中，你可能会发现具体的示例代码和练习，这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践，你将能够熟练地操纵网页内容，创建动态交互的Web应用。
以上是JavaScript学习笔记中提到的一些核心知识点，通过对这些知识点的理解和熟练应用，可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中，结合具体的项目需求，这些知识会得到更深入的拓展和应用...
这份"Java JDK 6学习笔记——ppt简体版"提供了关于这个关键版本的详细教程，适合初学者和有一定经验的开发者来深入理解Java编程。 首先，我们要了解Java JDK是什么。Java Development Kit，简称JDK，是Oracle公司...
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
总的来说，JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用，是学习网页动态交互和JavaScript编程的重要资源。通过学习，开发者能够熟练地创建交互式、动态的网页内容。
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、meta、link、script 等标签的...
这份"Java JDK 6学习笔记——ppt简体版"很可能是对这一版本特性和使用方法的详细讲解，旨在帮助初学者和有经验的开发者深入理解JDK 6的核心功能和改进。 JDK（Java Development Kit）是Java编程语言的软件开发工具...
1. JavaScript基础知识：学习DOM编程之前，首先要掌握JavaScript的基础语法，包括变量声明、数据类型、控制结构（如if语句和循环）、函数定义与调用等。理解这些基础知识对于后面深入学习DOM操作至关重要。 2. DOM...
### JavaScript DOM 编程知识点详解 #### 一、DOM 基础概念 **DOM (Document Object Model)** 是一种用于表示 HTML 和 XML 文档的标准对象模型。它将文档定义为节点树，允许开发者通过编程方式访问和修改这些节点...