从原型链看DOM,返本求源

时间:2019-11-28 05:41来源:亚洲城ca88唯一官方网站
返本求源——DOM成分的特征与脾气 2015/09/06 · HTML5,JavaScript ·DOM 初藳出处: 木的树    一得之见 比较多前端类库(比如dojo与JQuery卡塔 尔(阿拉伯语:قطر‎在提到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"(从右至左卡塔 尔(英语:State of Qatar)。是鲜明语言内容的文件方向不是文字顺序颠倒。注意一点,应用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代码存在均可卡塔尔国,在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性情的值卡塔 尔(阿拉伯语:قطر‎,则最终只实行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卡塔 尔(英语:State of Qatar),再次回到HTMLCollection类型实例群集是回来当前因素的儿孙(如若有多层嵌套的话总结子成分和子成分的后代卡塔 尔(阿拉伯语:قطر‎。document.getElementsByTagName()是一连自Document.prototype。

参考

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

编辑:亚洲城ca88唯一官方网站 本文来源:从原型链看DOM,返本求源

关键词: 亚洲城ca88