DOM总结（三）及综合案例

最新推荐文章于 2022-05-27 21:43:57 发布
最新推荐文章于 2022-05-27 21:43:57 发布
阅读量552 收藏
点赞数
分类专栏： js 文章标签： function html 文档 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangliaizq10000/article/details/6257324
版权

DOM总结（三）及综合案例

 

1，DOM属性-----replaceChild()

    replaceChild()---替换节点:

把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

    返回值是一个指向已被替换的那个子节点的引用指针。s

    如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

  

练习：   

 

    问题:当单击”北京”这个节点时,北京这个节点被”游泳”替换

Html代码：

  <body>

  个人所在城市：

      <ul id="city">

        <li id="bj">北京</li>

        <li id="sh">上海</li>

        <li id="tj">天津</li>

        <li id="dd">大都</li>

      </ul>      

      个人爱好：

      <ul id="fav">

        <li id="yy">游泳</li>

        <li id="pp">乒乓球</li>

        <li id="ymq">羽毛球</li>

        <li id="lq">篮球</li>

      </ul>

  </body>

 

 

 

 js解答：

 

 

 

   <script>

    window.onload = function(){

       //通过id获得节点

       var bj = document.getElementById("bj");

       //定义隐函数

        bj.onclick = function(){ 

        /

         var yy =  document.getElementById("yy");

         //通过replaceChild()方法来进行替换

         bj.parentNode.replaceChild(yy,bj);

       }    

},

2，查找属性节点

getAttribute()

     

    返回一个给定元素的一个给定属性节点的值

var attributeValue = element.getAttribute(attributeName);

    给定属性的名字必须以字符串的形式传递给该方法。

给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个 

空字符串.

 

通过属性获取属性节点。

getAttributeNode(属性的名称)--Node

 

如：<li name="beijing" id="bj">北京</li> 获取属性值和文体

 

    //通过属性名获取属性的值

     var  bjElement=document.getElementById("bj");

     var attributeValue=eduElement.getAttribute("name");

     alert("attributeValue    "+attributeValue);

        

   //通过属性名获取属性的节点

   var  bjNode=eduElement.getAttributeNode("name");

       alert(eduNode.nodeValue);

       alert(eduNode.nodeType);

       alert(eduNode.nodeName);

 

3,设置属性节点

 

   SetAttribute()

   将给定元素节点添加一个新的属性值或改变它的现有属性的值。

   element.setAttribute(attributeName,attributeValue);

   属性的名字和值必须以字符串的形式传递给此方法

   如果这个属性已经存在，它的值将被刷新；

   如果不存在，setAttribute()方法将先创建它再为其赋值。

 

    如：<li  id="bj" >北京</li> 

 

   //获取元素的引用

   var bjElement=document.getElementById("bj");

   //设置属性值

   bjElement.setAttribute("name","beijing");

   //获取设置的属性值

   var nameValue=bjElement.getAttribute("name");

   alert("nameValue "+nameValue);

 

 

4，创建新文本节点 

       createTextNode()

       创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节   

      点引用指针。

      var textNode = document.createTextNode(text);

      方法只有一个参数：新建文本节点所包含的文本字符串

      方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的     

      nodeType 属性等于 3.

      新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性

   如：

       var pElementText=document.createElement("li");

       var textElement=document.createTextNode("南京");

       pElementText.appendChild(textElement);

5，插入节点

5.1   

     appendChild()

     为给定元素增加一个子节点：                                   

     var newreference = element.appendChild(newChild).              

     给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。

方法的返回值是一个指向新增子节点的引用指针。

该方法通常与 createElement() createTextNode() 配合使用

新节点可以被追加给文档中的任何一个元素

5.2   

      insertBefore()

      把一个给定节点插入到一个给定元素节点的给定子节点的前面

      var reference =  element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.

节点 targetNode 必须是 element 元素的一个子节点。

该方法通常与 createElement() 和 createTextNode() 配合使用

 5.3    

       insertAfter() 方法（但是DOM没提供方此方法）*

   可以通过DOM的属性方法来写一个：  

 

   function insertAfter(newElement,targetElement){

   //获取目标元素的父节点

 var parentElement=targetElement.parentNode;

   //如果目标元素是最后一个元素,则新元素插入到目标元素的后面

if(parentElement.lastChild==targetElement){

    parentElement.appendChild(newElement);

}else{//如果目标元素不是最后一个元素,则新元素插入到目标元素的的

   //下一个兄弟节点的前面,即目标元素的后面

   parentElement.insertBefore(newElement,targetElement.nextSibling);

}

}

 

6，删除节点

    removeChild()

    从一个给定元素里删除一个子节点

    var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。

 

7，获取最后一个子节点

    lastChild：对应 firstChild 的一个属性。

    nextSibling: 返回一个给定节点的下一个兄弟节点。

    parentNode：返回一个给定节点的父节点。

    parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。

    Document 节点的没有父节点。

previousSibling：返回一个给定节点的上一个兄弟节点  

 

 8，innerHTML属性  

    浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。

     innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。

 

 

  综合案例

   实现如图js的增删该

    

  结束语：如何实现 ，请继续关注我的博客! 

wangliaizq10000
关注
专栏目录
js之DOM深入学习总结
越努力，越幸运！
07-05 4932
DOM编程深入学习
DOM知识点总结
m0_47224321的博客
10-26 1730
一、DOM初识 1、DOM—文档对象模型 操作页面元素的 2、DOM又被称为文档树模型 （1）文档：把一个html页面文件可以看成一个文档，由于万物皆对象，所以可以把这个文档看成一个对象。 （2）文档中的所有的标签都可以看成是一个对象 （3）页面中的每个标签都是一个元素（element）,每个元素都可以看成是一个对象。 （4）标签中可以嵌套标签，标签中有标签，元素中有元素 （5）一个html页面都有一个根标签—》html---->根元素，里面有很多个标签（元素）—》很多个对象 ========
JavaScript程序设计——DOM访问实验报告.docx
11-11
1．实现文档对象的属性； 2．实现文档对象的属性方法； 3．实现文档对象的使用方式。 问：如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表： 答： Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+tables.length+"tables");
DOM操作综合实例
weixin_33696822的博客
10-19 183
- 综合实例(点击注册，下面表格增加一行)window.onload = function(){ document.getElementById("addUser").onclick = function(){ var nameValue = document.getElementById("name").value; var emailValue = document....
DOM综合案例-飞翔的小鸟
张培跃的个人博客
04-11 3616
通过jsDOM完成的一个小游戏
JavaScript语言教学中DOM综合性应用案例的教学设计.pdf
最新发布
01-03
【JavaScript语言教学中DOM综合性应用案例的教学设计】 在JavaScript教学中，DOM（Document Object Model）是不可或缺的一部分，它为Web开发提供了对HTML或XML文档结构的动态访问和操作能力。DOM是一个标准，允许...
Ajax案例集下载：新增分页查询案例（包括《Ajax开发精要》中的两个综合案例） 下载
10-30
本文将详细介绍《Ajax开发精要》一书中新增的分页查询案例，并结合书中的两个综合案例进行分析，旨在帮助读者更好地理解Ajax技术的应用场景和技术细节。 #### 二、案例背景 在《Ajax开发精要》这本书中，作者构建...
Web前端开发技术-综合案例（函数的定义）.pptx
07-07
总结起来，这个综合案例不仅涵盖了JavaScript函数的定义，还演示了如何将这些函数应用于实际的网页交互效果。学习BOM（浏览器对象模型）的构成，理解`window`对象的属性和方法，如`scrollY`，对于前端开发者来说至关...
javascript性能优化之DOM交互操作实例分析
10-23
总结来说，为了提高JavaScript中DOM操作的性能，需要关注减少DOM更新次数、合理使用`innerHTML`、利用事件委托以及最小化对NodeList的访问。这些方法能够显著降低页面的重绘和回流次数，从而提升整体性能。在实际...
超强 DOM增删改,js日历综合案例实现
03-21
wpCalendar.js 博文链接：https://javawangli.iteye.com/blog/965775
DOM解析XML应用实例（入门经典案例）
03-04
DOM解析XML应用实例（入门经典案例），直接在Myeclipse值导入即可运行
由浅入深JavaScript9基础-Dom综合实例1
张东旭
06-15 519
JavaScript9基础-Dom综合实例1 在前两节课程中我们讲述了DOM基础以及DOM表格基础。 但是要想学好DOM就必须要大量的练习。这节课我们通过大量例子的 练习来提高对DOM的熟练度。 DOM综合实例-丰富表格 我们先做一个基础表格，该表格只具有添加功能： eg1:                      table, th, td
JavaScript DOM编程艺术——综合案例
liaoai的博客
10-18 1998
文章目录HTML代码template.htmlindex.htmlabout.htmlphotos.htmllive.htmlcontact.htmlCSS代码layout.csscolor.csstypography.cssbasic.cssJS代码 HTML代码 template.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
DOM总结
努力让自己幸运...
03-05 626
DOM节点类型... 类型 nodeType nodeName nodeValue 元素节点 1 node 标签名称 文本节点 3 #text 文本内容 注释节点 8 #comment 注释内容 属性节点 2 属性名 属性值 ...
Javascript中对DOM操作的总结
longholidays的博客
08-31 408
一、DOM创建DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数：1：Element，元素 2：Attribute，属性 3：Text，文本DOM节点创建最常用的便是document.createElement和document.createTextNode方法：var node1 = documen
HTML DOM 方法综合实例
生活中的思索
09-05 380
<!DOCTYPE html> <html> <body> <script> function addOnclick(){ var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element
微博发布案例
zhazhali_fenqi的博客
01-11 517
需求1：检测用户输入字数 1. 注册input事件 2. 将文本的内容的长度赋值给对应的数值 3. 表单的maxlength属性可以直接限制在200个数之间 需求2： 输入不能为空 点击button之后判断 判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空 防止输入无意义空格, 使用字符串.trim()去掉首尾空格 console.log(’ str’) console.log(’ str '.trim()) 并将表单的value值设置为空字符串 同时下面红色为设置为0； 需求3：
DOM学习总结
Rewind_lv的博客
05-27 495
一、DOM简介 DOM定义 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式 DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表 DOM把
javascript高级程序设计(第三版)
07-19
### 回答1： 《JavaScript高级程序设计》（第三版）是一本经典的JavaScript技术书籍。此书由Nicholas C. Zakas撰写，涵盖了广泛的主题，适合有一定JavaScript基础的读者。本书详细介绍了JavaScript语言的各个方面，包括基本语法、DOM操作、BOM操作、事件处理、Ajax、浏览器兼容性问题等。 这本书的优点之一是作者对JavaScript的深刻理解和独特的教学方法。他将复杂的概念和技术变得简单易懂，通过实际的例子和案例来解释和演示。读者可以通过跟随书中的练习和项目，逐渐提升自己的JavaScript编程能力。 此外，本书还包含了一些高级主题，如函数、闭包、面向对象编程等。这些主题对于想要深入理解JavaScript的读者来说十分有价值。此外，作者还介绍了一些最佳实践和优化技巧，帮助读者编写更高效、可维护的JavaScript代码。 《JavaScript高级程序设计》（第三版）最大的优点之一是其综合性。它涵盖了JavaScript的各个方面，并且通过详细的目录、索引和附录，方便读者在需要时进行查找和参考。此外，书中还有大量的实例代码和详细的解释，使得读者能够更好地理解和应用所学的知识。 总结来说，《JavaScript高级程序设计》（第三版）是一本非常全面、详尽的JavaScript技术书籍。它不仅适合有一定基础的读者，也适合那些想要深入了解JavaScript编程的人。无论是作为学习教材还是作为参考书，这本书都是非常有价值的。阅读本书将有助于读者提升自己的JavaScript编程能力，并掌握一些高级技术和最佳实践。 ### 回答2： 《JavaScript高级程序设计(第三版)》是一本经典的JavaScript编程指南，由著名的JavaScript专家尼古拉斯·泽卡斯（Nicholas C. Zakas）撰写。该书自2009年首次出版以来，一直被广泛用作学习JavaScript的参考书籍。 这本书从基础知识讲起，逐渐引导读者深入了解JavaScript的各个方面。作者详细介绍了JavaScript的语法、数据类型、运算符、函数、对象、数组等核心概念，并通过大量的实例和案例进行讲解，帮助读者理解和应用这些知识。 《JavaScript高级程序设计(第三版)》特别关注JavaScript的高级特性和最佳实践。作者深入浅出地讲解了闭包、原型链、作用域链等概念，并详细探讨了JavaScript的错误处理、异步编程和模块化等重要主题。读者通过学习这些内容，可以编写出更加高效、可维护和可扩展的JavaScript代码。 此外，书中还介绍了如何在浏览器环境和服务器环境中使用JavaScript，包括DOM操作、事件处理、Ajax、Web存储等技术。作者还对跨浏览器兼容性进行了讨论，帮助读者解决在不同浏览器中遇到的兼容性问题。 总之，《JavaScript高级程序设计(第三版)》是一本非常全面和权威的JavaScript学习资料。它适合初学者学习JavaScript的基础知识，也适合有一定经验的开发者深入了解和掌握JavaScript的高级特性。无论是前端开发还是后端开发，读者都能从中获得宝贵的经验和知识。 ### 回答3： 《JavaScript高级程序设计》（第三版）是一本经典的JavaScript编程教材。该书由Nicholas C. Zakas撰写，对JavaScript的核心概念和高级技术进行了深入讲解。 该书主要分为三个部分。第一部分介绍了JavaScript语言的基础知识，包括语法、数据类型、流程控制、函数等内容。这一部分的目的是帮助读者建立对JavaScript基础的扎实理解，为后续的高级概念打下基础。 第二部分是该书的核心内容，讨论了JavaScript的面向对象编程和浏览器环境中的DOM操作。读者将学习使用构造函数、原型和继承等概念来开发复杂的JavaScript应用程序。此外，本书还给出了大量的示例代码和实践项目，帮助读者提升编程实战能力。 第三部分则涵盖了一些高级主题，如错误处理、数据存储、正则表达式、Ajax等。这些议题是现代Web开发中非常重要的部分，对于提升网页交互性和用户体验至关重要。 《JavaScript高级程序设计》（第三版）在内容上更为详尽全面，适合具备一定JavaScript基础的读者学习。此外，该书侧重于实践应用，深入浅出地讲解了一些复杂的概念，并通过实例和项目帮助读者学以致用。 总的来说，该书通过系统性的介绍和练习，帮助读者逐步掌握JavaScript的核心概念和高级技术，为他们成为出色的JavaScript开发者奠定坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值