一 节点(Node)与元素(Element)
在HTML中每一个tag都被看成一个Element,而Element也是Node类型。也就是说元素仅仅是一种特殊的节点，在HTML常用的节点类型有:
1. 元素节点 (整个tag标签)
2. 属性节点 (标签里面的属性)
3. 文本节点 (始末标签里面的文本)
4.
文档节点 (整个文档对应document对象)
下面文档
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="#">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
的DOM树如下
二 javascript中的节点
既然DOM规范中有节点的概念，那么在相关的语言实现中就有节点对象。在javascript中就是Node对象。
1. 首先因为节点有元素节点，文本节点等等，所以它用nodeType属性来表示
2. 有时候我们需要知道节点的名字，如元素节点，所以有nodeName属性
3. 对文本节点等需要获取它的内容，可以通过nodeValue属性
4. 节点下面可以有子节点, 可以通过childNodes属性,有时候之需要获取子元素节点，则可用children属性
5. 节点可以有属性如元素节点，可以通过attributes属性。注意属性节点不是该节点的子节点，它们是同级的，在上图中可以看出。
绘制成一张表如下:
|
nodeType |
nodeName |
nodeValue |
| 文档节点 |
9 |
#document
|
不可用
|
| 元素节点 |
1 |
标签名称
|
不可用
|
| 属性节点 |
2 |
属性名称
|
属性值
|
| 文本节点 |
3 |
#text
|
文本
|
三 几个特殊的节点
1. document节点
这个就是文档节点，所有节点的祖先。对全局的节点的访问需要使用它。
2. html节点
document节点指整个文档节点，但有时候html节点也可以等效于整个文档。因为我们获取的信息都在html标签里面。
要注意html并非总是document的第一个子节点，因为有时候我们会在html上加上<doctype>。
获取html节点可以用 var oHtml = document.documentElement
3. body节点
一个html节点不会多余两个子节点(html应该总写上head跟body)，一个是head,一个是body.。所以获取它们的方法是(对文档的操作应该在文档加载完毕后，不要在body还未加载就进行dom操作)：
var oHead = oHtml.firstChild
var oBody = oHtml.lastChild 或 var oBody = document.body
四 getElementById与通用元素选择器
在所有的DOM查找中可能getElementById这种方式最常用了，但是正如它的名字一样它只能返回一个元素，对于存在同名ID的元素这种方式就不太实用了。另外该方法只有document节点可以调用，元素节点是没有这个方法的。
有时候我们需要查找页面上所有的元素，当然你可以使用遍历然后判断是否是元素节点这种方法。幸运的是css选择器为我们提供了通用元素选择器*,只需要getElementsByTagName("*")就可以获取页面全部元素了。
五 appendChild方法
这里列出这个，只想说明一点。此方法的调用不仅仅具有把节点绑定到目标节点作为其子节点，同时还会删掉其原来的父节点的联系。如下面的代码，没有显示在form1删掉fom1_text,但是appendChild后在form1下面已经不存在fom1_text了
var form1 = document.getElementById("form1");
var form2 = document.getElementById("form2");
var fom1_text = document.getElementById("fom1_text");
form2.appendChild(fom1_text);
六 DOM树构建完成事件
这里的DOM事件是指与DOM树操作相关的事件,如：节点的删除，添加，修改均会促发相应的事件，但是这些事件基本不用，在引入了jQuery之后有一个我们经常就用到了，那就是DOMContentLoaded.
这个事件在DOM树创建完毕之后促发，DOM树创建完毕不等于页面载入完毕，因为页面还需要载入图片的信息的。所以它是先与window.onload事件的。测试代码:
window.addEventListener("load",function(){
alert("文档加载完毕");
},false);
document.addEventListener("DOMContentLoaded",function(){
alert("DOM树加载完毕");
},false);
七 文档碎片
每次对文档进行操作，如添加，删除，修改节点等操作都会使DOM树重构。如果我们添加100个节点将会引发100次DOM树重构（不会再促发DOMContentLoaded事件），这个效率是十分低下的。
可以用一种文档碎片的方法来解决这个问题，它的思路是将这些节点先放在一个叫文档碎片的地方，然后一次性的更新到目标文档里面。那么上面的100次DOM树重构就变成了一次。它除了有这个功能，它的临时存储空间的概念也会使我们的程序逻辑更加清晰，如下面的表格排序：
<input type="button" value="test" id="btm_id"/>
<table border="1" id="table_id">
<tr><td>4</td></tr>
<tr><td>2</td></tr>
<tr><td>5</td></tr>
<tr><td>1</td></tr>
<tr><td>3</td></tr>
</table>
document.addEventListener("DOMContentLoaded",function(){
alert("DOM树加载完毕");
document.getElementById("btm_id").addEventListener("click",function(){
//创建文档碎片
var oFragment = document.createDocumentFragment();
var oTable = document.getElementById("table_id");
var rows = oTable.getElementsByTagName("tr");
//创建TR数组
var aTrs = [];
for(var i=0;i<rows.length;i++) aTrs.push(rows[i]);
//排序,从小倒大
aTrs.sort(function(oTr1,oTr2){
var n1 = parseInt(oTr1.cells[0].firstChild.nodeValue);
var n2 = parseInt(oTr2.cells[0].firstChild.nodeValue);
if(n1 < n2) return -1;
else if(n1 > n2) return 1;
else return 0;
});
//添加到文档碎片
for(var i=0;i<aTrs.length;i++) oFragment.appendChild(aTrs[i]);
//添加到表格节点下，更新文档
oTable.appendChild(oFragment);
},false);
},false);
分享到：
相关推荐
HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM ...
HTML DOM（文档对象模型）是Web开发中的一个关键概念，它提供了一种结构化的方式来表示HTML或XML文档，并允许编程语言如JavaScript与这些文档进行交互。DOM将文档视为一棵由节点组成的树，其中每个节点代表文档的一...
王兴魁老师在“AJAX视频（Netbeans）DOM基础及DOM操作HTML”课程中，可能会深入讲解如何在实际开发中利用DOM进行AJAX（异步JavaScript和XML）通信。AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分...
标题《DOM基础》和描述《JavaScript DOM基础》表明这是一份关于JavaScript文档对象模型（Document Object Model，简称DOM）的入门级教学内容。DOM是编程语言中一个用于HTML和XML文档的API，它提供了一种方式，使得...
在"html.rar_dom基础学习"的压缩包中，001文件可能是该教程的起始部分，它可能涵盖了DOM的基本概念、基本操作以及简单的实例。通过学习这个教程，你可以掌握如何利用DOM来动态地操纵HTML文档，实现更丰富的交互效果...
要使用Simple HTML DOM，首先需要下载库文件，这里我们有一个名为`simplehtmldom_1_5`的文件，通常是一个包含`simple_html_dom.php`的压缩包。将其解压并引入到PHP项目中，即可开始使用。 5. **使用示例** - 加载...
这个“HTML DOM 参考手册”中的汉化版确保了国内开发者可以更方便地理解和应用DOM技术，无论是在创建动态网页、实现交互效果，还是在进行自动化测试和网页爬虫等方面，DOM都是不可或缺的知识基础。通过深入学习DOM，...
- `HTML DOM 教程.CHM`：这个教程涵盖了HTML DOM的基础知识，包括节点操作、事件处理等，适合初学者入门。 通过深入了解DOM4J和HTML DOM，开发者可以更好地处理XML和HTML文档，提高应用程序的灵活性和交互性。结合...
总的来说，理解和熟练掌握HTML DOM的元素操作是成为优秀Web前端开发者的基础。通过学习本教程，你将能够更加自如地使用JavaScript动态地改变网页内容，实现丰富的交互效果。这不仅提升了用户体验，也为网页应用的...
HTML、JavaScript、jQuery、CSS以及HTML DOM是构建现代网页和应用程序的基础技术。这些技术的参考手册提供了详尽的文档和指南，帮助开发者更好地理解和运用它们。 HTML（HyperText Markup Language）是网页内容的...
总结来说，手工HTML代码转换为DOM代码是JavaScript与网页交互的基础，通过DOM API我们可以对网页进行动态操作。理解这一过程并熟练运用相关方法，对于开发动态、交互性强的Web应用至关重要。在实际开发中，我们还...
【JS + HTML DOM】是关于JavaScript与...总的来说，"JS + HTML DOM"是前端开发的核心技能之一，它涵盖了从基础的页面交互到复杂的动态内容管理，对于任何希望构建交互性网页的开发者来说，都需要深入理解和熟练掌握。
在JavaScript的世界里，HTML DOM（Document Object Model）是网页内容的一种结构化表示，它允许我们通过编程...随着对DOM操作的熟练掌握，开发者能够更好地理解前端开发的核心原理，为后续的Web应用开发打下坚实基础。
【DOM基础】 DOM，全称为Document Object Model，是一种基于标准的、与语言无关的、平台无关的接口，用于访问和操作HTML、XML文档。它将网页内容抽象为一棵树形结构，允许开发者通过JavaScript或其他编程语言来遍历...
1. **DOM基础**：解释DOM是什么，它是如何工作的，以及它在Web开发中的角色。 2. **节点与节点类型**：包括元素节点、属性节点、文本节点等，以及它们之间的关系和遍历方法。 3. **选择节点**：如何使用`...
### Simple HTML DOM：下载与使用详解 #### 一、简介 Simple HTML DOM 是一个 PHP 库，用于解析和操作 HTML 文档。它提供了一种简单而直观的方式来处理 HTML 内容，使得开发者能够轻松地抓取网页数据、修改 HTML ...
文档对象模型（DOM，Document Object Model）是Web开发...以上是DOM基础中涉及到的关键知识点，它们构成了网页动态交互和内容管理的基础。通过深入理解和应用这些知识点，可以有效地控制网页元素的动态行为和样式表现。
DOM将HTML或XML文档表示为树结构，每个节点代表文档中的一个部分（例如一个元素、文本或属性），可以通过编程语言进行访问和修改。 2. DOM节点及其属性和方法 在DOM中，每个节点都有一系列属性和方法可以使用，例如...
DOM编程基础是网页开发中的重要概念，主要涉及如何使用JavaScript操作HTML页面的元素。DOM（Document Object Model）是HTML和XML文档的一种结构化表示，它将网页内容视为一系列可编程的对象，包括元素、属性和文本。...