www.301.net返本求源,从原型链看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,这几个性子是被帮衬的。既然展现的文本没变,那就翻开一下成分呢。
www.301.net 1

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

如上的这些小案例就关乎到了DOM操作时平日被忽略的两个题材:天性与特性的分别

返本求源

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

www.301.net 2

Property是对于某一品类特征的描述。能够这么敞亮,在DOM成分中能够通过点语法访问,又不是专业特性的都能够成为属性。

DOM中有着的节点都完毕了Node接口。Node接口是在DOM1级中定义的,当中定义了有的用来叙述DOM节点的属性和操作方法。

www.301.net 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标签上:

www.301.net 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三者关系应该如此画:

www.301.net 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 收藏
评论

www.301.net 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
www.301.net 7
www.301.net 8

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

 

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

Element节点实例有以下特点:以下特点均继续自Node.prototype

  那段代码执行后并未生效,虽说innerText不是行业内部属性,尚未被ff扶助,可用的是chrome,那几个本性是被帮衬的。既然呈现的文本没变,那就翻开一下成分呢。

  • nodeType值为1
  • nodeName值为元素标签名
  • nodeValue值为null
  • parentNode可能是Document或Element
  • 其子节点恐怕是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

www.301.net 9

要拜访成分标签名,能够用nodeName(继承自Node.prototype)属性也可用tagName(继承自Element.prototype)属性,那多个属性会再次回到相同的值。但注意重返的字符串是大写。在HTML中标签字始终以整个大写表示,而在XML中(有时也包蕴XHTML)标签名则始终会与源码中的保持一致。要是你不分明自身的脚本将会在HTML依然XML中履行,最棒在可比前面进行高低写转化。

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

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

  以上的那么些小案例就关乎到了DOM操作时常常被忽视的二个题材:本性与品质的不同

 

 

目录

 

  • HTML元素
  • 获得天性
  • 设置特色
  • attributes属性
  • 创造成分
  • 要素的子节点

返本求源

 

    在DOM中,本性指的是html标签上的质量,比如:

HTML元素

  www.301.net 10

HTML成分的各种标准个性(ele.attributes[index或’属性’]或ele.getAttributeNode(‘属性’)获得天性节点),能够拿走或改动。
(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” 

  Property是对此某一品种特征的讲述。能够如此敞亮,在DOM成分中得以通过点语法访问,又不是正统本性的都得以变成属性。

(3).title:继承自HTMLElement.prototype。有关因素的附加表达消息,一般经过工具提示条显示出来。
(4).lang:继承自HTMLElement.prototype。成分内容的语言代码, document.documentElement.lang;//
“zh-cn” 
(5).dir:继承自HTMLElement.prototype。语言的自由化,值为”ltr”(从左至右)或”rtl”(从右至左)。是明确语言内容的文书方向不是文字顺序颠倒。注意一点,应用dir=”rtl”后即使对文本全体是方向性的更动,但对标点符号和文书全体却做了颠倒。其实很好明白,那脾本性是规定语言的动向,从右向左读,句号肯定在读的逐条的末段也等于左侧。在换行的时候照旧从截断的文本全体偏向左侧。
www.301.net 11

  DOM中享有的节点都落实了Node接口。Node接口是在DOM1级中定义的,个中定义了一些用来描述DOM节点的性质和操作方法。

<div id="myID" class="bd" title="body" lang="en" dir="ltr">...</div>

  www.301.net 12

并不是对富有属性的改动都能直观在页面上显现出来。
对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集合是即时更新的,因而一旦它在那之中含有的目的发生转移的话,该指标会自动更新到新型情况。
www.301.net 13

  常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的质量。对于Node接口的求实完结者,HTMLElement不仅连续了这一个属性,还装有三个wac规范中的五个专业性格:id、title、lang、dir、class和贰特性质:attributes。

  • length:只读,再次来到映射(map)中目的的多寡。

   每2个成分都有3个或多少个特性,那些特征的用处是付出相应成分或其内容的增大消息。通过DOM成分直接操作个性的的形式有八个:

www.301.net 14

  • getAttribute(attrName)
  • setAttribute(attrName, value)
  • removeAttribute(name)
  • getNamedItem(str):重返四个加以名字对应的品质节点(Attr)
    www.301.net 15
  • setNamedItem(attr):替换或丰裕1特性质节点到映射map中,会一向反映到DOM中
    www.301.net 16
    www.301.net 17
  • removeNamedItem(str):移除二个本性节点,也会即时反映到文书档案的DOM树中
    www.301.net 18
  • item(idx):再次来到钦赐索引处的天性节点,当索引超出范围再次回到null
    www.301.net 19
  • getNamedItemNS():依据给定命名空间的参数和name重回多少个attr对象
  • setNamedItemNS():替换,添加给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

  那八个点子都得以操作自定义天性。但是唯有公认的(非自定义)性情才会以属性的样式丰硕到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

(1).每一个成分都有2个或多少个特点,那几个特色的用处是给相应成分或其情节附加新闻。元素继承自Element.prototype上的几本天性,它们的职能是操作天性(不是性质)的方法:

  

  • setAttribute(‘attr’,’value’)
  • getAttribute(‘attr’)
  • removeAttribute(‘attr’)

  元素的特征在DOM中以Attr类型来表示,Attr类型也兑现了Node接口。Attr对象有八个属性:name、value、specified。在那之中,name是特点的称号,value是特色值,specified是一个布尔值,用来提示该天性是不是被肯定设置。

那八个格局都可操作自定义天性,但只有公认的本性才能被使用以属性的款型丰裕到DOM对象中,以属性格局操作这个特色会被同台到html标签中。HTMLElement的多少个特色都有相应属性(意思是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访问。
www.301.net 20
(2).当然成分仍可以由此持续HTML某成分Element.prototype上的片段性质,比如input成分的HTMLInputElement.prototype上的disabled能够经过inputele.disabled取得或设置值。inputele.disabled;//
false表示该因素未被安装disabled属性即未被禁用,inputele.disabled=true;//
表示为该因素设置不可用属性。

  document.createAttribute方法能够用来创立天性节点。例如,要为成分添加align特性能够行使如下方法:

www.301.net 21

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

(3).HTML5专业对自定义性格做了进步,只要自定义特性以’data-attrName’情势写到html标签中(setAttribute或直接html代码存在均可),在DOM属性中就可经过ele.dataset.attrName方式拜访自定义脾气。
www.301.net 22

  要将新创立的特征添加到元素上,必须使用要素的setAttributeNode方法。添加个性后,性子会反映在html标签上:

dataset属性继自HTMLElement.prototype,它的值是DOMStringMap的实例集合,原型链继承关系为:ele.dataset.__proto__->DOMStringMap.prototype->Object.prototype。
www.301.net 23
(4).脾气名是不区分轻重缓急写的,getAttribute(‘id’)和getAttribute(‘ID’)都意味着同1个特色。
介绍多个分外的风味:它们固然有照应的属性名,但品质的值与经过getAttribute()重临的值并差异。style属性继承自HTMLElement.prototype,on事件处理属性持续自HTMLElement.prototype或Element.prototype。
(a).style:用于通过css为因素钦定样式。
经过getAttribute()访问回到的style特性值(在标签中定义的)中包含CSS文本
通过style属性访问回到3个CSSStyleDeclaration类型集合对象,由于style属性是用于以编制程序格局访问访问成分样式的之所以并不曾一贯照射到style性格。该css属性来自竹签中被安装的style天性。
www.301.net 24
并从未background性情值,能够见见不论通过哪些方式赢得的结果都唯有成分上style性情设置的性质才会现出。
经过style属性重临了1个CSSStyleDeclaration类型实例集合,原型链继承关系为:div.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype
www.301.net 25
得到的联谊中的属性只有已设置的才有值,别的的习性为空字符串纵然它们都有私下认可值。
www.301.net 26
简短学习下CSSStyleDeclaration接口:代表css键值对的汇集,它在一部分API中被采用

www.301.net 27

  • HTMLele.style 用于操作单个成分的体裁(<ele style=”…”>)
  • 在getComputedStyle中使用:CSSStyleDeclaration是window.getComputedStyle()重返的只读接口,在那之中每一个键都有值,或棉被服装置的值或默许的值。

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

ele.style.cssText:注解块的文书内容,修改这么些性情会直接将标签中的style特性内容改动。
ele.style.length:属性的多少即有具体值的css证明的多寡。window.getComputedStyle()再次来到值为262。
ele.style.parentRule:包含的CSSRule;
ele.style.getPropertyPriority(‘attr’):重临可选的优先级
ele.style.getPropertyValue(‘attr’):重返属性值
ele.style.item(idx):再次回到属性名,有实际的值的归来属性名,没有具体值的回来””
ele.style.removeProperty():删除的品质,会直接呈现到HTML文档夷则素style脾气节点。再次回到””
ele.style.setProperty(‘attr’,’value’,’priority’):设置属性,eg: document.body.style.setProperty(‘color’,’red’,’important’) 
(b).on事件性质:以onclick为例,在要素上使用时,onclick特性中含有的是JavaScript代码,但因而getAttribute()访问回到相应代码的字符串。在拜访onclick属性时会再次回到3个JavaScript函数(当onclick属性上不设有函数对象且未在要素标签中钦赐相应特性(为何说不是性质是因为借使在ele上尚未找到onclick属性那就去标签中找onclick特性值)再次来到null)。由于存在那些差别,在通过JavaScript以编制程序模式操作DOM时提议选择onclick属性值,唯有在获取自定义个性值的情状下才通过getAttribute()访问。
当三个因素标签中既有onclick天性,同时给ele.onclick钦定函数(那操作并不会潜移默化原本标签中onclick天性的值),则最后只执行ele.onclick属性的函数。
www.301.net 28
同时通过getAttribute访问仍赢得的是标签上的表征值,且尽管从前已经给onclick属性赋值了但控制台突显成分自己并不曾那本天性。小编不精通怎么document.body自己上会没有onclick属性,那当访问document.body.onclick时候去哪访问onclick的值,按着原型链吗?假使函数是在原型链上的onclick属性上也不应有啊HTMLElement.prototype.onclick=function(){console.log(2)}那样不就使那个办法成共享的了别的HTML元素实例都能访问,那眼看不实际因为大家只想为某一因素设置某事件函数。对于document.body自己上会没有onclick属性不亮堂是否JS引擎内部贯彻的,若是是那现实是怎么落到实处的?知道的盆友麻烦告知~

 

document.body.getAttribute('onclick');// "(function(){console.log(1)})()"
document.body.onclick;// function (){
  console.log(2)
}
document.body.hasOwnProperty('onclick');// false

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

(c).在<=IE7通过getAttribute()方法访问style天性和onclick那样的事件处理程序性情时,重返的值与天性的值相同。即getAttribute(‘style’)重临的不是字符串而是对象,getAttribute(‘onclick’)重临的不是字符串而是函数。纵然IE8已修复该bug但不一样版本的不一样性依然建议使用性质访问HTML天性。
一道面试题:下列关于IE,FF上边脚本的分别描述失实的是:感觉那道怪怪的考的是最初扶助情形??
A.innerText IE援救,FF不援助  FF早期不援救
B.document.createElement FF支持,IE不支持 X
C.setAttribute(‘class’,’styleclass’)FF扶助,IE不匡助   IE早期不匡助
D.用setAttribute设置事件FF不帮忙,IE帮衬 X
IE:all协助innerText  >IE8帮衬setAttribute设置特色或事件
FF:新本子支持,旧版本不援救outerHTML outerText
innerText;setAttribute支持

  • getNamedItem(name):重回天性名为name的性状节点
  • removeNamedItem(name):删除个性名为name的性剧情点
  • setNamedItem(attr):像成分中添加一个特色节点
  • item(pos):重回位于数组pos处的节点

设置特色

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

setAttribute(‘attr’,’value’):继承自Element.prototype。参数为要安装的性情名和值,固然性格已经存在,setAttribute()会以钦赐值替换现有值,假设天性不设有,setAttribute会创立该属性并设置相应值。
通过该方法能够操作HTML本性也足以操作自定义天性,通过那几个艺术设置的表征名会被合并更换为小写情势即”ID”转换为”id”。
因为拥有特性都是性质,所以间接给属性赋值就足以设置特色的值,但透过添加自定义属性并不会成为该因素的特征那样其实为因素自个儿添加了品质。

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

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

element.attributes.removeNamedItem('align'); //删除
document.body.id="test";
document.body.getAttribute('id');// "test"
document.body.hasOwnProperty('id');//false

document.body.myid="test";
document.body.getAttribute("myid");// null
document.body.hasOwnProperty('myid');//true

  实际利用中并不建议使用特性节点的措施,而getAttribute、setAttribute、removeAttribute方法远比操作天性节点更方便。

注:<=IE7中,setAtttribute()存在有的老大行为不但通过setAttribute()设置成分基本特点或事件性情没用而且通过点赋值法设置成分属性也不会反馈到成分标签中。即使到IE8才缓解这些bug,但照旧引进用点赋值法设置特色。
removeAttribute():继承自Element.prototype,能够彻底删除成分特性,不仅会消除天性值还会从要素中完全除去天性。该办法不常用,但在类别化DOM成分时,能够透过它来适合钦定要包蕴哪些特点。

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

attributes属性

www.301.net 29

Element类型是使用attributes属性的绝无仅有2个DOM节点类型,attributes属性继承自Element.prototype。它的值是NamedNodeMap类型实例,也是个动态集合,成分的各个表征都由2个Attr类型节点表示,各类节点都保存在NamedNodeMap对象中。

 

Object.getOwnPropertyNames(NamedNodeMap.prototype);//
["length", "item", "getNamedItem", "getNamedItemNS", 
"setNamedItem", "setNamedItemNS", "removeNamedItem", 
"removeNamedItemNS", "constructor"]

 

(1).getNamedItem(name):再次来到nodeName属性等于name的天性节点。

行使计算

document.body.attributes.getNamedItem("id");// id="test"
document.body.attributes[0].nodeName;// "id"

  基于以上DOM基础知识和实在工作经历,笔者将特色和属性的区别联系总括如下:

(2).removeNamedItem(name):从列表中移除nodeName等于name的节点。该格局与在要素上调用removeAttribute()方法效果同样,直接删除全数给定名称的天性节点。这二种艺术唯一的分别正是重回值,removeNamedItem再次来到被删去性格的Attr节点。

  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
      
attrMap.removeNamedItem('style');// style=​"overflow:​ hidden;​"
document.body.removeAttribute('class');// undefined
        seh.disabled = false
        <input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left">​


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

(3).setNamedItem(attrnode):向列表中添加属性节点,以节点的nodeName属性为索引。

var attr=document.createAttribute('class');
attr.value="as";
attr;// class=​"as"
document.body.attributes.setNamedItem(attr);
document.body.attributes;//NamedNodeMap {0: id, 1: style, 2: aria-hidden, 3: class, length: 4}

(4).item(pos):重返位于数字pos地点处的特点节点。 

document.body.attributes.item(3);// class=​"as"

attributes属性中含有一密密麻麻节点,假诺想要遍历成分本性attributes是个很好的选料。各类节点的nodeName值就是特点节点的称号,节点的nodeValue值正是特色的值。

document.body.attributes.getNamedItem("id").nodeValue;// "test"
document.body.attributes["id"].nodeValue;// "test"

安装特色的值:先获得性剧情点然后将其nodeValue设置为新值。
当你设置document.body.id=”test”时候JS引擎内部大概成功了之类操作

document.body.id="newid";

transAttr(document.body,'id');
function transAttr(ele,id){
var attrMap=ele.attributes;
for(var i in attrMap){
  if(attrMap.hasOwnProperty(i)){
        if(attrMap[i].nodeName=='id'){
             attrMap[i].nodeValue=ele.id;
       }
    }
 }
 delete document.body.id;
}

在须要将DOM结构体系化为XML或HTML字符串时,多数都会波及遍历成分本性。以下代码突显了什么样迭代成分的各种表征然后将它们协会成name=”value”那样的键值对方式

function outputAttributes(ele){
   var pairs=new Array(),
         attrName,attrValue,i,len;
   for(i=0;i<ele.attributes.length;i++){
       attrName=ele.attributes[i].nodeName;
       attrValue=ele.attributes[i].nodeValue;
       pairs.push(attrName+"=\""+attrValue+"\"");
   }
  return pairs.join(" ");
}
outputAttributes(document.body);// "id="cd" aria-hidden="true""

本条函数使用了三个数组来保存名值对,最终再以空格分隔符将它们拼接起来(那是连串化长字符串时的常用技巧)。

  • 本着attributes中的性格,分歧浏览器重临顺序不一样,那个特色在XML或HTML代码中冒出的先后顺序不必然与它们出现在attributes对象中的顺序一致。
  • <=IE7会重返HTML成分全部只怕天性,包罗没有点名的特点。针对IE7这一bug能够创新一下主次,每本性情节点都有一个specified(继承自Attr.prototype)的个性,specified=true证明要么是在HTML元素中钦点了对应特性要么通过setAttribute()方法设置了该天性。在<=IE7中不管有没有设置过某性情,某性格都有specified值,但棉被服装置过的值为true,全数未安装过的性情该属性都为false。在其余浏览器中不会为那类本性生成对应的特色节点(因而在那些浏览器中其它性情节点的specified值始终为true)

    当并没有为document.body设置特性节点class
    //<=IE7
    document.body.attributes["class"].specified;// false
    //IE10
    document.body.attributes["class"];// undefiend 
    

    改正后的代码为:

    function outputAttributes(ele){
       var pairs=new Array(),
             attrName,attrValue,i,len;
       for(i=0,len=ele.attributes.length;i<len&&ele.attributes[i].specified==true;i++){
           attrName=ele.attributes[i].nodeName;
           attrValue=ele.attributes[i].nodeValue;
           pairs.push(attrName+"=\""+attrValue+"\"")
       }
       return pairs.join(" ");
    }
    

     

 

始建成分

document.createElement():继承自Document.prototype,参数为标签名,这些标签名在HTML文书档案中不区分轻重缓急,在XML(包涵XHTML)文书档案中是分别轻重缓急写的。在使用document.createElement创立新因素的还要,也为新因素设置了ownerDocument(继承自Node.protoype)属性,此时还可操作成分的特点为它添加越来越多子节点以及实施此外操作。

var div=document.createElement('div');
div.id="myNewid";// "myNewid"
div.className="box";// "box"

在新成分上设置那个特色只是给它们赋予了相应信息,由于新因素尚未被添加到文书档案树中,因而设置这一个特色不会影响浏览器展现。要把新因素添加到文书档案树中,可利用appendChild(),insertBefore(),replaceChild()均三番五次自Node.prototype。一旦将元素添加到文书档案树,浏览器就会马上突显该因素。此后对这么些因素所做的别的改动都会实时反映在浏览器中。
在<=IE第88中学以另一种方法利用createElement,即为那么些措施传入完整的要素标签也得以分包属性,document.createElement(‘<div
id=”test”></div>’) 。这种措施拉动避开在IE7及更早版本中动态创建成分(document.createElement(‘div’)然后插入叫动态创立)的一些问题,以前存在以下那几个题材:

  • 不能够安装动态成立的<iframe>成分的name天性
  • 不可能经过表单的reset()方法重设动态创制的<input>成分。
  • 动态成立的type性情值为”reset”的<button>成分重设不了表单。
  • 动态创立的一批name相同的单选按钮相互毫非亲非故系,name值相同的一组单选按钮本来应该用于表示一致选项的两样值,但动态创设的一批这种单选按钮之间却不曾那种涉及。

上述全体失水准都可通过在createElement()中钦命完整的HTML标签来消除。

if(window.navigator.userAgent.search(/MSIE([^;]+)/)){
  //创建一个带name特性的iframe标签
 var iframe=document.createElement('<iframe name="myframe"></iframe>');
 //创建input元素
 var input=document.createElement('<input type="checkbox">');
 //创建button元素
 var button=document.createElement('<button type="reset"></button>')
;
 //创建一个单选按钮
 var radio1=document.createElement('<input type="radio" name="choice" value="one">');
 var radio2=document.createElement('<inpur type="radio" name="choice" value="two">');
}

 

 

要素的子节点

要素的childNodes属性(继承自Node.prototype)包罗了它全数子节点,那几个子节点大概是因素,文本节点,注释,处理指令。差别浏览器在看待这一个节点方面存在不相同。

<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

IE:
IE9~11
www.301.net 30
IE5~8
www.301.net 31

Chrome46.0.2490.80:
www.301.net 32
FF44.0.2 :
www.301.net 33
若是必要通过childNodes属性遍历子节点,经常要先检查一下当前节点的nodeType属性。

var ul=document.getElementById('myList');
for(var i=0;i<ul.childNodes.length;i++){
    if(ul.childNodes[i].nodeType==1){
         //do else
    }
}

若果想透过标签名获得子节点或后代节点,成分也协助getElementsByTagName()(继承自Element.prototype),重临HTMLCollection类型实例集合是回到当前因素的后人(假若有多层嵌套的话归纳子成分和子成分的后生)。document.getElementsByTagName()是持续自Document.prototype。

参考

《JavaScript高级程序设计》
反本求源——DOM成分的特色与品质 MDN NamedNodeMap MDN
CSSStyleDeclaration 

Post Author: admin

发表评论

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