<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamically Editing Page Content</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doSearch() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "dynamicContent.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearPreviousResults();
parseResults();
}
}
}
/**
* @author wc_stone
* 清空header、tableBody元素中的所有子元素
*/
function clearPreviousResults() {
var header = document.getElementById("header"); //获取页面元素
if(header.hasChildNodes()) { //判断该元素是否有子元素
while(header.childNodes.length > 0) {
header.removeChild(header.childNodes[0]);
}
}
var tableBody = document.getElementById("resultsBody");
if(tableBody.hasChildNodes()) {
while(tableBody.childNodes.length > 0) { //判断有多少行，遍历所有行
tableBody.removeChild(tableBody.childNodes[0]); //移除首行(个)元素
}
}
}
/**
* @author wc_stone
* 读取服务器返回数据(xml)，动态将数据填充到页面
*/
function parseResults() {
var results = xmlHttp.responseXML; //获取服务器的返回值，xml格式
var property = null;
var address = "";
var price = "";
var comments = "";
//返回一个数组，property的所有的子元素
var properties = results.getElementsByTagName("property");
for(var i = 0; i < properties.length; i++) {
property = properties[i];
//返回 address 元素的子元素数组的第一个值
address = property.getElementsByTagName("address")[0].childNodes[0].nodeValue;
//返回 price 元素的子元素数组的首个值
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
//返回 comments 元素的子元素数组的最后一个值
comments = property.getElementsByTagName("comments")[0].lastChild.nodeValue;
addTableRow(address, price, comments);
}
var header = document.createElement("h2"); //创建h2元素
//创建一个包含 Results: 文本的节点
var headerText = document.createTextNode("Results:");
//将 headerText 节点增加到 header 元素的子节点列表中
header.appendChild(headerText);
//将 header 节点增加到 header 元素的子节点列表中
document.getElementById("header").appendChild(header);
//设置 resultsTable 元素中 border属性的值
document.getElementById("resultsTable").setAttribute("border", "1");
}
/**
* @author wc_stone
* 将值添入 resultsBody 行
*/
function addTableRow(address, price, comments) {
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell);
cell = createCellWithText(price);
row.appendChild(cell);
cell = createCellWithText(comments);
row.appendChild(cell);
document.getElementById("resultsBody").appendChild(row);
}
/**
* @author wc_stone
* 将值添入 resultsBody 列
*/
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
</script>
</head>
<body>
<h1>Search Real Estate Listings</h1>
<form action="#">
Show listings from
<select>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
</select>
to
<select>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
</select>
<input type="button" value="Search" onclick="doSearch();"/>
</form>
<span id="header">
</span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
### W3C DOM模型参考手册知识点详解 #### 一、前言 本手册是一份针对W3C DOM（文档对象模型）模型的详尽参考指南，重点介绍了Gecko引擎所支持的DOM API特性。这份资料最初来自Mozilla开发网站，但由于各种原因，...
W3C DOM（Document Object Model）是Web开发中用于处理HTML和XML文档的标准接口，它允许程序员通过JavaScript等脚本语言动态地修改、添加或删除文档内容。在动态创建HTML内容时，掌握DOM的属性和方法是至关重要的。...
总之，掌握DOM是成为熟练Web开发者的必备技能，W3C的DOM手册是学习和查询DOM知识的重要参考资料，无论在线还是离线，都能提供强大的支持。通过深入学习和实践，开发者能够更好地理解和控制网页的动态行为，提升开发...
**jQuery项目运用实例** jQuery是一个高效、...总之，jQuery作为一款强大的JavaScript库，对于开发者来说是提升生产力的得力工具，同时了解其与W3C DOM的区别，有助于我们在适当的情况下选择最合适的方法进行开发。
HTML DOM（Document Object Model）是万维网联盟（W3C）制定的一种标准，它提供了一种结构化的表示HTML或XML文档的方法，并允许程序和脚本动态更新、添加、删除和改变元素。DOM是一个接口，使得任何编程语言都可以...
DOM是W3C制定的一种标准，用于表示和操作HTML或XML文档。它将文档拆分为一系列的节点，如元素节点、文本节点、属性节点等，每个节点都具有相应的属性和方法。通过DOM，开发者可以轻松地找到、修改或添加文档的任何...
JavaScript对W3C DOM模版的支持情况，主要是在前端编程中，JavaScript如何利用W3C DOM标准来访问和修改网页文档内容的问题。W3C DOM是万维网联盟制定的一种文档对象模型，它定义了接口的标准，允许访问和操作文档的...
此外，W3C中文文档还可能包含DOM（Document Object Model）的解释，DOM是HTML和XML文档的编程接口，通过它可以动态地访问和修改页面内容。还有Web Accessibility Initiative (WAI)的相关指南，强调了无障碍性设计的...
通过DOM，开发者可以对这些节点进行添加、删除、修改等操作，实现动态网页的构建。 1. **核心DOM（Core DOM）** 核心DOM是独立于语言的，可以处理任何XML文档的标准。`core.html`文件可能详细介绍了核心DOM的概念...
4. **其他标准**：除了以上三种主要语言之外，W3C还制定了关于脚本语言如JavaScript的DOM（Document Object Model）标准以及SVG（Scalable Vector Graphics）等图形标准。 #### 四、如何检查网页是否符合W3C标准 ...
DOM允许程序员和脚本语言（如JavaScript）通过创建、访问和修改节点来动态更新网页。这个标准化的接口由万维网联盟（W3C）维护，旨在确保跨平台和跨语言的兼容性。 DOM分为不同的级别，每个级别增加了更多的功能和...
此外，还涉及DOM（文档对象模型）操作，使得开发者能够动态改变网页内容。 **XML（可扩展标记语言）**：XML用于存储和传输结构化数据，与HTML不同，它主要用于数据交换而非展示。文档会讲解XML的基本结构、命名空间...
此外，W3C还规定了JavaScript的ECMAScript标准，这是一种动态类型的脚本语言，常用于网页的交互逻辑。C++中的V8引擎就是一个高效的JavaScript执行环境，它实现了ECMAScript规范，让JavaScript代码能在浏览器中运行。...
此外，学习DOM（文档对象模型）操作，以便通过JavaScript来改变HTML元素，以及AJAX（异步JavaScript和XML）实现页面的无刷新更新。 **Web API** W3C还定义了一系列Web API，如Fetch API用于网络请求，WebSocket提供...
当我们谈论"PHP中使用DOM"时，我们指的是PHP如何利用DOM（Document Object Model）这个W3C标准来解析和操作XML或HTML文档。DOM允许程序员以结构化的方式访问和修改文档内容，如同在内存中构建了一个树形结构来表示...
4. **CSS（Cascading Style Sheets）**：是用于控制网页样式和布局的标准，W3C API中也包含了CSS的相关接口，如CSSOM（CSS Object Model）允许动态创建和修改CSS样式。 5. **JavaScript**：作为Web开发的主要脚本...
### W3C中文版PDF格式文档相关知识点 #### 一、W3C组织概览 **万维网联盟（W3C）**是国际上最重要的Web标准制定组织之一，成立于1994年，旨在通过制定和推广全球范围内统一的Web技术标准，推动Web的持续发展和创新...
**W3C参考手册概述** W3C，全称为World Wide Web Consortium，是全球互联网标准的主要制定者。这个组织致力于创建开放的Web标准，确保网络的互操作性和可访问性。W3C参考手册是前端开发者的重要参考资料，它涵盖了...
4. **JavaScript 与 DOM 交互**：JavaScript 通过 DOM API 可以动态创建、查找、修改和删除 HTML 元素，实现页面的动态更新和交互。 5. **部分实现**：这意味着 dedom 可能只实现了 W3C DOM API 中与 HTML5 解析和...