遍历Dom树

遍历Dom树,可以返回当前页面有那些元素及其数量

(function(){

    //遍历Dom树
    var doms={
        length:0
    }
    function eachDomTree(root){
        var childNodes=root.childNodes,
            len=childNodes.length;
        for(var i=0;i<len;i++){
            var item=childNodes[i];
            if(item.nodeType===1){
                var tagName=item.nodeName.toLowerCase();
                if(tagName in doms){
                    doms[tagName]++
                }else{
                    doms[tagName]=1;
                    doms[‘length‘]++
                }
            }
            if(item.childNodes.length>0){
                eachDomTree(item)
            }
        }
    }
    eachDomTree(document.body)
    console.log(doms)//Object {length: 18, form: 1, div: 59, input: 102, script: 7…} 当前页面的元素和数量
}())
时间: 2025-01-02 09:28:00

遍历Dom树的相关文章

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先

jQuery 遍历 - 祖先:向上遍历 DOM 树,以查找元素的祖先

jQuery 遍历 - 祖先 祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() 方法 parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. 下面的例子返回每个 <span> 元素的直接父元素: 实例 $(document).

JavaScript 算法应用: 遍历DOM树的两种方式

1 常见的DOM树结构: 2  DOM数遍历有两种方式: 3 广度优先代码: 4 深度优先遍历代码 原文地址:https://www.cnblogs.com/autoXingJY/p/9193600.html

SAX解析xml (遍历DOM树各节点)

本文参考 http://yangjunfeng.iteye.com/blog/401377 1. books.xml 1 <?xml version="1.0" encoding="UTF-8"?> 2 <bk:books count="3" xmlns:bk="http://test.org/books"> 3 <!--books's comment --> 4 <bk:book i

jQuery遍历DOM

jQuery提供了多种遍历DOM的方法.遍历方法中最大的种类是树遍历. 向上遍历DOM树 parent():返回被选元素的直接父元素 parents():返回被选元素的所有祖先元素,它一直遍历到根元素(<html>) parentsUntil():返回介于两个元素之间的所有祖先元素.例$("span").parentsUntil("div"),返回介于<span>与<div>元素之间的所有祖先元素:如果不填写参数,则效果等同于pa

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我将介绍如何实现使用该插件生成HTML元素Dom树,并对其进行多样操作. 先贴上一个简单的HTML页面(直接拿的ztree的用的,画面简单实用,里面的文字内容不用在意) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-e

JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)

一.节点树 节点树 概念 - HTML DOM 将 HTML 文档视作树结构 - 文档中的元素.属性.文本.注释等都被看作一个节点 - 这种结构被称为节点树: 上下层节点 - 节点树中的节点彼此拥有层级关系,DOM 使用如下属性遍历整棵节点树: 平行的节点 - 节点树中使用如下方法访问平行的兄弟节点: 二.元素树 元素树 概念 - 元素树是节点树的一个子集,只包含其中的元素节点 上下层元素 - 与节点树一样,元素树上的元素节点也有父子关系,使用如下属性可以获取这些关系: 平行的元素 - 元素树使

coreDOM 处理dom树

处理HTML文档的第一步就是获得文档元素的引用,每一个元素在dom中就是一个节点,所有的元素在dom中就构成了一个dom树.可以通过某一个节点找到其他说有的节点. 1.一切皆是节点 就是html中的所有的内容都被描述为节点,只是用不同的类型进行描述的的. eg: <p  font="13px #CCC">我是本文节点</p> p是元素节点 font 是属性节点,有属性和值 我是文本节点:是文本节点 2.Node 接口定义的方法 HTML文档中解析为dom后,所有