web前端：遍历DOM树
lzzyok小精灵
2024-04-23 23:19
在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"，双方为了在Javascript与JScript一决生死，于是大规模的赋予浏览器强大的功能。
遍历DOM树
第一个函数:给我根节点,我会找到所有的子节点:forDOM(根节点)
获取这个根节点的子节点
varchildren=根节点的.children
调用第二个函数
第二个函数:给我所有的子节点,我把每个子节点的名字显示出来(children)
for(vari=0;i<children.length;i++){
每个子节点
varchild=children[i];
f1(child);给我节点,我显示该节点的名字
child是子节点,但是如果child里面还有子节点,此时child就是爹了
child.children&&第一个函数(child)
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>遍历DOM树</title>
</head>
<body>
<h1>遍历DOM树</h1>
<pstyle="color:green;">Tip:可以在遍历的回调函数中任意定制需求</p>
<div>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<div>
<div>
<span>haha</span>
</div>
</div>
</div>
<divid="demo_node">
<ul>
<li>123</li>
</ul>
<p>hello</p>
<h2>world</h2>
<div>
<p>dsa</p>
<h3>
<span>dsads</span>
</h3>
</div>
</div>
<script>
//获取页面中的根节点--根标签
varroot=document.documentElement;//html
//函数遍历DOM树
//根据根节点,调用fn的函数,显示的是根节点的名字
functionforDOM(root1){
//调用f1,显示的是节点的名字
//f1(root1);
//获取根节点中所有的子节点
varchildren=root1.children;
//调用遍历所有子节点的函数
forChildren(children);
}
//给我所有的子节点,我把这个子节点中的所有的子节点显示出来
functionforChildren(children){
//遍历所有的子节点
for(vari=0;i<children.length;i++){
//每个子节点
varchild=children[i];
//显示每个子节点的名字
f1(child);
//判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
child.children&&forDOM(child);
}
}
//函数调用,传入根节点
forDOM(root);
functionf1(node){
console.log("节点的名字:"+node.nodeName);
}
//节点:nodeName,nodeType,nodeValue
</script>
</body>
</html>
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
