澳门金莎娱乐手机版 Web前端 见到一段为某节点设置文本的代码,某节点元素.澳门金莎娱乐手机版

见到一段为某节点设置文本的代码,某节点元素.澳门金莎娱乐手机版



返本求源——DOM成分的特点与特性

2015/09/06 · HTML5,
JavaScript ·
DOM

原著出处: 木的树   

引玉之砖

无数前端类库(比如dojo与JQuery卡塔 尔(英语:State of Qatar)在论及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)

那四个法子都得以操作自定义性子。而是独有公众承认的(非自定义卡塔 尔(英语:State of Qatar)天性才会以属性的款式丰盛到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卡塔 尔(英语: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”(从右至左卡塔 尔(英语: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’)(推荐卡塔 尔(英语:State of Qatar)或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性格值(在标签中定义的卡塔 尔(英语:State of Qatar)中包含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类型实例群集是重临当前成分的遗族(若是有多层嵌套的话归纳子成分和子成分的子孙卡塔 尔(英语:State of Qatar)。document.getElementsByTagName()是世襲自Document.prototype。

参考

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

标签:

发表评论

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

相关文章

网站地图xml地图