菜单

返本求源——DOM成分的性状与性格

2019年2月14日 - JavaScript

返本求源——DOM成分的性格与品质

2015/09/06 · HTML5,
JavaScript ·
DOM

原稿出处: 木的树   

进行试探

广大前端类库(比如dojo与JQuery)在涉及dom操作时都会晤到两个模块:attr、prop。某天代码复查时,见到一段为某节点设置文本的代码:

JavaScript

attr.set(node, ‘innerText’, ‘Hello World!’)

1
attr.set(node, ‘innerText’, ‘Hello World!’)

那段代码执行后不曾生效,虽说innerText不是业内属性,尚未被ff协理,可用的是chrome,这一个特性是被支持的。既然突显的文件没变,那就翻开一下成分呢。
图片 1

innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本。

如上的这些小案例就关系到了DOM操作时平时被忽视的3个题材:天性与品质的界别

返本求源

在DOM中,特性指的是html标签上的习性,比如:

图片 2

Property是对此某一门类特征的叙述。可以那样敞亮,在DOM成分中得以经过点语法访问,又不是标准天性的都可以成为属性。

DOM中颇具的节点都落到实处了Node接口。Node接口是在DOM1级中定义的,其中定义了一些用来叙述DOM节点的质量和操作方法。

图片 3

大面积的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的特性。对于Node接口的切实落到实处者,HTMLElement不仅继续了这几个属性,还拥有多个wac规范中的七个正式性格:id、title、lang、dir、class和壹本性质:attributes。

每一个要素都有贰个或多少个特点,这几个特色的用途是付诸相应成分或其故事情节的叠加消息。通过DOM成分直接操作个性的的方法有多个:

那五个情势都足以操作自定义个性。唯独惟有公认的(非自定义)本性才会以属性的花样丰裕到DOM对象中,以属性形式操作那一个特色会被一起到html标签中。HTMLElement的多少个特色都有照应属性与其比较:id、title、lang、dir、className。在DOM中以属本性局操作那多少个特点会一起到html标签中。

唯独,HTML5业内对自定义本性做了进步,只要自定义天性以”data-attrName”的款式写入到html标签中,在DOM属性中就可以透过element.dataset.attrName的款型来访问自定义性格,如:

XHTML

<input type=​”text” name=​”as_q” class=​”box”
id=​”searched_content” title=​”在此输入搜索内容。” disabled=​”false”
data-ff=​”fsdf”>​ seh.dataset.ff

1
2
<input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​
seh.dataset.ff

要素的性状在DOM中以Attr类型来代表,Attr类型也落到实处了Node接口。Attr对象有几特个性:name、value、specified。其中,name是特色的名号,value是特点值,specified是三个布尔值,用来指示该天性是还是不是被明确设置。

document.createAttribute方法可以用来创设性情节点。例如,要为成分添加align天性可以接纳如下方法:

JavaScript

ar attr = document.createAttribute(‘align’) attr.value = ‘left’
seh.setAttributeNode(attr)

1
2
3
ar attr = document.createAttribute(‘align’)
attr.value = ‘left’
seh.setAttributeNode(attr)

要将新创造的表征添加到元素上,必须接纳要素的setAttributeNode方法。添加天性后,性子会反映在html标签上:

图片 4

注意,固然个性节点也完结了Node接口,但性情却不被认为是DOM文档树的一有个别。

在享有的DOM节点中attributes属性是Element类型所独有的的习性。从技术角度来说,个性就是存在于成分的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。成分的每贰个风味节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

拿到、设置、删除元素节点能够如下方式:

JavaScript

element.attributes.getNamedItem(‘align’) //获取 var attr =
document.createAttribute(‘align’); attr.value = ‘right’;
element.attributes.setNamedItem(attr); //添加
element.attributes.removeNamedItem(‘align’); //删除

1
2
3
4
5
6
7
element.attributes.getNamedItem(‘align’) //获取
 
var attr = document.createAttribute(‘align’);
attr.value = ‘right’;
element.attributes.setNamedItem(attr); //添加
 
element.attributes.removeNamedItem(‘align’); //删除

骨子里使用中并不提议采纳天性节点的不二法门,而getAttribute、setAttribute、removeAttribute方法远比操作性情节点更便民。

DOM、attributes、Attr三者关系应该如此画:

图片 5

行使总括

据悉上述DOM基础知识和实在工作经历,小编将特色和性质的不同联系计算如下:

  1. 品质以及公认性子可以经过点语法访问;html5正规中,data-*款式的自定义天性可以通过element.dataset.*的款型来做客,否则用getAttribute
  2. 特征值只可以是字符串,而属性值可以是任意JavaScript辅助的品种
  3. 几个例外性状:
    1. style,通过getAttrbute和setAttribute来操作那些天性只可以获取或安装字符串;而已属特性局来操作就是在操作CSSStyleDeclaration对象
    2. 事件处理程序,通过特征方式获取和传递的都只是函数字符串;而已属本性局操作的是函数对象
    3. value,对于协理value的要素,最好通过质量格局操作,而且操作不会反映在html标签上
    XHTML

    seh.value = 10 &lt;input type="text" name="as\_q" class="box"
    id="searched\_content" title="在此输入搜索内容。"
    disabled="false" data-ff="fsdf" align="left"&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d12396477911-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d12396477911-2">
    2
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d12396477911-1" class="crayon-line">
    seh.value = 10
    </div>
    <div id="crayon-5b8f379c97d12396477911-2" class="crayon-line crayon-striped-line">
    &lt;input type=&quot;text&quot; name=&quot;as_q&quot; class=&quot;box&quot; id=&quot;searched_content&quot; title=&quot;在此输入搜索内容。&quot; disabled=&quot;false&quot; data-ff=&quot;fsdf&quot; align=&quot;left&quot;&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

4.  href,通过属性方式设置可以反映到html标签上,但用过点语法和getAttribute能够取到的值并不一定相同


    XHTML

    &lt;a href="/jsref/prop\_checkbox\_tabindex.asp"
    id="tabI"&gt;tabIndex&lt;/a&gt; link.getAttribute('href') //
    "/jsref/prop\_checkbox\_tabindex.asp" link.href //
    "http://www.w3school.com.cn/jsref/prop\_checkbox\_tabindex.asp"

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d15903857159-1" class="crayon-line">
    &lt;a href=&quot;/jsref/prop_checkbox_tabindex.asp&quot; id=&quot;tabI&quot;&gt;tabIndex&lt;/a&gt;
    </div>
    <div id="crayon-5b8f379c97d15903857159-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d15903857159-3" class="crayon-line">
    link.getAttribute('href') // &quot;/jsref/prop_checkbox_tabindex.asp&quot;
    </div>
    <div id="crayon-5b8f379c97d15903857159-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d15903857159-5" class="crayon-line">
    link.href // &quot;http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp&quot;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

5.  disabled和checked,对于支持这两个特性的元素来说,他们在html标签中都是无状态的,只要有独立的标签属性在以点语法访问时就返回true,如果html标签属性不存在,则以点语法访问时就是false


    XHTML

    &lt;input type=​"text" name=​"as\_q" class=​"box"
    id=​"searched\_content" title=​"在此输入搜索内容。"
    disabled=​"false" data-ff=​"fsdf" align=​"left"&gt;​
    seh.disabled // true seh.disabled = false &lt;input type=​"text"
    name=​"as\_q" class=​"box" id=​"searched\_content"
    title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left"&gt;​

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d19172676562-1" class="crayon-line">
    &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; disabled=​&quot;false&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
    </div>
    <div id="crayon-5b8f379c97d19172676562-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d19172676562-3" class="crayon-line">
    seh.disabled // true
    </div>
    <div id="crayon-5b8f379c97d19172676562-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d19172676562-5" class="crayon-line">
    seh.disabled = false
    </div>
    <div id="crayon-5b8f379c97d19172676562-6" class="crayon-line crayon-striped-line">
    &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

1 赞 1 收藏
评论

图片 6

投石问路

  很多前端类库(比如dojo与JQuery)在论及dom操作时都会合到多个模块:attr、prop。某天代码复查时,见到一段为某节点设置文本的代码:

attr.set(node, 'innerText', 'Hello World!')

  那段代码执行后尚未生效,虽说innerText不是正统属性,尚未被ff辅助,可用的是chrome,那个天性是被匡助的。既然彰显的文书没变,那就翻开一下因素呢。

图片 7

  innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本。

  以上的那一个小案例就关乎到了DOM操作时日常被忽视的三个题材:性格与品质的界别

 

 

返本求源

    在DOM中,特性指的是html标签上的性子,比如:

  图片 8

  Property是对于某一类型特征的描述。可以如此领悟,在DOM成分中可以通过点语法访问,又不是明媒正娶本性的都得以改为属性。

  DOM中负有的节点都落到实处了Node接口。Node接口是在DOM1级中定义的,其中定义了一些用来讲述DOM节点的质量和操作方法。

  图片 9

  常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的本性。对于Node接口的求实贯彻者,HTMLElement不仅一而再了那个属性,还有着八个wac规范中的七个专业天性:id、title、lang、dir、class和多天性能:attributes。

   每2个因素都有三个或两个特点,那么些特点的用途是付诸相应成分或其内容的增大消息。通过DOM成分直接操作性情的的点子有三个:

  那三个法子都得以操作自定义本性。而是唯有公认的(非自定义)天性才会以属性的款式丰盛到DOM对象中,以属天性局操作这个特点会被联合到html标签中。HTMLElement的几本性状都有相应属性与其对待:id、title、lang、dir、className。在DOM中以属特性势操作这多少个个性会联合到html标签中。

  可是,HTML5正式对自定义天性做了拉长,只要自定义天性以”data-attrName”的款型写入到html标签中,在DOM属性中就足以经过element.dataset.attrName的方式来拜访自定义天性,如:

<input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​
seh.dataset.ff

  

  成分的特色在DOM中以Attr类型来表示,Attr类型也完结了Node接口。Attr对象有多个属性:name、value、specified。其中,name是特点的称号,value是特色值,specified是贰个布尔值,用来提示该特性是还是不是被肯定设置。

  document.createAttribute方法可以用来创造本性节点。例如,要为成分添加align天性可以利用如下方法:

ar attr = document.createAttribute('align')
attr.value = 'left'
seh.setAttributeNode(attr)

  要将新制造的特色添加到成分上,必须利用要素的setAttributeNode方法。添加天性后,个性会反映在html标签上:

图片 10

  注意,尽管性子节点也促成了Node接口,但特性却不被认为是DOM文档树的一有的。

 

  在所有的DOM节点中attributes属性是Element类型所独有的的属性。从技术角度来说,天性就是存在于成分的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。成分的每七个表征节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

  获取、设置、删除成分节点能够如下形式:

element.attributes.getNamedItem('align') //获取

var attr = document.createAttribute('align');
attr.value = 'right';
element.attributes.setNamedItem(attr); //添加

element.attributes.removeNamedItem('align'); //删除

  实际应用中并不提议利用特性节点的不二法门,而getAttribute、setAttribute、removeAttribute方法远比操作本性节点更便利。

  DOM、attributes、Attr三者关系应该那样画:

图片 11

 

 

使用总计

  基于以上DOM基础知识和事实上工作经验,小编将特色和属性的区分联系总括如下:

  1. 性子以及公认天性可以通过点语法访问;html5业内中,data-*花样的自定义天性可以因此element.dataset.*的形式来拜访,否则用getAttribute
  2. 特色值只可以是字符串,而属性值可以是任意JavaScript协理的门类
  3. 多少个新鲜性状:

    1. style,通过getAttrbute和setAttribute来操作那么些特点只好得到或安装字符串;而已属天性局来操作就是在操作CSSStyleDeclaration对象
    2. 事件处理程序,通过特色格局取得和传递的都只是函数字符串;而已属性形式操作的是函数对象
    3. value,对于帮助value的要素,最好通过质量格局操作,而且操作不会突显在html标签上

      seh.value = 10
      <input type="text" name="as_q" class="box" id="searched_content" title="在此输入搜索内容。" disabled="false" data-ff="fsdf" align="left">
      
    4. href,通过品质格局设置能够突显到html标签上,但用过点语法和getAttribute可以取到的值并不一定相同

      <a href="/jsref/prop_checkbox_tabindex.asp" id="tabI">tabIndex</a>
      
      link.getAttribute('href') // "/jsref/prop_checkbox_tabindex.asp"
      
      link.href // "http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp"
      
    5. disabled和checked,对于支撑那八本个性的要一贯说,他们在html标签中都以无状态的,只要有单独的标签属性在以点语法访问时就重临true,倘诺html标签属性不存在,则以点语法访问时就是false

    6. seh.disabled // true
      
        seh.disabled = false
        <input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left">​


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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图