精选留言(25)

• 
  周序猿

  2019-03-10

  // 深度优先 function deepLogTagNames(parentNode){ console.log(parentNode.tagName) const childNodes = parentNode.childNodes // 过滤没有 tagName 的节点，遍历输出 Array.prototype.filter.call(childNodes, item=>item.tagName) .forEach(itemNode=>{ deepLogTagNames(itemNode) }) } deepLogTagNames(document.body) // 广度优先 function breadLogTagNames(root){ const queue = [root] while(queue.length) { const currentNode = queue.shift() const {childNodes, tagName} = currentNode tagName && console.log(currentNode.tagName) // 过滤没有 tagName 的节点 Array.prototype.filter.call(childNodes, item=>item.tagName) .forEach(itemNode=>{ queue.push(itemNode) }) } } breadLogTagNames(document.body)

  展开

  共 1 条评论

  40
• 
  阿成

  2019-03-09

  第一段代码中的 DocumentFragment 应该改为 DocumentType... /** * @param {Element} el * @param {(Element) => void} action function walk (el, action) { if (el) { action(el) walk(el.firstElementChild, action) walk(el.nextElementSibling, action) } } walk(document.documentElement, el => console.log(el.nodeName)) // 如果想要去重... const set = new Set() walk(document.documentElement, el => { set.add(el.nodeName) }) for (let n of set) console.log(n)

  展开

  共 2 条评论

  14
• 
  天亮了

  2019-05-06

  这样可以把tagName全打印出来... document.getElementsByTagName('*');

  共 3 条评论

  11
• 
  拾迹

  2019-06-17

  document.querySelectorAll('*')，这样有点过分了

  

  3
• 
  kino

  2019-03-12

  insertBefore(newNode,null)和appendChild的区别是啥

  共 1 条评论

  3
• 
  我叫张小咩²⁰¹⁹

  2019-03-10

  var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false) var node while(node = walker.nextNode()) console.log(node.tagName) ---------- or recursive ------------ const result = [] function getAllTagName(parent) { const childs = Array.from(parent.children) result.push(...childs.map(el => el.tagName)) for (var i = 0; i < childs.length; i++) { if (childs[i].children.length) getAllTagName(childs[i]) } if (i == 0) return } getAllTagName(document) console.log(result)

  展开

  

  3
• 
  小二子大人

  2019-05-08

  const root = document.getElementsByTagName('html')[0]; // 深度优先遍历 function deepLogTagName(root) { console.log(root.tagName); if (root.childNodes.length > 0) { for (let i = 0; i < root.childNodes.length; i++) { if (root.childNodes[i].nodeType === 1) { deepLogTagName(root.childNodes[i]); } } } } deepLogTagName(root); console.log("111111111111111111111") // 广度优先遍历 console.log(root.tagName); function breadLogTagName(root) { if (root.childNodes.length > 0) { for (let i = 0; i < root.childNodes.length; i++) { if (root.childNodes[i].nodeType === 1) { console.log(root.childNodes[i].tagName); } } for (let i = 0; i < root.childNodes.length; i++) { if (root.childNodes[i].nodeType === 1) { breadLogTagName(root.childNodes[i]); } } } } breadLogTagName(root)

  展开

  

  1
• 
  笨鸟

  2019-03-26

  function loop(node){ if(!node){ return } if(node.nodeType === document.ELEMENT_NODE) console.log(node.nodeName); if(node.childNodes){ node.childNodes.forEach(child => { loop(child) }) } } loop(document)

  展开

  

  1
• 
  宇宙全栈

  2019-03-11

  第一段代码中的 DocumentFragment 应该改为 DocumentType

  

  1
• 
  「前端天地」公众号

  2021-09-30

  document好像没有createDocumentType方法

  

  
• 
  杜森垚

  2020-11-22

  document.body.attributes.class = "a" 少了.value 应该为 document.body.attributes.class.value = "a"

  

  
• 
  不曾相识

  2020-10-10

  <main> <!-- <header> <h1>遍历所有dom打印tagName</h1> <nav> <ul> <li>遍历</li> <li>递归</li> <li>深度</li> <li>广度</li> </ul> </nav> </header> 第一次的dom已经验证完成 --> <header> <!-- 加入更多的子元素p验证 --> <h1>遍历所有dom打印tagName</h1> <nav> <ul> <li> <p>遍历</p> </li> <li> <p> 递归 </p> </li> <li> <p>深度</p> </li> <li> <p>广度</p> </li> </ul> </nav> </header> </main> <footer> <b>以上都是测试结果，研究中</b> </footer> <script> // 获取根元素 html 开始逐渐有限使用tagName选择器 动态的。 var html = document.getElementsByTagName('html')[0]; // 2、 暂时不要把功能柔和在一起，分解最小的功能 比如，查看单个节点的，打印tagName并返回一个包含其子节点集合 function getChildrenNodes(node) { console.log(node.tagName); if (node.children.length) { var children = node.children; // let flag = false; let childrenList = []; //子节点的后代 for (let child of children) { getChildrenNodes(child) childrenList.push(child) } return childrenList; } else { return false; //当前节点没有子元素 } } // 3、 很好第三步直接就，查看递归资料，找思路， 0-0 // 停止递归的条件是，所有子节点都没有子节点 // 验证 肯定会失败。贝贝 // console.log(getChildrenNodes(html)); // FIXME 我擦竟然成功了。。。只不过所有的元素都打印了2次 // 现在在li当中加入p元素，看结果有没有加入打印 看了，大佬们的答案随便填入的p，我也不懂啥事广度优先，深度优先 console.log(getChildrenNodes(html)); </script>

  展开

  

  
• 
  Peter

  2020-06-30

  var allTags = {}; [].forEach.call(document.body.getElementsByTagName('*'), (e) => { allTags[e.tagName] = (allTags[e.tagName] || 0) + 1 }) console.log(allTags)

  

  
• 
  pcxpccccx_

  2020-03-22

  讲的真好很全面

  

  
• 
  学海无涯莫非

  2019-10-18

  引用：如果你追求极致的性能，还可以把 Attribute 当作节点：getAttributeNode，setAttributeNode。

  共 1 条评论

  
• 
  大力

  2019-10-11

  let set = new Set(); Array.from(document.getElementsByTagName('*')).map(node => set.add(node.tagName.toLowerCase())); let list = Array.from(set).sort(); console.log(list);

  

  
• 
  kgdmhny

  2019-06-05

  老师,请问一下,"对 DOM 而言，Attribute 和 Property 是完全不同的含义，只有特性场景下，两者才会互相关联（这里在后面我会详细讲解，今天的文章里我就不展开了）"后面有讲解这块吗？

  作者回复: 有啊

  共 2 条评论

  
• 
  胡琦

  2019-05-06

  膜拜前排各位大佬，学习了！

  

  
• 
  Sticker

  2019-04-25

  void function loop(parent){ const children = parent.childNodes; children.forEach(item => { if(item.nodeType === 1){ console.log(item.nodeName) if(item.childNodes.length > 0){ loop(item) } } }) }(document);

  展开

  

  
• 
  Ramda

  2019-04-19

  const $body = document.body function deep (parentNode) { const children = parentNode.childNodes children.forEach(item => { if(item.nodeType === 1 ) { console.log(item.nodeName) if (item.childNodes.length > 0) { deep(item) } } }) } deep($body)

  展开

  

  