javascript 遍历node节点

最新推荐文章于 2021-08-23 10:01:12 发布

code_xin~

最新推荐文章于 2021-08-23 10:01:12 发布

阅读量758

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44456354/article/details/111996937

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root" class="root">
    <div>
      <i></i>
      <em></em>
      <span><strong></strong></span>
    </div>
    <span></span>
    <pre class="text">
      <input type="text">
    </pre>
    <title></title>
    <code></code>
  </div>
<script>
  function *flatten1(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        yield * flatten(arr[i]);
      } else {
        yield arr[i];
      }
    }
  }
  function flatten(arr) {
    let stack = arr.slice(0);
    let r = [];
    while (stack.length) {
      const item = stack.shift();
      // console.log(stack)
      if (Array.isArray(item)) {
        stack = stack.concat(item);
      } else {
        r.push(item);
      }
    }
    return r;
  }
  const iterator = flatten1(['a',[1,2,[1,{},'b'],5],6]);
  const res = [];
  while (item = iterator.next().value) {
    res.push(item)
  }

  // console.log(flatten(['a', [1, 2, [1, {}, 'b'], 5], 6]))
  
</script>
<script type="text/javascript">
    //当窗体加载完毕后触发此函数
    window.onload = function() {
      //document 获取根元素
      var root = document.getElementById('root');
      // traverseNodes(root);
      document.write(msg);
    }
  const nodes = [];
  const nodeIterator = document.createNodeIterator(root);
  // while (node = nodeIterator.nextNode()) {
  //   if (node.nodeType === 1) console.log(node)
  // }

  function traverseNodes(node) {
    //判断该元素节点是否有子节点
    if (node.hasChildNodes) {
      //得到所有的子节点
      var sonnodes = node.childNodes;
      //遍历所哟的子节点
      for (var i = 0; i < sonnodes.length; i++) {
        //得到具体的某个子节点
        var sonnode = sonnodes.item(i);
        //递归遍历
        if (sonnode.nodeType === 1) {
          nodes.push(sonnode)
          display(sonnode)
        }
        traverseNodes(sonnode);
      }
    } else {
      return node;
    }
  }
  var msg = "";
  var num = 0;
  function display(node) {
    msg += (++num) + " --  nodeName=" + node.nodeName + " -- nodeValue=" + node.nodeValue + " -- nodeType=" + node.nodeType + "<br/>";

  }
  traverseNodes(root);
</script>
</body>
</html>

code_xin~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 遍历node节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&lt
复制链接

扫一扫