javascript用TreeWalker()方法历遍所有节点或是目标节点的所有子节点

cdcdhj

于 2024-06-14 21:45:41 发布

阅读量171

点赞数 3

分类专栏： javascript学习日记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/139690644

版权

javascript学习日记专栏收录该内容

131 篇文章 0 订阅

订阅专栏

以前我们主要是用for()来循环节点中的子节点，现在可以用TreeWalker()来进行历遍
//比如历遍下面的input元素

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html charset=utf-8"/>
        <title>javascript变量声明的一些测试</title>
        <style type="text/css">
            body{
                margin: 0;
            }
           #firstdiv
           {
            margin: 0 auto auto auto;
            width: 1000px;
            text-align: center;
           }
           
            
        </style>
    </head>
    <body>
        <div id="firstdiv" style="width:900px;text-align: center;border:10px solid blue">
            
        <form id="form1" action="" name="form1" method="post">
            用户：<input type="text" name="username" value="" autocomplete="off"/></br>
            密码：<input type='password' name="pwd" value="" autocomplete="off"/></br>
            <input type="button" value="提交"/>
            
            </form>
        </div>    
       
    </body>
    <script type="text/javascript" src="test.js"></script>
       
    </script>
</html>

//目标节点的父节点
let div=document.getElementById('firstdiv');

//createTreeWalker(根节点，要查看节点的类型，节点过滤器可以是对象或函数，表示是否可扩展的布尔值)
let treewalker=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,{
    acceptNode:function(node)
    {
        return node.nodeName==="INPUT" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
},false);

let nodeList=[];
let currentNode;
while(currentNode=treewalker.nextNode())
    {
        nodeList.push(currentNode);
    }
    console.log(nodeList);