浏览器DOM：你知道HTML的节点有哪几种吗？

精选留言(20)

• 

  周序猿

  // 深度优先
  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)

  2019-03-10

  

   24
• 

  阿成

  第一段代码中的 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)
  

  2019-03-09

  

   12
• 

  天亮了

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

  2019-05-06

   2

   7
• 

  kino

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

  2019-03-12

  

   3
• 

  我叫张小咩²⁰¹⁹

  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)
  
  
  

  2019-03-10

  

   3
• 

  ttys000

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

  2019-06-17

  

   1
• 

  小二子大人

  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)

  2019-05-08

  

   1
• 

  腾松

  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)

  2019-03-26

  

   1
• 

  宇宙全栈

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

  2019-03-11

  

   1
• 

  莫非

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

  2019-10-18

  

  
• 

  大力

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

  2019-10-11

  

  
• 

  kgdmhny

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

  作者回复: 有啊

  2019-06-05

  

  
• 

  胡琦

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

  2019-05-06

  

  
• 

  Sticker

  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);

  2019-04-25

  

  
• 

  Ramda

  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)

  2019-04-19

  

  
• 

  踏凌霄

  void function queryAndPrintSon(params) {
        var child = params.children
        for (let index = 0; index < child.length; index++) {
          const element = child[index];
          console.log(element.tagName)
          queryAndPrintSon(element)
        }
      }(document.getRootNode())

  2019-04-17

  

  
• 

  周飞

  let tagNameArr = [];
      function travaldom(root){
        if(root.tagName && root.tagName !=='text') tagNameArr.push(root.tagName)
         root.childNodes.forEach(node=>{
            travaldom(node);
         });
      }
      travaldom(document);
      console.log(tagNameArr)

  2019-03-27

  

  
• 

  逐梦无惧

  老师请问这些html的结构化内容有在哪本书进行介绍吗

  2019-03-27

  

  
• 

  花骨朵

  <!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>遍历输出tagName</title>
  </head>
  <body>
    <section>
      <header>This is a header</header>
      <div>
        <h4>This is a content title</h4>
        <p>This is the <em>first</em> paragraph.</p>
        <p>This is the <strong>second</strong> paragraph.</p>
      </div>
      <footer>This is a footer of this page.</footer>
    </section>
    <script>
      const secElement = document.getElementById('sec');
      function getChildTagNames() {
        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false)
        let node;
        while(node = walker.nextNode()) {
          if(node.tagName)
          console.log(node.tagName);
        }
      }
      getChildTagNames(secElement);
    </script>
  </body>
  </html>

  2019-03-22

  

  
• 

  Ppei

  老师：
  比如 document.body.attribute.class = “a” 等效于 document.setAttribute(“class”, “a”)。
  应该是 document.body.attributes吧？
  疑惑：
  var divDom = document.createElement('div')
  divDom.attributes.id = 'app'
  divDom.setAttribute('class', 'app')
  为什么在divDom上看不到id属性？append到页面中后，同样用getElementById也选择不到这个DOM，用class就可以。

  2019-03-11

  

  