天天看点

上层建筑——DOM元素的特性与属性(dojo/dom-prop)

 上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理。比如:

textcontent、innerhtml、classname、htmlfor、value

disabled、checked等无状态特性对应于属性中的布尔变量

事件的处理

  那这一节,我们便来看看prop对于属性的处理。

  首先是一个标准名称字典,将要设置的属性名重新命名,避免与保留字的冲突:

 相比dom-attr来说,dom-prop模块只有两个公共函数:prop.get与prop.set

  prop.get方法的函数签名为:

除了textcontent属性外,其他直接以方括号语法从node中取值:node[prop];对于textcontent属性,如果元素不支持textcontent,便以深度优先算法去获取元素下所有文本节点的nodevalue:

因为innertext并不是标准属性,所以这里弃之不用;以下便是get方法的源码:

prop.set方法的函数签名为:

  在attr.set方法中,很多情况都交给prop来处理,下面我们就要看看prop中set方法的实现。

  set方法用来为元素的属性赋值,在实际应用中需要处理以下几种情况:

参数分解,如果一次设置多个属性,为每个属性分别设置

如果someattr是“style”,则交给dom-style模块处理

如果someattr是innerhtml,因为有的元素(tbody、thead、tfoot、tr、td、th、caption、colgroup、col)不支持innerhtml属性,所以需要曲线救国,这里首先将元素的子节点清除掉,然后利用dom-construct的todom方法,将html片段转化成dom节点,作为子节点插入元素中

如果someattr是textcontent,同样因为有的浏览器并不支持该属性,曲线救国的方式是先清除元素的子节点,然后创建文本节点作为子节点插入元素中

如果value是function,则看做添加事件;对于event的处理最好不要使用prop模块还是推荐使用on模块来绑定事件

如果您觉得这篇文章对您有帮助,请不吝点击右下方“推荐”,谢谢~

继续阅读