`
fp_moon
  • 浏览: 983113 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

web前端DOM操作

阅读更多

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/>&nbsp;&nbsp;元素:" + 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前端初级.pdf

    Web前端是用户与网站或APP交互的第一界面,对于用户体验至关重要。本次串讲教案初级内容涵盖Web前端开发的多个基础知识点,接下来将按照教案内容逐一阐述。 首先,在Web页面制作基础这一部分,首先介绍了HTML的基本...

    Web前端开发初级样题一理+实.zip

    3. 编写JavaScript代码,实现DOM操作、事件处理、表单验证等。 4. 实践响应式设计,运用媒体查询调整不同设备下的显示效果。 5. 将项目托管到GitHub或其他版本控制系统,进行版本管理和协作。 6. 使用浏览器开发者...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    在Web前端开发中,JavaScript与HTML DOM(Document Object Model)的交互是至关重要的。这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素...

    Web前端开发中级样题一理+实.zip

    3. **JavaScript**:JavaScript是前端动态功能的核心,可能包含变量、数据类型、控制结构、函数、对象、数组、DOM操作、异步编程(如Promise和async/await)等内容。 4. **前端框架**:如React或Vue.js,题目可能...

    Web前端大作业.zip

    在完成这个项目的过程中,我们需要掌握HTML5、CSS3、JavaScript基础,理解DOM操作,熟悉jQuery或React、Vue等前端框架,了解Ajax异步通信,以及一定的服务器端知识。同时,良好的代码组织和注释习惯也是项目成功的...

    web前端页面实例

    Web前端页面实例是开发者在学习和实践中积累的重要资源,它涵盖了JavaScript、jQuery和CSS这三种核心技术的运用。这些技术是构建交互式、动态且视觉吸引力强的网页的关键工具。 JavaScript,作为网页的脚本语言,...

    web前端期末大作业源码.zip

    此外,学生可能还应用了一些现代前端框架或库,如jQuery简化DOM操作,Bootstrap提供响应式布局,或者Vue、React或Angular来构建更复杂的交互逻辑。这个项目不仅展示了学生的编程技能,还体现了他们将创意和技术结合...

    Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip

    Web前端技术是现代互联网开发的重要组成部分,主要负责构建用户在浏览器中看到和交互的网站界面。这份名为"Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip"的压缩包文件包含了全面的Web前端学习资源...

    web前端开发技术储久良第三版答案

    此外,DOM(文档对象模型)操作,如创建、修改和删除DOM节点,也是JavaScript学习的重要部分。 四、前端框架与库 随着Web开发的发展,jQuery、Vue.js、React.js、Angular等前端框架和库的使用变得越来越普遍。答案...

    Web前端开发技术(第2版)储久良课后实验材料及源代码

    JavaScript是Web前端的核心,储教授会在书中详细讲解变量、数据类型、控制结构、函数、对象、闭包等基本概念,以及DOM操作、AJAX异步通信等实际应用。此外,随着前端开发复杂性的提升,JavaScript框架如React、Vue....

    WEB前端项目开发实践

    在“WEB前端项目开发实践”这个主题中,我们主要探讨的是如何通过理论与实践相结合的方式,掌握前端开发技术并实施实际项目。对于初学者来说,这是一个极好的学习资源,能够帮助他们逐步理解并掌握前端开发的基本...

    程序员web前端视频教程(文档+代码+视频).rar

    学习JavaScript时,你需要掌握变量、数据类型、条件语句、循环、函数等基础语法,同时理解DOM(Document Object Model)的概念,以便能够操作网页元素。 Web前端开发还包括CSS(Cascading Style Sheets)的学习,它...

    WEB前端开发.pdf

    ### WEB前端开发性能优化知识点详解 #### 一、性能优化 **1. 减少HTTP请求数** - **背景**: 在网页加载过程中,每个图片、CSS文件、JavaScript文件、Flash对象等都会产生一个HTTP请求,这会显著增加网页加载时间...

    Web前端入门:从零开始做网站.txt打包整理.zip

    5. **DOM操作**:学习如何通过JavaScript操作文档对象模型(DOM),以动态改变网页内容。 6. **前端框架和库**:如React、Vue.js或Angular,它们可以帮助简化开发过程,提高效率。 7. **响应式设计**:如何根据...

    web前端开发教材初级源代码.rar

    jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。使用jQuery,开发者可以更快地实现复杂的交互效果,例如滑动、淡入淡出等,其简洁的语法使得JavaScript编程变得更加容易。 学习这套...

    1+x 证书 Web 前端开发初级实操考试.zip

    "1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核,旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用,以及对网页布局、响应式...

    WEB前端-案例汇总

    在“WEB前端-案例汇总”这个资源包中,包含了丰富的前端开发实例,旨在帮助初学者逐步进阶,全面掌握前端开发的各项技能。这个资源大汇总几乎涵盖了前端开发的所有领域,对于想要深入学习和理解Web前端技术的人来说...

    【1+X Web前端开发初级 】样题二(理论+实操).zip

    【1+X Web前端开发初级】样题二涵盖了理论与实操两大部分,旨在测试学习者在Web前端开发领域的基础知识和实践能力。这个压缩包包含了三个文件:`Web前端开发初级实操考试_V1.0.docx`、`Web前端开发初级理论考试_V1.0...

    Web前端开发手册(Javascript/DOM/CSS)

    《Web前端开发手册》是一本综合性的资源,涵盖了JavaScript、CSS和DOM操作的关键知识点,旨在帮助开发者快速查询和理解这些核心技术。以下是对这些主题的详细解释: **JavaScript**: JavaScript是一种广泛应用于...

    Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解

    ### Web前端开发详细教程 #### 一、引言 随着互联网技术的发展,Web前端开发已成为一个重要的领域。它不仅涉及到网站的设计与实现,还涵盖了用户体验、交互设计等多个方面。本教程旨在为初学者提供全面而深入的...

Global site tag (gtag.js) - Google Analytics