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

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

require(["dojo/dom-construct"], function(domConstruct){
    // Take a string and turn it into a DOM node
    var node = domConstruct.toDom("<div>I'm a Node</div>");
});

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

  • 利用正则表达式,依次匹配出所有标签;首先需要一个正确的正则,其次需要保证正确的节点关系
  • 利用dom的api来做,这个我们可以创建一个元素使用innerHTML来自动转换

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

  • innerHTML取值时会把所有的子元素作为文本输出;
  • 设值时,会先将字符串转化为dom节点,然后用dom节点替换元素中的子元素;此时如果字符串中有特殊标签开头,比如tbody、thead、tfoot、tr、td、th、caption、colgroup、col等;对于必须存在包装元素的标签,浏览器不会为这些标签补全包装元素,或者统一作为文本处理,或者忽略这些标签
    那我们就有必要对html标签进行一些修正,主要是针对必须存在于包装元素的标签;这些标签作为innerHTML赋值会被浏览器忽略,但是如果作为dom节点直接挂载到dom树中,浏览器会为他们自动创建隐含的包装元素。所以在遇到这些标签开头的html片段时,我们需要手动补全缺失的包装元素。

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

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

var tagWrap = {
            option: ["select"],
            tbody: ["table"],
            thead: ["table"],
            tfoot: ["table"],
            tr: ["table", "tbody"],
            td: ["table", "tbody", "tr"],
            th: ["table", "thead", "tr"],
            legend: ["fieldset"],
            caption: ["table"],
            colgroup: ["table"],
            col: ["table", "colgroup"],
            li: ["ul"]
        },

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

for(var param in tagWrap){
        if(tagWrap.hasOwnProperty(param)){
            var tw = tagWrap[param];
            tw.pre = param == "option" ? '<select multiple="multiple">' : "<" + tw.join("><") + ">";
            tw.post = "</" + tw.reverse().join("></") + ">";
        }
    }

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

var reTag = /<\s*([\w\:]+)/,//用来判断字符串参数中是否含有html标签
masterNode = {},//作为仓库来管理临时容器
 masterNum = 0,//z这两个变量用来标识临时容器
masterName = "__" + dojo._scopeName + "ToDomId";

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

doc = doc || win.doc;
        var masterId = doc[masterName];
        if(!masterId){
            doc[masterName] = masterId = ++masterNum + "";
            masterNode[masterId] = doc.createElement("div");
        }

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

var match = frag.match(reTag),
            tag = match ? match[1].toLowerCase() : "",
            master = masterNode[masterId],
            wrap, i, fc, df;
        if(match && tagWrap[tag]){
            wrap = tagWrap[tag];
            master.innerHTML = wrap.pre + frag + wrap.post;
            for(i = wrap.length; i; --i){
                master = master.firstChild;
            }
        }else{
            master.innerHTML = frag;
        }

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

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

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

if(master.childNodes.length == 1){
            return master.removeChild(master.firstChild); // DOMNode
        }

        df = doc.createDocumentFragment();
        while((fc = master.firstChild)){ // intentional assignment
            df.appendChild(fc);
        }
        return df; // DocumentFragment

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

时间: 2024-08-20 01:16:57

dojo/dom-construct.toDom方法学习笔记的相关文章

JQuery 自定义CircleAnimation,Animate方法学习笔记_jquery

在此贴出一些学习成果,希望能对学习JQuery的其他同学有所帮助,同时也记录下自己的学习情况. 看了一些JQuery的官方教程,已经有点心潮澎湃了,就决定自己尝试着写一些东西出来.我看到了很多很绚的动画效果,然后决定自己也尝试一下,我决定要写一个圆周运动的动画效果,下面贴出js代码 复制代码 代码如下: var CircleAnimation = function (center_left, center_top, id, clockwise, duration) { return new Ci

php cookie使用方法学习笔记分享_php技巧

PHP setcookie() 函数向客户端发送一个 HTTP cookie.cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到用户计算机中的小文本文件.每当计算机通过浏览器请求一个页面,就会发送这个 cookie.cookie 的名称指定为相同名称的变量.例如,如果被发送的 cookie 名为 "name",会自动创建名为 $user 的变量,包含 cookie 的值. 必须在任何其他输出发送前对 cookie 进行赋值.如果成功,则该函数返回 true,否

Lua中的元表和元方法学习笔记_Lua

元表(metatable)是 Lua 里每种类型的值的默认操作方式的集合,例如,数字可以加减乘除.字符串可以连接合并.table 可以插入一对 key-value 值.函数可以被调用等等,这些操作都遵循其预定义的行为来执行. 而值的默认操作方式不是一成不变的,可以通过元表来修改其行为表现,或者是新定义一些默认没有的操作.例如,当两个 table 相加时, Lua 会检查它们之间的元表里是否有 "__add" 这个函数,如果定义有这个函数, 则调用这个函数来执行一次加法操作. 这里,相加

php cookie方法学习笔记分享

PHP setcookie() 函数向客户端发送一个 HTTP cookie.cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到用户计算机中的小文本文件.每当计算机通过浏览器请求一个页面,就会发送这个 cookie.cookie 的名称指定为相同名称的变量.例如,如果被发送的 cookie 名为 "name",会自动创建名为 $user 的变量,包含 cookie 的值. 必须在任何其他输出发送前对 cookie 进行赋值.如果成功,则该函数返回 true,否

php5中魔术方法学习笔记

1.__construct() 当实例化一个对象的时候,这个对象的这个方法首先被调用.    代码如下 复制代码 class Test { function __construct() { echo "before"; } } $t = new Test(); class Test { function __construct() { echo "before"; } } $t = new Test(); 输出是: start 构造器是一个魔术方法,当对象被实例化时

Python子类调用父类方法学习笔记

python和其他面向对象语言类似,每个类可以拥有一个或者多个父类,它们从父类那里继承了属性和方法.如果一个方法在子类的实例中被调用,或者一个属性在子类的实例中被访问,但是该方法或属性在子类中并不存在,那么就会自动的去其父类中进行查找. 继承父类后,就能调用父类方法和访问父类属性,而要完成整个集成过程,子类是需要调用的构造函数的. 子类不显式调用父类的构造方法,而父类构造函数初始化了一些属性,就会出现问题 如果子类和父类都有构造函数,子类其实是重写了父类的构造函数,如果不显式调用父类构造函数,父

jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML_jquery

摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码 .新增一个servlet类 AJAXXMLServer.java 复制代码 代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle

Dojo学习笔记 7. dojo.dom

模块:dojo.dom dojo.dom.isNode 测试指定对象是否为节点 Usage Example: dojo.dom.isNode(dojo.byId('edtTitle')); dojo.dom.getUniqueId 取得唯一id Usage Example: dojo.dom.getUniqueId(); //will return dj_unique_# dojo.dom.firstElement = dojo.dom.getFirstChildElement 取得指定节点下的

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git --------------------学习目录------------------------ 4.DOM操作(节点增删改查) 节点查找:节点分为三种类型:元素节点.属性节点.文本节点 创建节点 创建元素节点 使用 jQuery