`
andrew.yulong
  • 浏览: 171657 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript操纵DOM纠错两则

    博客分类:
  • js
阅读更多

浏览器的差异,对dom本身内部机理的不熟悉都有可能产生错误。今天又用错了两个地方。

1、关于class和className
class属性在HTML DOM中扮演很重要的角色,css和DTHML都可能大量用到。但javascript的浏览器差异性仍然存在。动态设置一个element的属性:element.setAttribute("class", vName);语句在firefox中是行的通的,可是IE内核的浏览器却不认识"class",而得改用"className",同样,firefox也不认识"className"。所以常用的方法是二者兼备:
   element.setAttribute("class", vName);
   element.setAttribute("className", vName);  //for IE

2、删除某个节点的所有子节点
这“某个节点”可能使用getElementById或其他方法得到的。删除方法如下:
   while(element.hasChildNodes()==true){
        element.removeChild(element.childNodes[0]);
   }
简简单单两句话,看似没什么了不起。之前我用for循环(有经验的人一看就不该用),先用element.childNodes获得element的子元素集,然后获取该元素集的数组长度,在进行循环删除。当时就发现元素多了一个(55成了56),没在意。后来发现删除到第28个元素就退出循环了,出现了循环中的“奇迹”。想想,莫非childNodes里包括element本身?且DOM是树结构,又采用中序遍历的算法?结果到第28个后把element自己给删掉了,也就什么都没了。

 

分享到:
评论

相关推荐

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    《JavaScript DOM编程艺术(第2版)》这本书详细介绍了如何使用JavaScript来操纵DOM,实现网页的动态交互效果。通过深入学习本书中的内容,开发者可以更好地理解和掌握JavaScript与DOM的结合方式,提高Web开发的能力...

    Beginning JavaScript with DOM Scripting and Ajax: Second Editon

    Beginning JavaScript with DOM Scripting and Ajax is an essential resource for modern JavaScript programming. This completely updated second edition covers everything you need to know to get up-to-...

    javascriptDom编程艺术+源码

    这本书深入浅出地讲解了如何使用JavaScript来操纵DOM,从而实现丰富的用户界面和动态效果。 书中首先介绍了JavaScript的基础知识,包括变量、数据类型、函数等基本概念,为后续DOM操作打下坚实基础。接着,深入探讨...

    JavaScript+DOM编程艺术(PDF格式原版+源代码)

    在学习这本书的过程中,读者不仅会掌握JavaScript语言本身,还将学会如何利用DOM来操纵网页,从而提升网页的用户体验。无论是对于网页设计师还是前端开发者,这都是一本不可多得的参考书籍。通过阅读这本书,你将...

    Javascript+DOM编程艺术(完整版).pdf

    《Javascript+DOM编程艺术(完整版)》是Jeremy Keith所著的一本关于前端开发技术的书籍,专注于Web设计中的JavaScript和DOM编程。本书被认为是前端开发者必读的经典之作,其清晰的文笔、遵循优秀的编程原则和严格的...

    javascript_DOM操作

    在JavaScript中,我们可以利用DOM API来创建、修改、删除和查找网页上的任何元素,实现动态更新和交互。 **DOM的基本操作** 1. **获取元素**: `document.getElementById()` 是最基础的获取元素方法,通过ID查找。...

    javascript+dom书籍

    JavaScript 是一种轻量级的解释型编程语言,广泛应用于网页和网络应用的客户端脚本,而 DOM 则是 W3C 标准,它定义了HTML和XML文档的结构,并提供了与这些文档进行交互的方法。 **JavaScript 基础** JavaScript 是...

    JavaScript.DOM编程艺术 (中文版1-12全)

    这本书全面覆盖了使用JavaScript操纵DOM的各种技术,帮助开发者提升在网页交互和动态效果方面的技能。 首先,书中会介绍JavaScript基础,包括变量、数据类型、控制流语句、函数等核心概念,这是理解和应用DOM编程的...

    [JavaScript.DOM编程艺术(第2版)-高清扫描

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威指南。DOM是Web开发中的核心组件,它允许我们通过编程方式操作HTML和XML文档。这本书全面覆盖了使用JavaScript...

    javascript dom2 源码及pdf

    在JavaScript DOM2中,事件处理分为两个级别:事件目标和事件流。事件目标是指事件实际发生的地方,而事件流包括冒泡和捕获两种模式。你可以通过`addEventListener()`和`removeEventListener()`方法来添加和移除事件...

    JavaScript DOM编程艺术(中文第2版).pdf

    javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...

    JavaScript.DOM编程艺术(第2版) 2-4

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...

    掌握 Ajax第 5 部分-操纵 DOM

    【Ajax第5部分-操纵DOM】是关于使用JavaScript来实时更新Web页面的技术。DOM,即文档对象模型,是Web页面的结构化表示,它将HTML和CSS转化为一系列可操作的对象。DOM树是DOM的一种可视化表示,它包含了页面的所有...

    javascript 操作DOM

    下面将详细阐述在JavaScript中如何进行DOM操作。 1. **访问相关的节点**: 访问DOM节点通常通过`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`和`querySelectorAll`等方法...

    《javascript-DOM编程艺术》原书代码

    《JavaScript DOM编程艺术》是Jeremy Keith撰写的一本经典著作,主要介绍了如何使用JavaScript与DOM(Document Object Model)进行交互,从而实现网页动态效果和富用户体验。DOM是HTML和XML文档的编程接口,允许我们...

    JavaScript DOM编程艺术 第2版+代码

    这本书全面覆盖了利用JavaScript来操纵和改变网页内容的方法,帮助开发者提升在浏览器环境中编写交互式网页的能力。 书中首先介绍了DOM的基本概念,包括DOM的层次结构、节点类型以及如何通过JavaScript访问和操作...

Global site tag (gtag.js) - Google Analytics