图片 28

从原型链看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

 

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

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

要访谈成分标签名,能够用nodeName(世袭自Node.prototype卡塔 尔(阿拉伯语:قطر‎属性也可用tagName(世袭自Element.prototype卡塔尔国属性,那多少个属性会重回相符的值。但只顾再次回到的字符串是大写。在HTML中标具名始终以全部大写表示,而在XML中(有时也席卷XHTML卡塔尔国标具名则始终会与源码中的保持意气风发致。借令你不鲜明本人的台本将会在HTML依然XML中施行,最棒在比较前边进行高低写转变。

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

 

目录

  • HTML元素
  • 赢得个性
  • 设置特色
  • attributes属性
  • 开创成分
  • 要素的子节点

 

HTML元素

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” 

(3).title:世袭自HTMLElement.prototype。有关因素的附加表明音信,平时通过工具提醒条彰显出来。
(4).lang:世袭自HTMLElement.prototype。成分内容的言语代码, document.documentElement.lang;//
“zh-cn” 
(5).dir:世襲自HTMLElement.prototype。语言的动向,值为”ltr”(从左至右卡塔尔或”rtl”(从右至左卡塔 尔(阿拉伯语:قطر‎。是明确语言内容的公文方向不是文字顺序颠倒。注意一点,应用dir=”rtl”后虽说对文本全体是方向性的更换,但对标点符号和文件全部却做了颠倒。其实很好驾驭,这本性子是明确语言的取向,从右向左读,句号肯定在读的次第的末梢也便是左侧。在换行的时候还是从截断的公文全部偏向左边。
图片 9

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

并不是对富有属性的改善都能直观在页面上海展览中心现出来。
对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

  • getNamedItem(str):重返三个加以名字对应的习性节点(Attr卡塔尔国
    图片 12
  • setNamedItem(attr):替换或抬高中二年级特性能节点到映射map中,会一贯反映到DOM中
    图片 13
    图片 14
  • removeNamedItem(str):移除五特质量节点,也会即时反映到文书档案的DOM树中
    图片 15
  • item(idx):再次回到钦点索引处的属性节点,当索引超过范围重临null
    图片 16
  • getNamedItemNS():依照给定命名空间的参数和name再次来到二个attr对象
  • setNamedItemNS():替换,加多给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

 

赢得性情

(1).每一种成分都有叁个或几个特点,这一个特色的用途是给相应成分或其内容附加消息。成分世襲自Element.prototype上的六个性情,它们的效劳是操作天性(不是性质卡塔 尔(英语:State of Qatar)的方法:

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

那七个主意都可操作自定义性子,但唯有公众认同的天性本事被利用以属性的款型足够到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;//
表示为该因素设置不可用属性。

图片 18

(3).HTML5正规对自定义性情做了进步,只要自定义脾气以’data-attrName’格局写到html标签中(setAttribute或直接html代码存在均可卡塔 尔(阿拉伯语:قطر‎,在DOM属性中就可因此ele.dataset.attrName方式拜见自定义性情。
图片 19

dataset属性继自HTMLElement.prototype,它的值是DOMStringMap的实例集结,原型链世袭关系为:ele.dataset.__proto__->DOMStringMap.prototype->Object.prototype。
图片 20
(4).天性名是不区分抑扬顿挫写的,getAttribute(‘id’)和getAttribute(‘ID’)都代表同一个特点。
介绍五个独特的性状:它们尽管有相应的属性名,但品质的值与经过getAttribute()再次来到的值并不相近。style属性继承自HTMLElement.prototype,on事件管理属性持续自HTMLElement.prototype或Element.prototype。
(a).style:用于通过css为因素钦定样式。
通过getAttribute()访问回到的style脾性值(在标签中定义的卡塔尔国中包含CSS文本
由此style属性访问回到八个CSSStyleDeclaration类型集结对象,由于style属性是用来以编制程序格局访谈访谈成分样式的之所以并从未向来照射到style个性。该css属性来自竹签中被安装的style天性。
图片 21
并从未background天性值,能够看出无论通过哪个格局获得的结果都唯有成分上style性情设置的天性才会产出。
通过style属性重返了一个CSSStyleDeclaration类型实例集结,原型链继承关系为:div.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype
图片 22
赢得的相会中的属性独有已设置的才有值,其他的习性为空字符串尽管它们都有默许值。
图片 23
轻易学习下CSSStyleDeclaration接口:代表css键值对的联谊,它在局地API中被接受

  • HTMLele.style 用于操作单个成分的样式(<ele style=”…”>卡塔 尔(英语:State of Qatar)
  • 在getComputedStyle中采纳:CSSStyleDeclaration是window.getComputedStyle()重临的只读接口,当中种种键都有值,或棉被服装置的值或私下认可的值。

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属性时会重临三个JavaScript函数(当onclick属性上不设有函数对象且未在要素标签中钦命相应特性(为啥说不是性质是因为风度翩翩旦在ele上从未有过找到onclick属性那就去标签中找onclick本性值)再次回到null卡塔尔。由于存在这里些出入,在经过JavaScript以编制程序形式操作DOM时建议选拔onclick属性值,独有在获得自定义天性值的情状下才通过getAttribute()访谈。
当叁个因素标签中既有onclick性子,同一时间给ele.onclick钦定函数(那操作并不会影响原来标签中onclick特性的值卡塔 尔(英语:State of Qatar),则最后只奉行ele.onclick属性的函数。
图片 24
而且经过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

(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支持

安装特色

setAttribute(‘attr’,’value’):世襲自Element.prototype。参数为要设置的个性名和值,假设脾性已经存在,setAttribute()会以内定值替换现存值,倘使性情不设有,setAttribute会创制该属性并安装相应值。
通过该办法能够操作HTML天性也足以操作自定义性子,通过这么些艺术设置的风味名会被统后生可畏更动为小写方式即”ID”调换为”id”。
因为全部本性都是性质,所以一向给属性赋值就可以安装特色的值,但由此足够自定义属性并不会成为该因素的特征那样实在为要素本人增添了质量。

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

注:<=IE7中,setAtttribute()存在一些十一分行为不但通过setAttribute()设置成分基本特点或事件性情没用并且经过点赋值法设置成分属性也不会反射到成分标签中。就算到IE8才解除这几个bug,但还是引入用点赋值法设置特色。
removeAttribute():世袭自Element.prototype,可以通透到底去除成分个性,不唯有会免去天性值还或许会从要素中完全除去个性。该办法一时用,但在类别化DOM成分时,能够经过它来符合钦点要包罗怎么样特色。

attributes属性

Element类型是使用attributes属性的唯后生可畏三个DOM节点类型,attributes属性世袭自Element.prototype。它的值是NamedNodeMap类型实例,也是个动态集合,成分的每二个表征都由叁个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"

(2).removeNamedItem(name):从列表中移除nodeName等于name的节点。该情势与在要素上调用removeAttribute()方法效果一样,直接删除全数给定名称的特色节点。那二种办法唯大器晚成的分别就是再次来到值,removeNamedItem重临被去除性子的Attr节点。

attrMap.removeNamedItem('style');// style=​"overflow:​ hidden;​"
document.body.removeAttribute('class');// undefined

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

本条函数使用了八个数组来保存名值对,最终再以空格分隔符将它们拼接起来(那是连串化长字符串时的常用手艺卡塔 尔(英语:State of Qatar)。

  • 本着attributes中的本性,不一样浏览器再次来到顺序分歧,那一个特点在XML或HTML代码中冒出的前后相继顺序不显著与它们出以后attributes对象中的顺序黄金年代致。
  • <=IE7会回来HTML成分全部望性格,包涵未有一点点名的风味。针对IE7那大器晚成bug能够改善一下主次,每一个特性节点都有四个specified(继承自Attr.prototype卡塔 尔(英语:State of Qatar)的性格,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
图片 25
IE5~8
图片 26

Chrome46.0.2490.80:
图片 27
FF44.0.2 :
图片 28
假定急需经过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类型实例会集是回到当前因素的后裔(假若有多层嵌套的话总结子成分和子成分的遗族卡塔 尔(英语:State of Qatar)。document.getElementsByTagName()是持续自Document.prototype。

参考

《JavaScript高端程序设计》
反本求源——DOM成分的性状与脾性 MDN NamedNodeMap MDN
CSSStyleDeclaration 

发表评论

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