quickDom.js 974 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /*
  2. * @Description: 通过js快速构建原生dom元素
  3. * @Autor: kindring
  4. * @Date: 2021-10-12 17:16:30
  5. * @LastEditors: kindring
  6. * @LastEditTime: 2021-10-12 18:02:44
  7. * @LastDescript:
  8. */
  9. let domTree = {
  10. tag: 'div',
  11. attr: [
  12. { name: 15 }
  13. ],
  14. childred: [{
  15. tag: 'img',
  16. attr: {
  17. src: '155'
  18. }
  19. }, ]
  20. }
  21. class Dom {
  22. construction(domTree) {
  23. this.domTree = domTree
  24. }
  25. render(obj) {
  26. let tag = obj.tag || 'div'
  27. let el = document.createElement(tag)
  28. Object.keys[obj.attr].forEach(_key => {
  29. let _keyString = obj.attr[_key]
  30. if (_keyString == '') {
  31. }
  32. el.setAttribute(_key, _keyString);
  33. })
  34. obj.childred.forEach(child => {
  35. el.appendChild(this.render(child))
  36. })
  37. return el
  38. }
  39. create() {
  40. return this.render(this.domTree)
  41. }
  42. }
  43. let d = new Dom(domTree)
  44. console.log(d.create);