天天看点

dojo/dom-construct.toDom方法学习笔记

 todom方法用来将html标签字符串转化成dom节点。1.7之后todom方法被分配到了dom-construct模块。

 dom操作是每位想要有所建树的前端开发者必须要跨过的槛,类库虽好常用有依赖,对于类库里常用的函数,我们要做到知其然知其所以然。todom将html转换为dom节点,我能想到的是两种方法:

利用正则表达式,依次匹配出所有标签;首先需要一个正确的正则,其次需要保证正确的节点关系

利用dom的api来做,这个我们可以创建一个元素使用innerhtml来自动转换

  很明显,第二种方法简单,全部交给浏览器去做,我们只需拿到元素的子节点即可;但是innerhtml标签又有它的特殊性:

innerhtml取值时会把所有的子元素作为文本输出;

设值时,会先将字符串转化为dom节点,然后用dom节点替换元素中的子元素;此时如果字符串中有特殊标签开头,比如tbody、thead、tfoot、tr、td、th、caption、colgroup、col等;对于必须存在包装元素的标签,浏览器不会为这些标签补全包装元素,或者统一作为文本处理,或者忽略这些标签

dojo/dom-construct.toDom方法学习笔记

那我们就有必要对html标签进行一些修正,主要是针对必须存在于包装元素的标签;这些标签作为innerhtml赋值会被浏览器忽略,但是如果作为dom节点直接挂载到dom树中,浏览器会为他们自动创建隐含的包装元素。所以在遇到这些标签开头的html片段时,我们需要手动补全缺失的包装元素。

  下面我们来看一下dom-construct模块是怎么处理的。

  找出所有待补全的元素:tbody、thead、tfoot、tr、td、th、caption、colgroup、col、legend、li;dojo中使用如下结构将某些缺失的标签管理起来:

经过下面这一步处理后,tagwrap中的每一项中多了两个属性, eg:tagwrap.tr.pre = "<table><tbody>"和tagwrap.tr.post = "</tbody></table>";

1、innerhtml方式需要一个额外的元素,作为临时的容器,所以利用一下变量来管理这个额外的元素:

2、todom方法中,首先创建一个临时容器,是一个div元素:

 3、然后判断frag中是否含有html标签,如果含有html标签而且需要我们补全包装元素,则利用上面生成的pre和post补全标签后传递给master这个容器的innerhtml,这一步完成后找到我们传入的html标签对应的dom树,赋值给master;如果不需要包装,直接赋值给master.innerhtml

  这里仅是简单的认为如果正则匹配则进行包装处理,按照我的理解,正则的写法应该为:/^<\s*([\w\:]+)/,原因看下面例子:

dojo/dom-construct.toDom方法学习笔记

  第一个表达式子所以报错,就是因为“adffd”这部分在dom中被作为文本节点,文本节点并没有子节点。更改了正则之后,如果不是html标签做开头则统一作为文本节点添加到dom中去。

  4、将html标签转化成dom后,如果仅有一个元素则返回这个元素,否则将转化后的元素,放入到文档片段中。

参考标准的描述,documentfragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段。可以通过appendchild()或insertbefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会称为文档树的一部分

继续阅读