javascript - Traversez les nœuds dom, convertissez-les en tableau et triez les plus profonds au premier plan. Comment y parvenir?

Question

Comme le titre l'indique, commencez à partir d'un nœud et parcourez vers le bas jusqu'à ce que tous les nœuds soient traversés. Disposez les nœuds les plus profonds à l'avant et convertissez ces nœuds en un tableau. Comment y parvenir ?

Answer 1

Parcourez les enfants de manière récursive, dans l'ordre de bas en haut, de gauche à droite

function listNode (node) {
  if (!(node instanceof Node)) {
    throw new TypeError("parameter 1 is not of type 'Node'")
  }
  return Array.from(node.childNodes || [])
    .reduce((cList, cNode) => cList.concat(listNode(cNode)), [])
    .concat([node])
}

Remarque : L'ordre de bas en haut et de gauche à droite ne signifie pas nécessairement que le plus profond est devant. Vous pouvez utiliser la traversée de séquence de couches pour enregistrer à l'envers :

function listNode (rootNode) {
  if (!(rootNode instanceof Node)) {
    throw new TypeError("parameter 1 is not of type 'Node'")
  }
  var queue = [rootNode, null]
  var levelNodes = []
  var result = []

  while (queue.length > 1) {
    var node = queue.shift()
    if (node === null) {
      queue.push(null)
      result = levelNodes.concat(result)
      levelNodes = []
      continue
    }
    
    levelNodes.push(node)
    if (node.hasChildNodes()) {
      queue = queue.concat(Array.from(node.childNodes))
    }
  }
  
  if (levelNodes.length > 0) {
    result = levelNodes.concat(result)
  }
  
  return result
}