返本求源——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等卡塔 尔(英语:State of Qatar)都归属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卡塔 尔(英语:State of Qatar)属性也可用tagName(世袭自Element.prototype卡塔尔国属性,这三个属性会重返相像的值。但注意再次回到的字符串是大写。在HTML中标具名始终以全部大写表示,而在XML中(有的时候也囊括XHTML卡塔 尔(英语:State of Qatar)标具名则始终会与源码中的保持黄金时代致。假设你不明显本身的本子将会在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上的多少个属性,它们的功用是操作性格(不是性质卡塔 尔(阿拉伯语:قطر‎的方法:

  • 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代码存在均可卡塔 尔(英语:State of Qatar),在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=”…”>卡塔 尔(阿拉伯语:قطر‎
  • 在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卡塔 尔(阿拉伯语:قطر‎的习性,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类型实例集合是回到当前成分的后裔(假使有多层嵌套的话归纳子成分和子成分的遗族卡塔尔国。document.getElementsByTagName()是后续自Document.prototype。

参考

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

相关文章