>

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

- 编辑:乐百家599手机首页 -

返本求源——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,这特本性是被扶助的。既然显示的文本没变,那就翻开一下要素呢。
乐百家前段 1

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

以上的那几个小案例就提到到了DOM操作时常常被忽略的二个难点:特性与品质的分别

返本求源

在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成分直接操作性格的的方法有七个:

  • getAttribute(attrName)
  • 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标签上:

乐百家前段 4

留神,尽管性情节点也兑现了Node接口,但性子却不被感到是DOM文书档案树的一片段。

在享有的DOM节点中attributes属性是Element类型所独有的的性质。从手艺角度来讲,本性正是存在于成分的attributes属性中的节点。attributes属性归属NamedNodeMap类型的实例。成分的每五个风味节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥犹如下方法:

  • getNamedItem(name):返回本性名称为name的风味节点
  • removeNamedItem(name):删除天性名字为name的特征节点
  • setNamedItem(attr):像成分中增添一个风味节点
  • 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三者关系应该这么画:

乐百家前段 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

Element类型用于表现XML或HTML成分,提供对成分标签名,子节点及特点的拜谒。原型链的持续关系为 某节点成分.__proto__->(HTML某元素Element.prototype)->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype。
以HTML成分为例:document.documentElement.__proto__->HTMLHtmlElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype
乐百家前段 7
乐百家前段 8

要金秋点

 

  成分节点正是HTML标签成分,成分节点重要提供了对成分标签字、子节点及质量的拜访;

Element节点实例有以下特点:以下特点均一而再连续自Node.prototype

  成分节点的四个node属性:nodeType:1、nodeName/TagName:元素的标具名大写、nodeValue:null;

  • nodeType值为1
  • nodeName值为成分标具名
  • nodeValue值为null
  • parentNode可能是Document或Element
  • 其子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

  其父节点 parentNode 指向蕴涵该因凉秋点的因早秋点 Element 或文书档案节点 Document;

要访谈元素标签字,能够用nodeName(继承自Node.prototype卡塔尔属性也可用tagName(继承自Element.prototype卡塔尔属性,那三个属性会重返相近的值。但只顾重回的字符串是大写。在HTML中标签名始终以任何大写表示,而在XML中(一时也席卷XHTML卡塔 尔(阿拉伯语:قطر‎标签字则始终会与源码中的保持生机勃勃致。借令你不明确本人的台本将会在HTML依旧XML中试行,最佳在相比较前边开展高低写转化。

  元素的 childNodes 属性中包涵了它的全部子节点,那几个子节点大概是因素、文本、注释、管理指上除点;

document.documentElement.tagName;// "HTML"
document.documentElement.nodeName;// "HTML"
document.documentElement.nodeName.toLowerCase();// "html"

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

 

   <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()三个,能够本着任何性质使用,包蕴那多少个以HTMLElement类型属性的花样定义的属性;

  • HTML元素
  • 收获特性
  • 设置特色
  • attributes属性
  • 开创成分
  • 要素的子节点
  • 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>

HTML元素

  • obj.getAttribute(attr)方法用于获取属性的值,如若给定称号的习性海市蜃楼或无参数则赶回null;
  • obj.getAttribute(attr)获取 class 时,直接用 class 就足以了;IE6/IE7除此而外,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]; 来获取成分当前体制;

HTML成分的四种规范特性(ele.attributes[index或'属性']或ele.getAttributeNode('属性')获得性情节点卡塔 尔(英语:State of Qatar),能够博得或改进。
(1).id:世襲自Element.prototype,成分在文书档案中唯少年老成的标志符。 document.body.id;// "Posts" 
(2).className:世袭自Element.prototype,与元素的class天性对应,即为成分钦命的css类。未有将这性格情命名叫class,是因为class是ECMAScript的保留字。 document.forms[0].getElementsByTagName('div')[0].className;// "aspNetHidden" 

 <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>

(3).title:世襲自HTMLElement.prototype。有关因素的叠合表明音讯,平时通过工具提醒条展现出来。
(4).lang:世襲自HTMLElement.prototype。成分内容的语言代码, document.documentElement.lang;// "zh-cn" 
(5).dir:世袭自HTMLElement.prototype。语言的大势,值为"ltr"(从左至右卡塔尔国或"rtl"(从右至左卡塔 尔(阿拉伯语:قطر‎。是规定语言内容的文书方向不是文字顺序颠倒。注意一点,应用dir="rtl"后就算对文件全体是方向性的变动,但对标点符号和文书全体却做了颠倒。其实很好精晓,那特性格是明显语言的趋向,从右向左读,句号确定在读的顺序的尾声也正是左边手。在换行的时候仍然从截断的文件全部趋向侧边。
乐百家前段 9

  • obj.removeAttribute(attr)方法用于透彻删除成分的性质,这一个法子不仅仅会干净去除成分的属性值,还有也许会删除成分属性。该形式无重临值;
<div id="myID" class="bd" title="body" lang="en" dir="ltr">...</div>
<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>

实际不是对全部属性的更正都能直观在页面上海展览中心现出来。
对id或lang的修正对客户来说是晶莹剔透不可知的;
对title的修改只会在鼠标移动到这一个成分上时才显得出来;
对dir的矫正会在性质被重写的那一刻登时影响页面普通话本左右对齐情势;
修改className时,如若新类关联了与早先不一样的CSS样式那么就能够立即利用该样式;
关于领会全体HTML成分以致与之提到的原型类型的构造器可参谋高程三P263,有的成分是生龙活虎间接轨自HTMLElement.prototype比方b成分,有的是世襲自HTML某成分Element.prototype,比方a元素,它的原型属性指向HTMLAnchorElement.prototype。
(6).attributes:世袭自Element.prototype。重临三个NamedNodeMap的实例对象。
这里增加领会一下NamedNodeMap接口,原型链世襲关系为:ele.attributes.__proto__乐百家前段,->NamedNodeMap.prototype->Object.prototype。NamedNodeMap接口表示属性节点目的的聚合,尽管NamedNodeMap里面包车型客车指标足以像数组同样通过索引举行访谈但它和NodeList分裂样,对象的相继未有一点名。NamedNodeMap集合是即时更新的,因而意气风发旦它此中含有的靶子发生改变的话,该指标会自动更新到新型状态。
乐百家前段 10

属性节点

  • length:只读,再次回到映射(map)中指标的数量。

  属性节点,有的叫个性节点,大约一个情趣;

乐百家前段 11

  属性节点的多少个node属性,nodeType:2、nodeName/name:属性名称、nodeValue/value:属性值;

  • getNamedItem(str):重返叁个加以名字对应的习性节点(Attr卡塔 尔(英语:State of Qatar)
    乐百家前段 12
  • setNamedItem(attr):替换或加多二日性质节点到映射map中,会直接展现到DOM中
    乐百家前段 13
    乐百家前段 14
  • removeNamedItem(str):移除壹特性质节点,也会即时反映到文书档案的DOM树中
    乐百家前段 15
  • item(idx):重回内定索引处的属性节点,当索引超过范围再次回到null
    乐百家前段 16
  • getNamedItemNS():遵照给定命名空间的参数和name重返叁个attr对象
  • setNamedItemNS():替换,增添给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

  属性节点还或然有二个 specified 属性,specified 是三个布尔值,用以不同特性是在代码中钦定的,依旧私下认可的。那脾性子的值假使为true,则表示在HTML中钦命了相应特性,可能是通过 setAttribute() 方法设置了该属性。在IE中,全体未安装过的特征的该属性值都为false,而在别的浏览器中,全部安装过的本性的该属性值都是true,未安装过的特色,假使强行为其设置 specified 属性,则报错。

 

  成分节点有贰个 attributes 属性,它富含四个NamedNodeMap,包蕴当前成分全数的天性及属性值,与NodeList相近,也是叁个动态的聚合。成分的每叁个属性都由三个Attr节点表示,每种节点都保存在NamedNodeMap对象中,每一个节点的 nodeName 就是性质的名号,节点的 nodeValue 正是性质的值;

得到特性

  createAttribute(attr) 创造新的属性节点;

(1).种种成分都有一个或八个特色,这几个特点的用项是给相应元素或其内容附加音讯。成分世袭自Element.prototype上的四个属性,它们的魔法是操作性情(不是性质卡塔 尔(阿拉伯语:قطر‎的方法:

  attributes属性包蕴以下四个法子:

  • setAttribute('attr','value')
  • getAttribute('attr')
  • removeAttribute('attr')
  1. obj.attributes.setNamedItem(attr);  向列表中增添节点,该方法无重临值;要先成立属性,在以nodeValue的花样赋属性值,在传出setNamedItem
  2. obj.attributes.getNamedItem(attr);  重返 nodeName 属性等于 attr 的节点;以" attr=value " 情势重临;
  3. obj.attributes.removeNamedItem(attr); 从列表中移除 nodeName 属性等于 attr 的节点,并赶回该节点;
  4. obj.attributes.item(index); 重临位于下标 index 地点处的节点,也足以用[]代替, obj.attributes[index];

那多个章程都可操作自定义天性,但唯有公众以为的表征工夫被采用以属性的款式增多到DOM对象中,以属性情势操作这一个特点会被意气风发并到html标签中。HTMLElement的5个特点都有相应属性(意思是Element.prototype或HTMLElement.prototype上的属性可径直通过.方式探望)与其对应:id,title,lang,dir,className。在DOM中以属性格局操作那多少个特征会协同到html标签中。因为class性格是那5种特色之后生可畏,能够通过className属性访谈,xsf天性不在Element.prototype或HTMLElement.prototype对象中有对应属性所以经过品质访谈情势赢得的值为undefiend。要想访谈xsf特性值可以透过getAttribute('xsf')(推荐卡塔尔国或getAttributeNode('xsf').value或attributes["xsf"].value访问。
乐百家前段 17
(2).当然元素还能够由此持续HTML某成分Element.prototype上的一些性质,举例input成分的HTMLInputElement.prototype上的disabled能够经过inputele.disabled得到或设置值。inputele.disabled;// false表示该因素未棉被服装置disabled属性即未被禁止使用,inputele.disabled=true;// 表示为该因素设置不可用属性。

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(oTest.attributes.item(1).specified);//true
      console.log(oTest.attributes.getNamedItem('id'));//id='test'
      console.log(typeof oTest.attributes.getNamedItem('id'));//object
      console.log(oTest.attributes.removeNamedItem('for'));//id='test'
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3}
      var abc = document.createAttribute("abc"); 
      abc.nodeValue = "1234567";
      oTest.attributes.setNamedItem(abc);
      //obj.attributes.setNamedItem(attr) 要先创建属性,在以nodeValue的形式赋属性值,在传入setNamedItem
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4}
      console.log(oTest.attributes.item(1));//id='test'
      console.log(oTest.attributes[1]);//id='test'
    </script>

乐百家前段 18

  attributes属性首要用于属性遍历。在须要将DOM结构类别化为HTML字符串时,许多都会波及遍历成分天性

本文由乐百家前段发布,转载请注明来源:返本求源——DOM成分的性状与品质