JavaScript DOM 属性与特性

最近看着复杂密集的文字有点心慌...

想了想半夜时分还是回忆一下前端的一些东西更解脱一点~

虽然是很简单一些东西,不过一边总结一边回想当初被前端绑架的日子会很美好吧。

ok 进入正题

一、跨浏览器命名

不同浏览器中,属性命名只会有一点点的差异,但是特性和属性命名会有很大的差异。

for 一个栗子,chrome、safari、firefox、opera 中都可以用 class 获取到 class 特性,但是 IE 需要用 ClassName,可能是因为这个属性的名称是 ClassName...

在 IE(异端)中,特性名称和属性名称是一致的,虽然说一致通常是好事,但不同浏览器中不同的命名让人十分不爽。

不过有很多同一的方法,比如说用 Jquery 这样的牛13的库,可以让我们使用一个特定的名称而不用担心浏览器平台。不过如果没有库的支持,就要自己意识这些奇怪的差异了...

二、命名限制

特性表示传递给 DOM 方法的字符串,他的命名是很自由的,几乎没有什么限制。

但属性名称则不同,由于可以作为标识符用点表示法进行访问,他的命名规范受到很多限制,除了一些保留字以外,属性名称还必须符合标识符的规则。

ECMAScript 指出...由于某些关键字不能作为属性名称,所以定义了一些其他的替代方式,详细可以看这里:http://www.ecma-international.org/publications/standards/Ecma-262.htm

比如说 <lavel> 元素的 for 属性可以用 htmlFor 属性进行表示,以为 for 是一个保留字不能直接使用,并且所有元素的 class 属性都是由 className 属性表示的,因为 class 也是保留字...

常用的名称的不同如下:

 特性名称 属性名称
 forhtmlFor
classclassName
readonlyreadOnly
maxlengthmaxLength
cellspacingcellSpacing
rowspanrowSpan
colspancolSpan
tabindextabindex
cellpaddingcellPadding
usemapuseMap
frameborderframeBorder
contenteditablecontentEditable

这只是原先的一些规范,在 html5 标准之后,有很多新的名称像是 accessKey、dropZone、dateTime、isMap、radioGroup 这些...

三、XML 与 HTML 之间的差异

属性自动和特性对应整体而言就是 HTML DOM 的一个特性,但是在处理一个 XML DOM 时,不会在元素上自动创建属性值表示特性值,所以要用更传统的 DOM 特性方法来获取特性的值...

可以通过一个函数来检查某一个元素是否是 XML 元素,代码如下:

Code   ViewPrint
  1. function isXML(elem) {
  2.     return (elem.ownerDocument || elem.documentElement.nodeName.toLowerCase() != "html";
  3. }

四、自定义特性的行为

并不是所有的特性都有元素的属性来表示,虽然这通常适用于 HTML DOM 的原生特性,但是页面元素上定义的自定义特性不会自动转换为元素属性的表示方式,要访问这些自定义特性的值,需要用 DOM 方法的 getAttribute() 和 setAttribute()。

如果不确定一个特性的属性是否存在也可以用一个表达式来进行检查,代码如下:

Code   ViewPrint
  1. var value = element.someValue ? element.someValue : element.getAttribute('someValue');

warning:也不能说是 warning,大概就是在 HTML5 中所有的自定义特性使用 data- 前缀,以便遵守 HTML5 的规范,这是一个分离自定义特性和原生特性的一个很好地约定!

五、性能

总的来说,属性的访问速度比 DOM 特性方法的访问速度要快...

具体的代码可以自己写,大概就是分别测试下看下速度差异...不高兴再写了 qaq

印象中之前测试过,属性的获取和设置操作比 setAttribute() 和 setAttribute() 快...

虽然说速度方面的差异对于少量的操作不会有太大的影响,但这一点优化聊胜于无,在属性只存在的时候就访问属性值,不存在的时候再利用 DOM 方法。

 

(P.S.1.本来想写很多很多,像 DOM 中的 id/name 膨胀,还有 URL 规范,还有 tab index,还有 style/type 特性这些,但似乎很晚了,只能有空再写...)

(P.S.2.前端真的是美妙得令人着迷又捉摸不透...tung nei yat yoeng...)

如果我的文章对您有帮助,请我喝杯咖啡吧~

支付宝转账打赏⬆️

微信钱包转账打赏⬆️

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: