创建dom对象的可编辑副本

时间:2019-06-09 17:26:59

标签: javascript html dom

我想创建一个将HTML元素复制为对象的程序,以便以后在不更改实际DOM的情况下进行操作。

我正在创建一个简单的多功能函数,该函数将字符串作为输入,然后通过document.body查找该文本的父标记。我利用DOM解析器来执行此操作,但是很快发现我无法使用Object.create复制HTML节点。

下面是产生问题的代码:

[...(Object.create(document.body).childNodes)]

我希望结果是document.body的所有子节点的可编辑副本,但是却出现此错误:

TypeError: Illegal invocation
    at Object.module.exports (bundle.js:6)
    at Object.1.../Util/parsers (bundle.js:10)
    at o (bundle.js:1)
    at r (bundle.js:1)
    at bundle.js:1

注意: 我正在使用browserify来捆绑我的代码。

以下是我所有的(未完成的)代码:

主脚本:

require('../Util/parsers')

module.exports = function(searchString, opts = {}) {
  const options = Object.assign({start: document.body, textOnly: true, parentLevel: 1, excludeTags: []}, opts)
  console.log([...(Object.create(options.start).childNodes)].mapFlat('childNodes', i => i instanceof NodeList ? [...i] : i))
}

try{
  module.exports()
} catch(e) {
  console.log(e)
}

实用程序/解析器:

Array.prototype.mapFlat = function(property, failed = i => i) {
  function runMap(retval, property, failed = i => i) {
    retval = retval.map(i => {
      if(i[property]) {
        const retval = [i, i[property]].flat(Infinity)
        delete i[property]
        return retval
      }

      return failed(i)
    }).flat(Infinity)

    return retval
  }

  let retval = this
  retval = runMap(retval, property, failed)

  while(retval.filter(i => i[property])[0]) {
    retval = runMap(retval, property, failed)
  }

  return retval
}

0 个答案:

没有答案