下面是一个遍历文档的例子，通过使用Dom将一个HTML文档解析成树状的结构！
在Dom眼中，HTML跟XML一样是一种树状结构的文档<html>是根root
<head><title><body>是html的childre节点，相互之间是兄弟sibling
<body>下面才是子节点<table><span><p>
例子1遍历HTML树
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch04--统计Element节点总数</title>
<script language="javascript">
var elementName = ""; //全局变量，保存Element标记名，使用完毕要清空
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //检查node是否为Element对象
total++; //如果是，计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记名
}
var childrens = node.childNodes; //获取node的全部子节点
for(var i=0;i<childrens.length;i++) {
total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作
}
return total;
}
</script>
</head>
<body>
<table width="100" border="1" cellpadding="0" cellspacing="0">
<tr><td>
<form name="form1" action="" method="post">
<input type="text" name="input1" value=""><br>
<input type="password" name="password1" value="">
</form>
</td></tr>
</table>
<a href="javascript:void(0)"
onClick="alert('标记总数：' + countTotalElement(document) + '\r\n全部标记如下：\r\n' + elementName);elementName='';">开始统计</a>
</body>
</html>
案例2 通过DOM编程来灵活的生成页面内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch04--颠倒表格行顺序</title>
<script language="javascript">
function reverseTable() {
var node = document.getElementsByTagName("table")[0]; //第一个表格
var child = node.getElementsByTagName("tr"); //取得表格内的所有行
var newChild = new Array(); //定义缓存数组，保存行内容
for(var i=0;i<child.length;i++) {
newChild[i] = child[i].firstChild.innerHTML;
}
node.removeChild(node.childNodes[0]); //删除全部单元行
var header = node.createTHead(); //新建表格行头
for(var i=0;i<newChild.length;i++) {
var headerrow = header.insertRow(i); //插入一个单元行
var cell = headerrow.insertCell(0); //在单元行中插入一个单元格
//在单元格中创建TextNode节点
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));
}
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0">
<thead>
<tr>
<td height="25">第一行</td>
</tr>
<tr>
<td height="25">第二行</td>
</tr>
<tr>
<td height="25">第三行</td>
</tr>
<tr>
<td height="25">第四行</td>
</tr>
</thead>
</table>
<br>
<input type="button" name="reverse" value="开始颠倒" onClick="reverseTable()">
</body>
</html>
分享到：
相关推荐
《HTML5与CSS3实例教程（第2版）》是一本深入浅出的教程，旨在帮助读者掌握HTML5和CSS3这两个现代网页开发的核心技术。HTML5是超文本标记语言的最新版本，它极大地扩展了网页内容的表示能力，而CSS3则是层叠样式表的...
本次实验是软件技术基础课程的第二次实验，分为Exercise3—Catfish和Exercise4—Alive-basic两部分，旨在巩固和提升学生对Java基础知识的理解，特别是类的定义、属性和方法的运用。实验主要围绕一个名为“catfish”...
"慈善基金会非营利组织响应式HTML模板"专为慈善和非营利机构设计，旨在帮助这些组织在互联网上建立专业且适应性强的在线平台。 在构建此类模板时，开发人员通常会利用HTML5（超文本标记语言第五版）的最新功能，如...
HTML 通过一系列的标签来描述文档结构，如`<div>`、`<p>`、`<a>`等，这些标签帮助开发者组织内容，创建可读性强的网页。 - **CSS** (Cascading Style Sheets)：层叠样式表，主要用于描述 HTML 或 XML 文档的呈现...
- **HTML5**：HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它是由W3C（World Wide Web Consortium）组织制定的标准。相比之前的版本，HTML5在功能上进行了大幅扩展，引入了许多新特性，旨在...
jQuery组织结构图表插件OrgChart是一款用于创建直观、交互式层级架构图的工具，它基于流行的JavaScript库jQuery构建。在Web应用中，这种插件能够有效地展示公司组织结构、项目团队分布、流程图或者任何具有层次关系...
2. 掌握CSS3的选择器、布局模式、颜色和字体样式，以及动画和过渡效果的创建。 3. 学习如何利用HTML5的媒体元素和Canvas API创建多媒体内容和动态图形。 4. 熟悉响应式设计，利用媒体查询适应不同设备的显示需求。 5...
例如，`<header>`和`<footer>`元素使得网页结构更加清晰，`<nav>`用于定义导航区域，而`<article>`和`<section>`则帮助组织内容，提高了语义化程度。此外，`<video>`和`<audio>`元素允许在网页中内嵌多媒体内容，...
开发者可以通过阅读这些代码学习到如何在.NET环境下组织代码结构，实现MVC模式，以及如何处理HTTP请求、响应，进行数据验证和业务逻辑处理等。 【"项目文档"】则可能包括设计文档、用户手册、安装部署指南等，它们...
这两个组织在2006年决定共同制定HTML的新版本，旨在解决Web表单和应用程序的需求，同时兼顾XHTML2.0的发展方向。HTML5的设计原则包括：基于现有技术如HTML、CSS、DOM和JavaScript构建新特性；减少对外部插件的依赖，...
双方的合作旨在统一 Web 技术的发展方向，创建新的 HTML 版本。 - **HTML5 的发展原则**： - 新特性应基于 HTML、CSS、DOM 和 JavaScript。 - 减少对外部插件（如 Flash）的依赖。 - 更优秀的错误处理机制。 - ...
1. **新元素的引入**：HTML5新增了多个语义化标签，如、、、、等，这些元素帮助开发者更好地组织网页结构，提高网页的可读性和SEO效果。 2. **多媒体支持**：HTML5内置了对音频和视频的支持，通过和标签，开发者...
响应式设计是网页设计的一种策略，允许页面根据用户使用的设备（如桌面、平板电脑或手机）的屏幕尺寸和方向自动调整其布局、图片大小以及功能。这种技术的出现，极大地解决了多平台浏览的问题，使得网站在任何设备上...
数据结构是计算机科学中的核心课程之一，主要研究数据如何在计算机中组织、存储和操作，以便高效地进行访问和处理。严蔚敏教授编著的数据结构习题集是该领域内的经典参考资料，对于学习和理解数据结构有极大的帮助。...