`
jy00314996
  • 浏览: 75233 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript DOM 遍历

阅读更多

javascript DOM 遍历

以下一系列的辅助函数可以帮助您,他们能取代标准的previousSibling,nextSibling,firstChild,lastChild,parentNode;

 1//------------------------DOM 遍历,如果元素没找到则返回null-----------------------//    
 2    //---查找相关元素的前一个兄弟元素---//    
 3    function prev(elem){    
 4        do{    
 5            elem=elem.previousSibling;    
 6        }
while(elem&&elem.nodeType!=1);    
 7        return elem;    
 8    }
    
 9    //---查找相关元素的下一个兄弟元素---//    
10    function next(elem){    
11        do{    
12            elem=elem.nextSibling;    
13        }
while(elem&&elem.nodeType!=1);    
14        return elem;    
15    }
    
16    //---查找第一个子元素的函数---//    
17    function first(elem){    
18        elem=elem.firstChild;    
19        return elem && elem.nodeType!=1 ?next(elem):elem;    
20    }
    
21    //---查找最后一个子元素的函数---//    
22    function last(elem){    
23        elem=elem.lastChild;    
24        return elem && elem.nodeType!=1 ?prev(elem):elem;    
25    }
    
26    //---查找父级元素的函数---//    
27    //num是父级元素的级次,parent(elem,2)等价于parent(parent(elem))    
28    function parent(elem,num){    
29        num=num||1;    
30        for(var i=0; i<num; i++){    
31            if(elem!=null){    
32                elem=elem.parentNode;    
33            }
    
34        }
    
35        return elem;    
36    }
 

调用案例:first(document.getElementById("everywhere")).style.backgroundColor="#ff0000";

分享到:
评论

相关推荐

    dom遍历所有xml节点,并且重新生成xml

    在本主题“DOM遍历所有XML节点,并且重新生成XML”中,我们将深入探讨如何利用DOM API遍历XML文档的所有节点,并根据需求重新构建XML文档。 首先,让我们了解XML的基本结构。XML(eXtensible Markup Language)是一...

    经典之作javascript dom编程艺术源码

    9. **DOM遍历与选择**:`NodeIterator`和`TreeWalker`接口提供了一种更高级的遍历DOM的方法,可以根据特定规则选择节点。 10. **DOM变更事件**:DOM操作如添加、删除元素时,会触发DOM事件,如`DOMNodeInserted`和`...

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    此外,书中可能还涉及到了DOM的遍历、节点操作、事件委托等高级主题。 源代码部分通常包含书中各个章节示例的实现,读者可以通过这些实例加深对JavaScript和DOM的理解。这些代码可以帮助读者实践所学,同时也能作为...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    理解DOM的层次结构以及如何遍历和操作这个结构是JavaScript DOM编程的关键。 此外,书中还涵盖了事件处理,这是JavaScript与用户交互的重要方式。通过绑定事件监听器,开发者可以响应用户的点击、键盘输入等各种...

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

    6. **DOM遍历与选择**:学会使用`getElementById`、`getElementsByClassName`、`getElementsByTagName`等方法,以及更高效的`querySelector`和`querySelectorAll`选择器,是高效操作DOM的关键。 7. **DOM操作**:...

    .遍历DOM元素

    一、DOM遍历方法 1. 前向遍历(深度优先遍历) 使用`childNodes`属性可以获取元素的所有子节点,包括文本节点和注释节点。通过循环遍历这些子节点,可以实现前向遍历。例如: ```javascript function ...

    javascriptDom编程艺术+源码

    此外,书中还涉及了一些高级话题,如异步编程(AJAX)、DOM遍历优化和性能考虑,以及如何避免常见的JavaScript和DOM相关的陷阱。这些章节有助于读者在实践中提高代码质量和效率,为开发高性能的Web应用做好准备。 ...

    javascript先序遍历DOM树的方法

    既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历,同时DOM2中的”Traversal”模块又提供了两种新的类型,从而可以很方便地实现DOM树的先序遍历。 注:本文中的5种方法都是对DOM的...

    JavaScriptDOM编程艺术

    12. **DOM性能优化**:了解DOM操作可能带来的性能影响,比如避免不必要的DOM遍历,使用文档片段批量操作,以及利用事件委托等技术提高效率。 通过学习《JavaScript DOM编程艺术》,读者将掌握如何利用JavaScript与...

    JavaScript DOM编程艺术 第2版 及源码

    7. **DOM遍历与搜索**:理解如何遍历DOM树,以及使用`parentNode`、`childNodes`、`nextSibling`、`previousSibling`等属性进行元素查找,对于高效地操作DOM至关重要。 8. **DOM性能优化**:书中还会探讨如何避免...

    JavaScriptDOM编程艺术第二版

    5. **遍历和查找节点**:掌握不同类型的DOM遍历方法,如父母、子元素、兄弟节点的查找。 6. **Ajax异步通信**:学习如何使用XMLHttpRequest或fetch API进行后台数据交换,实现无刷新页面更新。 7. **DOM性能优化**:...

    <<JavaScript DOM 高级程序设计>> 一书的配套源代码

    6. **DOM遍历与修改**:使用`childNodes`,`firstChild`,`lastChild`等属性,以及`appendChild`,`insertBefore`,`removeChild`等方法动态构建和更新DOM结构。 7. **XML处理**:如果书中有涉及,可能会有解析XML...

    javascript dom2 源码及pdf

    总的来说,JavaScript DOM2是Web开发中的关键工具,它让JavaScript成为了一种强大的客户端脚本语言,为网页带来了丰富的动态性和交互性。通过学习和实践,开发者可以提高网页的用户体验,创建出更加智能和灵活的Web...

    javascript DOM高级程序设计源码

    3. **DOM遍历**:理解节点树的结构,学习如何遍历节点,如`parentNode`、`childNodes`、`firstChild`、`lastChild`等属性,以及`previousSibling`和`nextSibling`方法。 4. **CSS操作**:通过JavaScript改变元素的...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    此外,DOM遍历和选择也是常见的主题。`parentNode`、`childNodes`、`firstChild`、`lastChild`和`nextSibling`等属性帮助我们在DOM树中移动,而`querySelectorAll`和`getElementsByClassName`等方法则帮助我们选择...

    javascript dom编程艺术 第2版 源码

    5. **DOM遍历**:遍历DOM树是常见的任务,例如`childNodes`、`children`属性和`firstChild`、`lastChild`、`previousSibling`、`nextSibling`等属性帮助我们访问和操作元素及其子元素。 6. **DOM创建与删除**:使用...

    javascriptDOM

    8. **DOM遍历**:掌握如何遍历DOM树,如使用`childNodes`、`firstChild`、`lastChild`、`nextSibling`、`previousSibling`等属性。 9. **CSSOM与DOM的结合**:CSS Object Model (CSSOM)是CSS的DOM表示,可以与...

    JAvascript Dom编程艺术 图片库

    10. **DOM遍历和搜索**:学习如何有效地遍历DOM树,以及如何使用XPath或CSS选择器进行更复杂的元素查找。 11. **性能优化**:探讨DOM操作的性能影响,学习如何减少DOM操作次数、使用文档片段(documentFragment)和...

Global site tag (gtag.js) - Google Analytics