javascript - 遍历dom节点,将其转换为一个数组,并且将层次越深的排在越前面,怎么实现?
高洛峰
高洛峰 2017-06-26 10:51:49
0
1
777

如题,从一个node节点开始向下遍历,直至遍历完所有节点,将层次最深的节点排在最前面,将这些节点转换为一个数组,如何实现?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
仅有的幸福

递归遍历孩子,按底向上、左到右顺序

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])
}

补:按底向上、左到右顺序并不一定是层次最深的排前面。可以用层序遍历倒过来记录:

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
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板