xml:
<?xml version="1.0" encoding="gb2312"?>
<!-- 参考书籍 -->
<books>
<book id="a002">
<name>编译原理</name>
<price>30</price>
<pub>中南大学出版社</pub>
<author>李利</author>
</book>
<book id="a003">
<name>java大学教程</name>
<price>80</price>
<pub>北京大学出版社</pub>
<author>古月</author>
</book>
</books>
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
var Dom;
function myload()
{
Dom=new ActiveXObject("Microsoft.XMLDOM");
Dom.async=false;
//var str="<A><B>bbb</B></A>";
//Dom.loadXML(str);
Dom.load("books.xml");
if(Dom.parseError.errorCode!=0)
{
alert("错误行:"+Dom.parseError.line+"\r\n"
+"错误列:"+Dom.parseError.linepos+"\r\n"
+"错误原因:"+Dom.parseError.reason+"\r\n"
+"错误文本:"+Dom.parseError.srcText);
}
else
{
//遍历
var root=Dom.documentElement;
str = "----------------元素:"+root.baseName+"--------------<br/>";
var nodelist=root.childNodes;
for(var i=0;i<nodelist.length;i++)
{
str += "<br/> 元素:" + nodelist[i].baseName +"<br/>";
str += "------------------属性--------------<br/>";
var attributes=nodelist[i].attributes;
for(var j=0;j<attributes.length;j++)
{
str += "\t属性名:"+attributes[j].nodeName+"的值:"+attributes[j].nodeValue+"<br/>";
}
var nodelist1=nodelist[i].childNodes;
str += "------------------元素--------------<br/>";
for(var k=0;k<nodelist1.length;k++)
{
str +="\t元素名:"+nodelist1[k].nodeName+"的文本:"+nodelist1[k].firstChild.nodeValue+"<br/>";
}
}
result.innerHTML = str;
}
}
function add()
{
//添加
//添加元素
var str = "添加元素前\n";
alert(str + Dom.documentElement.xml);
var nodelist=Dom.documentElement.childNodes;
for(var i=0;i<nodelist.length;i++)
{
var newNode=Dom.createNode(1,"address","");
var newTextNode=Dom.createNode(3,"","");
var newAttribute=Dom.createNode(2,"officeaddress","");
newAttribute.nodeValue="河西";
newTextNode.nodeValue="湖南长沙";
newNode.appendChild(newTextNode);
newNode.setAttributeNode(newAttribute);
nodelist[i].appendChild(newNode);
}
var str1 = "添加元素后\n";
alert(str1 + Dom.documentElement.xml);
}
function modify()
{
//修改元素
alert("修改元素前\n" + Dom.documentElement.xml);
var nodelist=Dom.documentElement.childNodes;
var newElement =Dom.createNode(1,"newNode","");
newElement.text="新的节点";
nodelist[1].replaceChild(newElement,nodelist[1].lastChild);
alert("修改元素后\n"+Dom.documentElement.xml);
}
function del()
{
alert("删除元素前\n" + Dom.documentElement.xml);
var nodelist=Dom.documentElement.childNodes;
var removeElements=nodelist[0].getElementsByTagName("address");
nodelist[0].removeChild(removeElements[0]);
alert("删除元素后\n" + Dom.documentElement.xml);
}
</script>
</HEAD>
<BODY onLoad="myload();">
<input type="button" value="添加" onclick="add()"/>
<input type="button" value="修改" onclick="modify()"/>
<input type="button" value="删除" onclick="del()"/>
<div id = "result"/>
</BODY>
</HTML>
分享到:
相关推荐
Web前端是用户与网站或APP交互的第一界面,对于用户体验至关重要。本次串讲教案初级内容涵盖Web前端开发的多个基础知识点,接下来将按照教案内容逐一阐述。 首先,在Web页面制作基础这一部分,首先介绍了HTML的基本...
3. 编写JavaScript代码,实现DOM操作、事件处理、表单验证等。 4. 实践响应式设计,运用媒体查询调整不同设备下的显示效果。 5. 将项目托管到GitHub或其他版本控制系统,进行版本管理和协作。 6. 使用浏览器开发者...
在Web前端开发中,JavaScript与HTML DOM(Document Object Model)的交互是至关重要的。这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素...
3. **JavaScript**:JavaScript是前端动态功能的核心,可能包含变量、数据类型、控制结构、函数、对象、数组、DOM操作、异步编程(如Promise和async/await)等内容。 4. **前端框架**:如React或Vue.js,题目可能...
在完成这个项目的过程中,我们需要掌握HTML5、CSS3、JavaScript基础,理解DOM操作,熟悉jQuery或React、Vue等前端框架,了解Ajax异步通信,以及一定的服务器端知识。同时,良好的代码组织和注释习惯也是项目成功的...
Web前端页面实例是开发者在学习和实践中积累的重要资源,它涵盖了JavaScript、jQuery和CSS这三种核心技术的运用。这些技术是构建交互式、动态且视觉吸引力强的网页的关键工具。 JavaScript,作为网页的脚本语言,...
此外,学生可能还应用了一些现代前端框架或库,如jQuery简化DOM操作,Bootstrap提供响应式布局,或者Vue、React或Angular来构建更复杂的交互逻辑。这个项目不仅展示了学生的编程技能,还体现了他们将创意和技术结合...
Web前端技术是现代互联网开发的重要组成部分,主要负责构建用户在浏览器中看到和交互的网站界面。这份名为"Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip"的压缩包文件包含了全面的Web前端学习资源...
此外,DOM(文档对象模型)操作,如创建、修改和删除DOM节点,也是JavaScript学习的重要部分。 四、前端框架与库 随着Web开发的发展,jQuery、Vue.js、React.js、Angular等前端框架和库的使用变得越来越普遍。答案...
JavaScript是Web前端的核心,储教授会在书中详细讲解变量、数据类型、控制结构、函数、对象、闭包等基本概念,以及DOM操作、AJAX异步通信等实际应用。此外,随着前端开发复杂性的提升,JavaScript框架如React、Vue....
在“WEB前端项目开发实践”这个主题中,我们主要探讨的是如何通过理论与实践相结合的方式,掌握前端开发技术并实施实际项目。对于初学者来说,这是一个极好的学习资源,能够帮助他们逐步理解并掌握前端开发的基本...
学习JavaScript时,你需要掌握变量、数据类型、条件语句、循环、函数等基础语法,同时理解DOM(Document Object Model)的概念,以便能够操作网页元素。 Web前端开发还包括CSS(Cascading Style Sheets)的学习,它...
### WEB前端开发性能优化知识点详解 #### 一、性能优化 **1. 减少HTTP请求数** - **背景**: 在网页加载过程中,每个图片、CSS文件、JavaScript文件、Flash对象等都会产生一个HTTP请求,这会显著增加网页加载时间...
5. **DOM操作**:学习如何通过JavaScript操作文档对象模型(DOM),以动态改变网页内容。 6. **前端框架和库**:如React、Vue.js或Angular,它们可以帮助简化开发过程,提高效率。 7. **响应式设计**:如何根据...
jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。使用jQuery,开发者可以更快地实现复杂的交互效果,例如滑动、淡入淡出等,其简洁的语法使得JavaScript编程变得更加容易。 学习这套...
"1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核,旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用,以及对网页布局、响应式...
在“WEB前端-案例汇总”这个资源包中,包含了丰富的前端开发实例,旨在帮助初学者逐步进阶,全面掌握前端开发的各项技能。这个资源大汇总几乎涵盖了前端开发的所有领域,对于想要深入学习和理解Web前端技术的人来说...
【1+X Web前端开发初级】样题二涵盖了理论与实操两大部分,旨在测试学习者在Web前端开发领域的基础知识和实践能力。这个压缩包包含了三个文件:`Web前端开发初级实操考试_V1.0.docx`、`Web前端开发初级理论考试_V1.0...
《Web前端开发手册》是一本综合性的资源,涵盖了JavaScript、CSS和DOM操作的关键知识点,旨在帮助开发者快速查询和理解这些核心技术。以下是对这些主题的详细解释: **JavaScript**: JavaScript是一种广泛应用于...
### Web前端开发详细教程 #### 一、引言 随着互联网技术的发展,Web前端开发已成为一个重要的领域。它不仅涉及到网站的设计与实现,还涵盖了用户体验、交互设计等多个方面。本教程旨在为初学者提供全面而深入的...