shawl.qiu Javascript DOM 树形结构显示类 DomTree class v1.0

最新推荐文章于 2025-08-07 21:48:39 发布

btbtd

最新推荐文章于 2025-08-07 21:48:39 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript class function null date div

本文链接：https://blog.youkuaiyun.com/btbtd/article/details/1626483

Me Script 同时被 2 个专栏收录

88 篇文章

订阅专栏

Me Script function library

34 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的DOM树形结构显示类DomTree，它可以递归地枚举和展示网页中DOM节点的层级结构，并提供了节点展开、属性查看等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

shawl.qiu Javascript DOM 树形结构显示类 DomTree class v1.0

说明:
这个东西其实没啥用途, 写的原因嘛, 当然也有的...
记得刚学JS时, 想遍历枚举 dom 的节点, 并递增显示缩进和节点名出来, 可是弄了N久, 还是没法子...
今天偶然想起了上面那想法, 呵呵, 当然就动手啦, 写起了跟切菜一样, 一会就搞定....

目录:
1. 调用
2. DomTree 核心代码

下载: http://shawl.qiu.googlepages.com/sq_js_DomTree_v1.0.7z
演示: http://shawl.qiu.googlepages.com/DomTree.htm

shawl.qiu
2007-05-26
http://blog.youkuaiyun.com/btbtd

内容:
1. 调用

<script type="text/javascript" src="DomTree_v1.0.js"></script>
<script type="text/javascript">
//<![CDATA[
onload =
function()
{
var domtree = new DomTree();
domtree.Container = document.getElementById("DomTreeId");
domtree.Body = document.getElementById("EnumMain");
document.title = domtree.au.Subject+" "+domtree.au.Version;
domtree.Go();
domtree = null;
}
//]]>
</script>

2. DomTree 核心代码

/*-----------------------------------------------------------------------------------*/
* shawl.qiu Javascript DomTree class v1.0
/*-----------------------------------------------------------------------------------*/
//---------------------------------begin class DomTree()-------------------------------//
function DomTree()
{ // shawl.qiu code
//------------------------------------begin public variable
//---------------begin about
this.au = {}
this.au.Subject = "shawl.qiu Javascript DomTree class";
this.au.Version = "v1.0";
this.au.Name = "shawl.qiu";
this.au.Email = "shawl.qiu@gmail.com";
this.au.Blog = "http://blog.youkuaiyun.com/btbtd";
this.au.CreatedDate = "2007-5-26";
this.au.Update = {};
this.au.Update["1"] = "";
//---------------end about
this.Container = null;
this.Body = document.body;
this.Extend = {}
this.Extend.Bool = false;
this.Extend.Symbol = {}
this.Extend.Symbol.True = "- ";
this.Extend.Symbol.False = "+ ";
this.ClassName = {}
this.ClassName.CommonPrefix = "MyDomTree";
this.ClassName.Extend = "ExtendTree";
this.ClassName.UnExtend = "UnExtendTree";
this.Level = {}
this.Level.Prefix = "  ";
this.Level.DisplayCount = false;
this.Popup = {}
this.Popup.Prefix = "Popup";
this.Popup.Main = null;
//------------------------------------end public variable
//------------------------------------begin private variable
var Tl = this;
var pSymbol = "";
var pPopup = null;
//------------------------------------end private variable
//------------------------------------begin public method
this.Go = fGo;
//------------------------------------end public method
//------------------------------------begin private method
function fGo()
{
var StartTime = new Date();
if(typeof(Tl.Container)=="string")
{
Tl.Container = document.getElementById(Tl.Container);
}
if(Tl.Container==null)
{
alert("无法获得容器对象!");
return;
}
if(Tl.Body==null)
{
alert("目标节点为null!");
return;
}
if(Tl.Body.nodeType!=1)
{
alert("目标节点不是HTML元素!");
return;
}
fAppendCss();
if(Tl.Extend.Bool)
{
pSymbol = Tl.Extend.Symbol.True;
}
else
{
pSymbol = Tl.Extend.Symbol.False;
}
if(!Tl.Body.hasChildNodes()) return;
var TopEle = document.createElement("div");
if(Tl.Extend.Bool)
{
TopEle.className = Tl.ClassName.Extend;
}
else
{
TopEle.className = Tl.ClassName.UnExtend;
}
var sCount = "";
if(Tl.Level.DisplayCount)
{
sCount = 1+". ";
}
var EleA = document.createElement("a");
EleA.innerHTML = fRepeatStr(Tl.Level.Prefix, 1)+sCount+pSymbol+Tl.Body.tagName;
EleA.innerHTML += " (<font color='red'>"+fGetHtmlElementLen(Tl.Body)+"</font>)";
EleA["Extend"] = Tl.Extend.Bool;
EleA["onclick"] = fClick;
TopEle["Object"] = Tl.Body;
TopEle.appendChild(EleA);
if(Tl.Body.id!="") EleA.innerHTML += " -> <span style='color:blue'>"+Tl.Body.id+"</span>";
if(Tl.Body.name) EleA.innerHTML += " -> <span style='color:blue'>"+Tl.Body.name+"</span>";
fIntiFunc(TopEle, Tl.Body);
Tl.Container.appendChild(TopEle);
var PopupEle = document.createElement("div");
PopupEle.id = Tl.Container.id+Tl.Popup.Prefix;
PopupEle.style.display = "none";
Tl.Container.appendChild(PopupEle);
Tl.Popup.Main = document.getElementById(Tl.Container.id+Tl.Popup.Prefix);
Tl.Popup.Main.ondblclick =
function()
{
this.style.display = "none";
}
pPopup = Tl.Popup.Main;
pPopup.title = "双击隐藏";
fGetNode(TopEle, Tl.Body, 1);
var EndTime = new Date();
/*
onunload =
function()
{
defaultStatus = "正在修复IE内存溢漏, 请稍候...";
fFixMemoryLeak();
}
*/
defaultStatus = "DomTree 耗时: "+(EndTime-StartTime)+" 毫秒";
} // end function fGo
function fGetNode(EleContainer, EleBody, iLevel)
{
if(EleBody.nodeType!=1) return;
var iNextLevel = iLevel+1;
var iCount = 1;
var MyCallee = arguments.callee;
( // begin anonymous function
function()
{
var EleBodyLen = EleBody.childNodes.length;
var EleBodyCount = 0;
while(EleBodyCount<EleBodyLen)
{
var CurEle = EleBody.childNodes[EleBodyCount];
if(CurEle.nodeType==1)
{
var MyEleA = document.createElement("a");
MyEleA["onclick"] = fClick;
MyEleA["Extend"] = Tl.Extend.Bool;
var sCount = "";
if(Tl.Level.DisplayCount)
{
sCount = iNextLevel+"."+(iCount++)+" ";
}
var sSymbol = "   ";
var bHasChild = fCheckHasHtmlElement(CurEle);
if(bHasChild)
{
sSymbol = pSymbol;
}
MyEleA.innerHTML =
fRepeatStr(Tl.Level.Prefix, iNextLevel)+sCount+sSymbol+CurEle.tagName;
if(bHasChild)
{
MyEleA.innerHTML += " (<font color='red'>"+fGetHtmlElementLen(CurEle)+"</font>)";
}
if(CurEle.id!="") MyEleA.innerHTML += " -> <span style='color:blue'>"+CurEle.id+"</span>";
if(CurEle.name) MyEleA.innerHTML += " -> <span style='color:blue'>"+CurEle.name+"</span>";
var NextContainerEle = document.createElement("div");
NextContainerEle.appendChild(MyEleA);
NextContainerEle["Object"] = CurEle;
fIntiFunc(NextContainerEle, CurEle);
if(Tl.Extend.Bool)
{
NextContainerEle.className = Tl.ClassName.Extend;
}
else
{
NextContainerEle.className = Tl.ClassName.UnExtend;
}
if(CurEle.hasChildNodes())
{
MyCallee(NextContainerEle, CurEle, iNextLevel);
}
EleContainer.appendChild(NextContainerEle);
}
EleBodyCount++;
}
}()
); // end anonymous function
}
function fIntiFunc(Ele, EleBody)
{
var TextEle = document.createTextNode(" ");
Ele.appendChild(TextEle);
Ele["ExtendAll"] = Tl.Extend.Bool;
var HasChild = fCheckHasHtmlElement(EleBody);
if(HasChild)
{
var ExpendAllEle = document.createElement("span");
ExpendAllEle.innerHTML = "&#9654";
ExpendAllEle.title = "展开/关闭所有子节点.";
ExpendAllEle["onclick"] = fExtendAll;
Ele.appendChild(ExpendAllEle);
} // end if
var EleProp = document.createElement("span");
EleProp.innerHTML = "  ★";
EleProp.title = "查看属性.";
EleProp.onclick = fDisplayPopup;
Ele.appendChild(EleProp);
} // end function fIntiFunc
function fDisplayPopup()
{
var Parent = this.parentNode;
if(Parent==null)return;
if(Parent["Object"]=="undefined")return;
var StartTime = new Date();
defaultStatus = "开始显示节点信息...";
pPopup.style.display = "block";
pPopup.innerHTML = "";
var iLeft, iTop;
iLeft = fFindPos(this, false)+"px";
iTop = fFindPos(this, true)+this.offsetHeight+"px";
with(pPopup.style)
{
left = iLeft;
top = iTop;
}
var Obj = Parent["Object"];
var arCount = fCountNode(Obj);
var CountEle = document.createElement("div");
CountEle.innerHTML =
"<div style='font-size:24px; color:red; text-align:center;'>"
+Tl.au.Subject+" "+Tl.au.Version+"</div>"
+"子节点数: "+Obj.childNodes.length
+"<br/>所有子节点数: "+arCount[1]
+"<br/>HTML 子节点数: "+fGetHtmlElementLen(Obj)
+"<br/>所有 HTML 子节点数: "+arCount[0]
;
if(Obj.href!=null)
{
CountEle.innerHTML+=
"<br/>Href: "+Obj.href
;
}
if(Obj.src!=null)
{
CountEle.innerHTML+=
"<br/>Src: "+Obj.src
;
}
pPopup.appendChild(CountEle);
var EleBtn = document.createElement("button");
EleBtn.innerHTML = "枚举节点";
EleBtn.onclick=
function()
{
fListMethod(Obj);
return false;
}
pPopup.appendChild(EleBtn);
var TextNode = document.createTextNode(" ");
pPopup.appendChild(TextNode);
var EleBtn = document.createElement("button");
EleBtn.innerHTML = "关闭";
EleBtn.onclick=
function()
{
pPopup.style.display = "none";
try{w.close()}catch(e){}
return false;
}
pPopup.appendChild(EleBtn);
var TempDiv = document.createElement("div");
TempDiv.innerHTML = "innerText: ";
var EleTxa = document.createElement("textarea");
EleTxa.value = Obj.innerText||Obj.textContent;
EleTxa.style.width = "480px";
EleTxa.rows = 8;
pPopup.appendChild(TempDiv);
pPopup.appendChild(EleTxa);
var TempDiv = document.createElement("div");
TempDiv.innerHTML = "innerHTML: ";
var EleTxa = document.createElement("textarea");
EleTxa.value = Obj.innerHTML;
EleTxa.style.width = "480px";
EleTxa.rows = 8;
pPopup.appendChild(TempDiv);
pPopup.appendChild(EleTxa);
var EndTime = new Date();
defaultStatus = "显示节点信息完毕, 耗时: "+(EndTime-StartTime)+" 毫秒";
}
function fCountNode(obj)
{// shawl.qiu script
var iTag = 0;
var iNode = obj.childNodes.length;
if(obj.nodeType==1)iTag++;
for(var i=0; i<obj.childNodes.length; i++)
{
var ar = arguments.callee(obj.childNodes[i]);
iTag+= ar[0];
iNode+= ar[1];
}
return [iTag, iNode];
} // end function fCountNode
function fExtendAll()
{
pPopup.style.display = "none";
var Parent = this.parentNode;
var sClassName = "";
var sSymIdr = "";
var sSymRpl = "";
var bExtend = null;
if(!Parent["ExtendAll"])
{
sClassName = Tl.ClassName.Extend;
Parent.className = sClassName;
Parent["ExtendAll"] = true;
sSymIdr = Tl.Extend.Symbol.False;
sSymRpl = Tl.Extend.Symbol.True;
bExtend = true;
defaultStatus = "正在展开节点, 请稍候...";
}
else
{
sClassName = Tl.ClassName.UnExtend;
Parent.className = sClassName;
Parent["ExtendAll"] = false;
sSymIdr = Tl.Extend.Symbol.True;
sSymRpl = Tl.Extend.Symbol.False;
bExtend = false;
defaultStatus = "正在关闭节点, 请稍候...";
}
var StartTime = new Date();
( // begin anonymous function
function()
{
var DivSet = Parent.getElementsByTagName("div");
var iDivSetLen = DivSet.length;
var iDivSetCount = 0;
while(iDivSetCount<iDivSetLen)
{
var CurEle = DivSet[iDivSetCount];
CurEle.className = sClassName;
CurEle["ExtendAll"] = bExtend;
iDivSetCount++;
} // end while
}()
); // end anonymous function
( // begin anonymous function
function()
{
var ASet = Parent.getElementsByTagName("a");
var iASetLen = ASet.length;
var iASetCount = 0;
while(iASetCount<iASetLen)
{
var CurEle = ASet[iASetCount];
CurEle.innerHTML = CurEle.innerHTML.replace(sSymIdr, sSymRpl);
CurEle["Extend"] = bExtend;
iASetCount++;
} // end while
}()
); // end anonymous function
var EndTime = new Date();
var TimeSpan = (EndTime - StartTime)+" 毫秒.";
if(bExtend)
{
defaultStatus = "节点已展开完毕, 耗时: "+TimeSpan;
}
else
{
defaultStatus = "节点已关闭完毕, 耗时: "+TimeSpan;
}
} // end function fExtendAll
function fClick()
{
pPopup.style.display = "none";
var Parent = this.parentNode;
if(!this.Extend)
{
this.Extend = true;
Parent.className = Tl.ClassName.Extend;
this.innerHTML = this.innerHTML.replace(Tl.Extend.Symbol.False, Tl.Extend.Symbol.True);
}
else
{
this.Extend = false;
Parent.className = Tl.ClassName.UnExtend;
this.innerHTML = this.innerHTML.replace(Tl.Extend.Symbol.True, Tl.Extend.Symbol.False);
}
} // function fClick
function fGetHtmlElementLen(Ele)
{
var iLen = Ele.childNodes.length;
var iCount = 0;
var ChildCount = 0;
while(iCount<iLen)
{
if(Ele.childNodes[iCount].nodeType==1) ChildCount++;;
iCount++;
}
return ChildCount;
} // end function fCheckHasHtmlElement
function fCheckHasHtmlElement(Ele)
{
var Had = false;
var iLen = Ele.childNodes.length;
var iCount = 0;
while(iCount<iLen)
{
if(Ele.childNodes[iCount].nodeType==1) return true;
iCount++;
}
return Had;
} // end function fCheckHasHtmlElement
function fRepeatStr(sIpt, iLen)
{// shawl.qiu script
if(!sIpt)return;
if(!iLen) iLen = 2;
iLen -= 0;
return new Array(iLen+1).join(sIpt);
} // end function fRepeatStr
function fFindPos(oEle, bReturnY)
{ // shawl.qiu script
if(!oEle)
{
alert("对象不能为空!");
return;
}
if(bReturnY)
{
return fFindPosY(oEle);
}
else
{
return fFindPosX(oEle);
}
function fFindPosX(oEle)
{ // shawl.qiu script
var iLeft = 0;
if(oEle.offsetParent)
{
while(true)
{
iLeft += oEle.offsetLeft;
if(!oEle.offsetParent)
{
break;
} // end if 1
oEle = oEle.offsetParent;
} // end while
}
else if(oEle.x)
{
iLeft += oEle.x;
}
return iLeft;
} // end function fFindPosX
function fFindPosY(oEle)
{ // shawl.qiu script
var iTop = 0;
if(oEle.offsetParent)
{
while(true)
{
iTop += oEle.offsetTop;
if(!oEle.offsetParent)
{
break;
} // end if 1
oEle = oEle.offsetParent;
} // end while
}
else if(oEle.y)
{
iTop += oEle.y;
}
return iTop;
} // end function fFindPosX
} // end function fFindPos
function fListMtd(obj, e)
{// shawl.qiu script
if(!e)var e=window.event;
try{var sur=e.srcElement||e.target;}catch(e){}
try{w.close();}catch(e){}
w=open('','newwin','width=500,height=500,left=300,top=100,scrollbars');
w.document.write('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
w.document.write('<style>body{width:400px;word-w.document.writeap: break-word;}</style>');
w.focus();
w.document.ondblclick=function(){w.close();}
fListMtd(obj, w);
try{w.onload=function(){ w.document.title=sur.firstChild.data;};}catch(e){}
w.document.close();
w.focus();
return true;
function fListMtd(obj, target)
{
var ar=new Array();
var j=0;
for(var i in obj)
{
try
{
ar[j]=i.bold()+' '+(typeof obj[i]).fontcolor('red')+
' '+(obj[i]+'').fontcolor('blue');
j++;
}
catch(e)
{
ar[j]=i.bold()+' '+(typeof obj[i]).fontcolor('red')+
(' empty').fontcolor('red').bold()
j++;
}
}
ar=ar.sort();
for(var i=0; i<ar.length; i++){
target.document.write(i+1,'. ',ar[i],'<br/>');
}
return true;
}
} // end function fListMtd
function fListMethod(obj, e)
{
fListMtd(obj, e);
} // end function fListMethod
function fFixMemoryLeak(oEle)
{// shawl.qiu script
if(!oEle)oEle=document.body;
var AtrSet=oEle.attributes;
if(AtrSet)
{
var AtrLen = AtrSet.length;
var iAtrLen = 0;
while(iAtrLen++<AtrLen)
{
if(typeof oEle[AtrSet[iAtrLen-1].name]=='function')
{
oEle[AtrSet[iAtrLen-1].name]=null;
}
} // end while(iAtrLen++<AtrLen)
} // end if(AtrSet)
if(oEle.childNodes)
{
var ChildLen = oEle.childNodes.length;
var iChildLen = 0;
while(iChildLen++<ChildLen)
{
arguments.callee(oEle.childNodes[iChildLen-1]);
} // end while(iChildLen++<ChildLen)
} // end if(oEle.childNodes)
} // end function fFixMemoryLeak
function fAppendCss()
{
var sStyleId = Tl.Body.id + "DomTreeStyle";
var sStyle =
""
+"#"+Tl.Container.id+" * div.ExtendTree"
+"{"
+" display:block;"
+"}"
+""
+"#"+Tl.Container.id+" div.UnExtendTree div, #"+Tl.Container.id+" * div.UnExtendTree div"
+"{"
+" display:none;"
+"}"
+""
+"#"+Tl.Container.id+" div.ExtendTree div, #"+Tl.Container.id+" * div.ExtendTree div"
+"{"
+""
+"}"
+""
+"#"+Tl.Container.id+" div#"+Tl.Container.id+"Popup"
+"{"
+" width: 500px;"
+" height:500px;"
+" background-color:white;"
+" border:1px dotted black;"
+" position:absolute;"
+" padding:5px;"
+"} "
;
fAddStyleFromStr(sStyle, sStyleId);
} // end function fAppendCss
function fAddStyleFromStr(sIpt, sId)
{// shawl.qiu script
var EleStyle = document.createElement("style");
EleStyle.type = "text/css";
if(sId&&sId!="")
{
EleStyle.id = sId;
}
if(fCkBrs()==1)
{
EleStyle.styleSheet.cssText = sIpt;
}
else
{
EleStyle.innerHTML = sIpt;
}
function fCkBrs()
{
switch (navigator.appName)
{
case 'Opera': return 2;
case 'Netscape': return 3;
default: return 1;
}
} // end function fCkBrs
var EleHead=document.getElementsByTagName("head")[0]
if(!EleHead) EleHead=document.body;
EleHead.insertBefore(EleStyle, EleHead.firstChild);
} // end function fAddStyleFromStr
//------------------------------------end private method
} // shawl.qiu code
//---------------------------------end class DomTree()---------------------------------//
var domtree = new DomTree();