返本求源,从原型链看DOM

返本求源,从原型链看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,这一个天性是被扶助的。既然呈现的文书没变,那就翻开一下要素呢。
皇家88平台登录 1

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

上述的那个小案例就涉及到了DOM操作时日常被忽略的3个标题:天性与特性的区分

返本求源

在DOM中,天性指的是html标签上的特性,比如:

皇家88平台登录 2

Property是对此某一项目特征的叙说。可以如此明白,在DOM成分中能够透过点语法访问,又不是规范性格的都得以改为属性。

DOM中颇具的节点都落到实处了Node接口。Node接口是在DOM1级中定义的,个中定义了部分用来讲述DOM节点的性质和操作方法。

皇家88平台登录 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是3个布尔值,用来指示该天性是不是被肯定设置。

皇家88平台登录 ,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标签上:

皇家88平台登录 4

小心,就算性子节点也完成了Node接口,但天性却不被认为是DOM文书档案树的一有的。

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

  • getNamedItem(name):再次来到性格名为name的特征节点
  • removeNamedItem(name):删除性格名为name的特色节点
  • setNamedItem(attr):像成分中添加1个性格节点
  • 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三者关系应该那样画:

皇家88平台登录 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 收藏
评论

皇家88平台登录 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
皇家88平台登录 7
皇家88平台登录 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

皇家88平台登录 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元素

  皇家88平台登录 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”后就算对文件全体是方向性的变动,但对标点符号和文件全体却做了颠倒。其实很好了解,这么些天性是显著语言的来头,从右向左读,句号肯定在读的顺序的结尾也正是左手。在换行的时候照旧从截断的文件全部偏向右边。
皇家88平台登录 11

  DOM中负有的节点都达成了Node接口。Node接口是在DOM1级中定义的,在那之中定义了部分用来叙述DOM节点的性质和操作方法。

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

  皇家88平台登录 12

并不是对负有属性的改动都能直观在页面上显现出来。
对id或lang的修改对用户而言是晶莹剔透不可知的;
对title的改动只会在鼠标移动到那些因素上时才展现出来;
对dir的改动会在品质被重写的那一刻马上影响页面中文本左右对齐格局;
修改className时,如果新类关联了与原先不等的CSS样式那么就会立刻使用该样式;
至于领悟全体HTML成分以及与之提到的原型类型的构造器可参看高程三P263,有的成分是直接接轨自HTMLElement.prototype比如b成分,有的是继承自HTML某成分Element.prototype,比如a成分,它的原型属性指向HTMLAnchorElement.prototype。
(6).attributes:继承自Element.prototype。再次回到1个NamedNodeMap的实例对象。
此间扩张领悟一下NamedNodeMap接口,原型链继承关系为:ele.attributes.__proto__->NamedNodeMap.prototype->Object.prototype。NamedNodeMap接口表示属性节点指标的集合,就算NamedNodeMap里面包车型客车指标足以像数组一样通过索引举行访问但它和NodeList分裂,对象的相继没有点名。NamedNodeMap集合是即时更新的,因而一旦它当中含有的指标爆发变更的话,该指标会自动更新到最新状态。
皇家88平台登录 13

  常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的属性。对于Node接口的实际达成者,HTMLElement不仅继续了那一个属性,还有着多少个wac规范中的多少个标准性子:id、title、lang、dir、class和贰个个性:attributes。

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

   每2个要素都有2个或八个特征,这一个特色的用途是交给相应元素或其剧情的叠加音讯。通过DOM成分直接操作特性的的章程有三个:

皇家88平台登录 14

  • getAttribute(attrName)
  • setAttribute(attrName, value)
  • removeAttribute(name)
  • getNamedItem(str):再次来到贰个加以名字对应的本性节点(Attr)
    皇家88平台登录 15
  • setNamedItem(attr):替换或丰盛贰脾性质节点到映射map中,会直接反映到DOM中
    皇家88平台登录 16
    皇家88平台登录 17
  • removeNamedItem(str):移除贰本性质节点,也会即时反映到文书档案的DOM树中
    皇家88平台登录 18
  • item(idx):再次回到内定索引处的特性节点,当索引超出范围重返null
    皇家88平台登录 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).每种成分都有3个或多个特色,这个特征的用处是给相应成分或其情节附加音讯。成分继承自Element.prototype上的多本性情,它们的功能是操作本性(不是性质)的方法:

  

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

  元素的性状在DOM中以Attr类型来代表,Attr类型也落到实处了Node接口。Attr对象有多个脾气:name、value、specified。在那之中,name是特色的称谓,value是特点值,specified是1个布尔值,用来提示该本性是不是被醒目设置。

那三个主意都可操作自定义天性,但只有公认的特征才能被应用以属性的花样添加到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访问。
皇家88平台登录 20
(2).当然成分还能够因而持续HTML某元素Element.prototype上的一些质量,比如input成分的HTMLInputElement.prototype上的disabled能够通过inputele.disabled取得或设置值。inputele.disabled;//
false表示该因素未被安装disabled属性即未被禁止使用,inputele.disabled=true;//
表示为该因素设置不可用属性。

  document.createAttribute方法能够用来创建性子节点。例如,要为成分添加align性情能够选用如下方法:

皇家88平台登录 21

发表评论

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

网站地图xml地图