<html>
<head>
<title>DOM 文档</title>
<script language="javascript">
//加载数据
function loadDatas(){
//创建一个H3对象
var h3 = document.createElement("h3");
//设置属性 对齐方式
h3.setAttribute("align","center");
//H3文本对象
var h3Text = document.createTextNode("DOM Document Object Model");
h3.appendChild(h3Text);
//添加至body对象中
document.body.appendChild(h3);
//创建HR水平线
var hr = document.createElement("hr");
document.body.appendChild(hr);
//创建表格对象
var table = document.createElement("table");
table.setAttribute("align","center");
table.setAttribute("width","50%");
table.setAttribute("border",1);
//添加至body对象中
document.body.appendChild(table);
//表格对象添加caption对象
var caption = table.createCaption();
caption.appendChild(document.createTextNode("Student Infomation"));
//创建列标题对象
var head = table.createTHead();
//列标题行
var headRow = head.insertRow(0);
headRow.setAttribute("align","center");
headRow.setAttribute("bgColor","#bbbddd");
//列标题行对象 创建单元格对象
var firstCell = headRow.insertCell(0);
firstCell.appendChild(document.createTextNode("ID"));
//等价于
headRow.insertCell(1).appendChild(document.createTextNode("NAME"));
headRow.insertCell(2).appendChild(document.createTextNode("Grade"));
headRow.insertCell(3).appendChild(document.createTextNode("Class"));
var firstRow = table.createTHead();
var row1 = firstRow.insertRow(1);
row1.insertCell(0).appendChild(document.createTextNode("1001"));
row1.insertCell(1).appendChild(document.createTextNode("张 三"));
row1.insertCell(2).appendChild(document.createTextNode("S2"));
row1.insertCell(3).appendChild(document.createTextNode("T203"));
var secondRow = table.createTHead();
var row2 = secondRow.insertRow(2);
row2.insertCell(0).appendChild(document.createTextNode("1002"));
row2.insertCell(1).appendChild(document.createTextNode("李 四"));
row2.insertCell(2).appendChild(document.createTextNode("S1"));
row2.insertCell(3).appendChild(document.createTextNode("T107"));
var thirdRow = table.createTHead();
var row3 = firstRow.insertRow(3);
row3.insertCell(0).appendChild(document.createTextNode("1003"));
row3.insertCell(1).appendChild(document.createTextNode("王 五"));
row3.insertCell(2).appendChild(document.createTextNode("Y2"));
row3.insertCell(3).appendChild(document.createTextNode("T316"));
}
</script>
</head>
<body onLoad="loadDatas()">
</body>
</html>
分享到：
相关推荐
XML（eXtensible Markup Language）是一种用于存储和传输...通过学习和实践这个“XML的DOM编程实例”，开发者不仅能掌握DOM解析的基本原理，还能了解到如何在实际项目中结合GUI来操作XML数据，提升软件的交互性和功能。
JavaScript 中 Dom 操作实例详解 在 JavaScript 中，DOM 操作是指对 HTML 文档中的元素节点进行操作，包括增加、删除、修改和查找节点等。以下是 JavaScript 中 DOM 操作的实例详解。 一、增加节点 增加节点的...
除了基本的DOM操作，本实例还涉及到.NET控件的应用。在.NET框架中，丰富的Windows Forms和WPF控件库可以方便地用于显示和编辑XML数据。例如，`TreeView`控件可以用来展示XML文档的层次结构，`DataGridView`可以显示...
1. **DOM操作**：利用JavaScript直接操作DOM元素，如查找、创建、修改和删除元素。 2. **DOM事件**：使用JavaScript处理用户交互，如点击、鼠标移动、键盘输入等。 3. **DOM动画**：通过改变DOM元素的属性实现平滑的...
在实际开发中，需要注意跨域问题，因为出于安全考虑，不同源的`iframe`之间不能自由地进行DOM操作和数据交互，除非两个页面都设置了正确的`CORS`策略。此外，`iframe`的加载可能有延迟，因此在操作`iframe`内的元素...
2. 使用工厂实例创建`DocumentBuilder`对象： ```java DocumentBuilder dBuilder = dbFactory.newDocumentBuilder(); ``` 3. 加载XML文件并解析成`Document`对象： ```java InputStream is = context.getResources()...
2. 避免大量DOM操作，可一次性修改多个属性，或者使用文档片段（`DocumentFragment`）批量添加元素。 3. 使用事件委托降低事件监听器的数量，提高性能。 总结，"DOM编程手册.chm"涵盖了DOM的核心概念、API使用和...
二、使用 DOM 解析 XML 文档 使用 DOM 解析 XML 文档需要以下步骤： 1. 创建 DocumentBuilderFactory 对象，用于创建 DocumentBuilder 对象。 2. 使用 DocumentBuilder 对象解析 XML 文档，获取 Document 对象。 3...
在DOM实例中，我们可以使用`getElementById`、`getElementsByTagName`、`querySelector`等方法查找特定的元素，`innerHTML`和`textContent`属性用来读取或设置元素的内容，`appendChild`、`insertBefore`、`...
DOM（Document Object Model）是W3C制定的一种标准，它为XML和HTML文档提供了一种...在2Code和3Code这两个文件中，可能包含了这些库的具体使用示例，学习和理解这些源码可以帮助你更好地掌握DOM、JDOM和dom4j的用法。
在这个实例中，我们将深入探讨如何使用DOM4J解析XML文件，并通过`Dom4jTest1.java`这个示例程序来理解其工作原理。 首先，我们需要了解XML（Extensible Markup Language）是一种标记语言，常用于存储和传输数据。...
在这个实例中，我们将深入理解DOM4J的核心概念，并通过实际操作来展示其基本用法。 1. **DOM4J概述** DOM4J的核心理念是基于Java集合框架，使得XML处理更加直观。它支持XML Schema，XPath以及Java注解，提供了包括...
本文将深入探讨如何使用DOM4J进行XML解析，并通过实例来帮助理解。 首先，让我们了解DOM4J的基本概念。DOM4J是基于DOM（Document Object Model）模型的，但它比标准DOM更加轻量级，性能更好。DOM4J提供了丰富的接口...
在这个"(JavaScript)Dom入门35个简单实例"的压缩包中，你将找到一系列帮助初学者理解DOM操作的实践教程。 1. **添加和删除元素**：在这些实例中，你将学习如何使用`createElement()`和`appendChild()`方法动态创建...
本实例主要关注JavaScript中的DOM操作，包括选择元素、添加删除元素、修改元素内容以及事件处理等方面。** ### 1. 选择元素 在JavaScript中，我们可以使用不同的方法来选取页面上的元素。最基本的有`getElementById...
2. **创建DocumentBuilder对象**：接下来使用`DocumentBuilderFactory`创建`DocumentBuilder`实例，它负责将XML文件转换为DOM树。 ```java DocumentBuilder builder = factory.newDocumentBuilder(); ``` 3. *...
此文档包含了Dom4J常用的操作（对于一般的应用足够了）和实例，可模仿开发
DOM（Document Object Model）是W3C组织推荐的一种解析XML的标准API，它将XML文档转换为一个可操作的对象树，使得开发者可以通过编程方式对XML文档进行读取、修改和创建。 在Java中，DOM解析主要通过`javax.xml....
这些例子可能包括如何获取特定元素、改变元素的属性、响应用户事件、动态插入和删除内容等常见DOM操作。 4. **HTML教程与文档** "HTML教程.doc"和"HTML 4.doc"可能包含了HTML的基础知识，帮助学习者了解HTML标记...
收集副作用的机制使得React能够高效地管理和批处理副作用，避免不必要的DOM操作，提高应用性能。例如，当一个组件内部有多个副作用操作时，React会将它们一次性处理，而不是在每次变更时立即执行，这样可以减少不必...