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

返本求源——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,那些特性是被补助的。既然展现的公文没变,这就翻开一下要素呢。
金沙js333娱乐场 1

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

上述的这一个小案例就涉及到了DOM操作时日常被忽略的一个题目:特性与品质的分别

返本求源

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

金沙js333娱乐场 2

Property是对此某一品种特征的讲述。能够这么明白,在DOM元素中得以因而点语法访问,又不是正规个性的都能够成为属性。

DOM中有所的节点都完结了Node接口。Node接口是在DOM一级中定义的,当中定义了部分用来叙述DOM节点的性质和操作方法。

金沙js333娱乐场 3

广大的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的性子。对于Node接口的有血有肉落到实处者,HTMLElement不仅继承了那些属性,还富有多个wac规范中的几个规范本性:id、title、lang、dir、class和一天性质:attributes。

各个因素都有2个或四个特点,这个特点的用处是交给相应成分或其剧情的增大音讯。通过DOM元素直接操作特性的的点子有多个:

  • getAttribute(attrName)
  • 金沙js333娱乐场,setAttribute(attrName, value)
  • removeAttribute(name)

那八个方法都能够操作自定义天性。不过只有公认的(非自定义)性格才会以属性的方式丰富到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标签上:

金沙js333娱乐场 4

留意,固然个性节点也落到实处了Node接口,但天性却不被认为是DOM文书档案树的一片段。

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

  • getNamedItem(name):再次来到本性名字为name的特征节点
  • removeNamedItem(name):删除本性名称叫name的特色节点
  • setNamedItem(attr):像成分中添加3个特色节点
  • item(pos):再次来到位于数组pos处的节点

获得、设置、删除成分节点能够如下格局:

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三者关系应该这么画:

金沙js333娱乐场 5

运用总计

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

  1. 本性以及公认性子能够因而点语法访问;html五号正楷字规中,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 收藏
评论

金沙js333娱乐场 6

抛砖引玉

要暮秋点

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

  成分节点正是HTML标签元素,成分节点首要提供了对成分标签名、子节点及质量的拜会;

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

  成分节点的八个node属性:nodeType:一、nodeName/TagName:成分的价签名大写、nodeValue:null;

  那段代码执行后不曾生效,虽说innerText不是正规属性,尚未被ff匡助,可用的是chrome,那特性情是被帮助的。既然突显的文件没变,那就翻开一下成分呢。

  其父节点 parentNode 指向包罗该因三秋点的因初秋点 Element 或文书档案节点
Document;

金沙js333娱乐场 7

  成分的 childNodes
属性中蕴藏了它的全体子节点,那么些子节点大概是因素、文本、注释、处理指上巳点;

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

  childNodes 结合 NodeType 能够检查有多少个成分子节点:

  以上的那一个小案例就涉嫌到了DOM操作时平日被忽视的三个标题:性情与品质的分化

   <ul class="list" id="list">
      <li class="in"></li>
      <li class="in"></li>
    </ul>
    <script>
      var oList = document.getElementById('list');
      var children = oList.childNodes;
      var num = 0;
      for(var i = 0; i < children.length; i++){
        if(children[i].nodeType == 1){
          num++;
        }
      }
      console.log(num);//2  有2个元素子节点  
    </script>

 

  操作属性的点子首要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()几个,能够针对任何性质使用,包涵那3个以HTMLElement类型属性的格局定义的习性;

 

  • obj.hasAttribute(attr)方法再次回到叁个布尔值,表示最近因高商点是不是带有钦定属性;
  • IE6/IE7不支持 hasAttribute() 方法;
  • obj.hasAttribute(attr)检查测试 class 属性时,间接用 class
    就足以了,不要用className;
  • obj.hasAttribute(attr)检验 for属性时,直接用
    for就足以了,不要用htmlFor;

返本求源

 <div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //IE6/IE7不支持hasAttribute方法
      console.log(oTest.hasAttribute('class'));//true
      console.log(oTest.hasAttribute('className'));//false  
      console.log(oTest.hasAttribute('id'));//true
      console.log(oTest.hasAttribute('style'));//true
      console.log(oTest.hasAttribute('for'));//true
      console.log(oTest.hasAttribute('htmlFor'));//false
    </script>

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

  • obj.getAttribute(attr)方法用于获取属性的值,假若给定称号的习性不存在或无参数则赶回null;
  • obj.getAttribute(attr)获取 class 时,直接用 class
    就可以了;IE6/IE柒除了这些之外,IE6/IE7的 getAttribute(attr) 方法要用
    className;
  • obj.getAttribute(attr)获取 for时,直接用 for就足以了;
  • obj.setAttribute(attr,value)方法接受四个参数:要设置的属性名和值,借使已经存在,则替换现有的值。假使属性不设有,则开创该属性并安装相应的值。该办法无重临值;
  • obj.setAttribute(attr,value)设置 class 时,直接用 class 就能够了;
  • obj.setAttribute(attr,value)设置 for 时,直接用 for 就能够了;
  • obj.setAttribute(attr,value)设置 style 时,直接用 style 就能够了;在
    IE7及以下,用 obj.style.setAttribute(“cssText”,value);  那里的 style
    只是行间样式;
  • 大家壹般用 obj.currentStyle ? obj.currentStyle[attr] :
    getComputedStyle(obj)[attr]; 来获取成分当前体制;

  金沙js333娱乐场 8

 <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了
      oTest.setAttribute('className','bbb');
      console.log(oTest.class);//undefined IE8及以下会报错缺少标识符
      console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了
      console.log(oTest.className);//aaa
      console.log(oTest.getAttribute('className'));//bbb
      oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了
      console.log(oTest.style);//所有的style设置,包括你没有设置的,太多了,肯定不是你想要的
      console.log(oTest.getAttribute('style'));
      //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了
      oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了
      oTest.setAttribute('htmlFor','fff')
      console.log(oTest.for);//undefined  IE8及以下会报错缺少标识符
      console.log(oTest.htmlFor);//undefined
      console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了
      console.log(oTest.getAttribute('htmlFor'));//fff
      console.log(oTest);
      //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
    </script>

  Property是对此某一品类特征的讲述。能够这么驾驭,在DOM成分中得以因而点语法访问,又不是正规本性的都能够成为属性。

  • obj.removeAttribute(attr)方法用于彻底剔除成分的习性,这一个法子不仅会干净删除元素的属性值,还会删除成分属性。该方式无再次来到值;

  DOM中拥有的节点都落到实处了Node接口。Node接口是在DOM一级中定义的,其中定义了一部分用来叙述DOM节点的属性和操作方法。

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.removeAttribute('class'); //removeAttribute直接用class就可以了
      oTest.removeAttribute('for');
      oTest.removeAttribute('style'); 
      console.log(oTest);// <div id="test">123</div>
    </script>

发表评论

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