从原型链看DOM--Element类型

从原型链看DOM--Element类型

返本求源——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,那天个性是被援助的。既然展现的文本没变,那就翻开一下成分呢。
澳门新萄京8522 1

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

如上的这么些小案例就涉嫌到了DOM操作时平日被忽略的一个难题:性格与质量的分别

返本求源

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

澳门新萄京8522 2

Property是对此某生机勃勃品种特征的汇报。能够这么敞亮,在DOM成分中得以通过点语法访谈,又不是明媒正娶天性的都能够成为属性。

DOM中保有的节点都完毕了Node接口。Node接口是在DOM1级中定义的,当中定义了有的用来陈诉DOM节点的性质和操作方法。

澳门新萄京8522 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标签上:

澳门新萄京8522 4

瞩目,尽管特性节点也促成了Node接口,但特性却不被感觉是DOM文书档案树的生龙活虎有些。

在具有的DOM节点中attributes属性是Element类型所只有的的性质。从本事角度来说,性格就是存在于成分的attributes属性中的节点。attributes属性归于NamedNodeMap类型的实例。成分的每一个性情节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

  • getNamedItem(name):再次来到天性名叫name的特征节点
  • 澳门新萄京8522,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三者关系应该那样画:

澳门新萄京8522 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 收藏
评论

澳门新萄京8522 6

document.body.attributes.item(3);// class=​"as"

文件节点方法:

Object.getOwnPropertyNames(NamedNodeMap.prototype);//
["length", "item", "getNamedItem", "getNamedItemNS", 
"setNamedItem", "setNamedItemNS", "removeNamedItem", 
"removeNamedItemNS", "constructor"]

  createAttribute(attr) 制造新的习性节点;

attributes属性

  成分节点正是HTML标签成分,成分节点首要提供了对成分标签字、子节点及质量的探望;

document.body.attributes.getNamedItem("id");// id="test"
document.body.attributes[0].nodeName;// "id"

  属性节点,有的叫天性节点,大概两个情趣;

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

文本节点

(3).setNamedItem(attrnode):向列表中增多属性节点,以节点的nodeName属性为索引。

要早秋点

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

  文本节点的多个node属性,nodeType:3、nodeName:’#text’、nodeValue:节点所蕴藏的公文,其父节点
parentNode 指向包蕴该文件节点的因季秋点,文本节点未有子节点;

 

  属性节点还恐怕有二个 specified 属性,specified
是三个布尔值,用以差异特性是在代码中钦赐的,照旧暗中同意的。那一个特性的值倘使为true,则表示在HTML中内定了对应性子,可能是由此setAttribute()
方法设置了该属性。在IE中,全体未设置过的表征的该属性值都为false,而在其余浏览器中,全数安装过的表征的该属性值都以true,未安装过的性状,假诺强行为其设置
specified 属性,则报错。

 

  元素的 childNodes
属性中隐含了它的全体子节点,那么些子节点恐怕是因素、文本、注释、管理指上除点;

(1).getNamedItem(name):再次回到nodeName属性等于name的特征节点。

  • obj.removeAttribute(attr)方法用于通透到底剔除成分的属性,这些法子不但会深透去除成分的属性值,还也许会删除成分属性。该方式无重返值;

(1).每种成分都有四个或多少个特征,这个特征的用场是给相应成分或其内容附加新闻。成分世袭自Element.prototype上的两个特性,它们的功效是操作性情(不是性质卡塔 尔(英语:State of Qatar)的方法:

  • document.createTextNode(text);
    方法用于创建文本节点,这一个法子采纳多个参数,要插入节点中的文本;插入的是文本,固然写的是标签,也是充任文本来插入的;
  • splitText(index) 方法将二个文书节点分成五个文件节点,即根据 index
    钦点的岗位分割 nodeValue
    值。原本的文件节点将包括从开端到钦定地方从前的剧情。那一个方法会重返二个新文本节点,满含剩下的文件;
  • appendData(text) 方法将 text 加多到节点的最终,该措施无再次来到值;
  • deleteData(index,count) 方法从 index内定的职责上马删除 count
    个字符,无重返值;
  • insertData(index,text) 方法在 index 钦定的岗位插入 text,无再次来到值;
  • replaceData(index,count,text) 方法用 text 替换从 index
    内定地方上马到 index+count 停止的公文,无重返值;
  • substringData(index,count) 方法提取从 index 钦赐的职位上马到
    offset+count 截至处的字符串,并赶回该字符串。原本的文本节点无变化;
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

  成分节点有三个 attributes 属性,它富含二个NamedNodeMap,蕴含当前成分全体的习性及属性值,与NodeList近似,也是三个动态的聚合。成分的每壹特性质都由一个Attr节点表示,各种节点都保存在NamedNodeMap对象中,各样节点的
nodeName 正是性质的称谓,节点的 nodeValue 正是性质的值;

 

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.removeAttribute('class'); //removeAttribute直接用class就可以了
      oTest.removeAttribute('for');
      oTest.removeAttribute('style'); 
      console.log(oTest);// <div id="test">123</div>
    </script>

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属性的函数。
澳门新萄京8522 7
还要经过getAttribute访谈仍得到的是标签上的特征值,且不怕早前早就给onclick属性赋值了但调整台彰显成分本人并未那么些个性。笔者不亮堂为什么document.body自己上会未有onclick属性,那当访谈document.body.onclick时候去哪访谈onclick的值,按着原型链吗?假使函数是在原型链上的onclick属性上也不应有啊HTMLElement.prototype.onclick=function(){console.log(2)}那样不就使那么些措施成分享的了其余HTML成分实例都能访谈,那明明不实际因为大家只想为某大器晚成要素设置某一件事件函数。对于document.body自己上会未有onclick属性不明了是还是不是JS引擎内部得以完成的,假使是那现实是怎么贯彻的?知道的盆友麻烦告知~

质量节点

  • getNamedItem(str):再次回到一个加以名字对应的性质节点(Attr卡塔 尔(阿拉伯语:قطر‎
    澳门新萄京8522 8
  • setNamedItem(attr):替换或抬高贰特性能节点到映射map中,会平昔反映到DOM中
    澳门新萄京8522 9
    澳门新萄京8522 10
  • removeNamedItem(str):移除叁本性质节点,也会即时反映到文书档案的DOM树中
    澳门新萄京8522 11
  • item(idx):重回内定索引处的质量节点,当索引超过范围再次来到null
    澳门新萄京8522 12
  • getNamedItemNS():依照给定命名空间的参数和name再次来到多个attr对象
  • setNamedItemNS():替换,加多给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象
   <ul class="list" id="list">
      <li class="in"></li>
      <li class="in"></li>
    </ul>
    <script>
      var oList = document.getElementById('list');
      var children = oList.childNodes;
      var num = 0;
      for(var i = 0; i < children.length; i++){
        if(children[i].nodeType == 1){
          num++;
        }
      }
      console.log(num);//2  有2个元素子节点  
    </script>
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""

  其父节点 parentNode 指向富含该因素秋点的要金秋点 Element 或文书档案节点
Document;

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

 <div id="test">
      <div>hello world!</div>
    </div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //第一个和最后一个都是空白文本节点
      console.log(oTest.firstChild);//" "  
      console.log(oTest.lastChild);//" "  
      console.log(oTest.childNodes);//[text, div, text]  
      //标准浏览器输出[text, div, text],text表示空白文本节点
      //IE8及以下浏览器输出[div],并不包含空白文本节点
      console.log(oTest.childNodes.length); //3
      //标准浏览器返回3
      //IE8及以下浏览器返回1,并不包含空白文本节点
      //清理空白文本节点
      function cleanWhitespace(oEelement){
         for(var i = 0; i < oEelement.childNodes.length; i++){
           var node = oEelement.childNodes[i];
           if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){
             node.parentNode.removeChild(node);
           }
         }
      }
      cleanWhitespace(oTest);
      console.log(oTest.childNodes);//[div]
      console.log(oTest.childNodes.length); //1
    </script>

(4).item(pos):再次来到位于数字pos地方处的特色节点。 

  关于文本节点,遇到最多的宽容难点是赤手文本节点难题。IE8及以下浏览器不识别空白文本节点,而任何浏览器会识别空白文本节点
;所以不经常候大家须求清理空白文本节点;

(3).title:世襲自HTMLElement.prototype。有关因素的叠合表达信息,平日通过工具提醒条突显出来。
(4).lang:世襲自HTMLElement.prototype。成分内容的语言代码, document.documentElement.lang;//
“zh-cn” 
(5).dir:世襲自HTMLElement.prototype。语言的自由化,值为”ltr”(从左至右卡塔尔或”rtl”(从右至左卡塔尔。是分明语言内容的文本方向不是文字顺序颠倒。注意一点,应用dir=”rtl”后虽说对文件全体是方向性的变动,但对标点符号和文书全部却做了颠倒。其实很好明白,那几个性格是规定语言的可行性,从右向左读,句号明确在读的依次的末梢也便是左臂。在换行的时候照旧从截断的文本全体偏向侧边。
澳门新萄京8522 13

 <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了
      oTest.setAttribute('className','bbb');
      console.log(oTest.class);//undefined IE8及以下会报错缺少标识符
      console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了
      console.log(oTest.className);//aaa
      console.log(oTest.getAttribute('className'));//bbb
      oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了
      console.log(oTest.style);//所有的style设置,包括你没有设置的,太多了,肯定不是你想要的
      console.log(oTest.getAttribute('style'));
      //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了
      oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了
      oTest.setAttribute('htmlFor','fff')
      console.log(oTest.for);//undefined  IE8及以下会报错缺少标识符
      console.log(oTest.htmlFor);//undefined
      console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了
      console.log(oTest.getAttribute('htmlFor'));//fff
      console.log(oTest);
      //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
    </script>

(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协助

  attributes属性包括以下多个艺术:

Element类型是使用attributes属性的独占鳌头三个DOM节点类型,attributes属性世袭自Element.prototype。它的值是NamedNodeMap类型实例,也是个动态集结,成分的每三个特点都由叁个Attr类型节点表示,每种节点都保存在NamedNodeMap对象中。

  操作属性的方法首要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()五个,能够本着任何性质使用,满含这个以HTMLElement类型属性的款型定义的习性;

安装特色

  childNodes 结合 NodeType 能够检查有多少个成分子节点:

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

你只怕感兴趣的随笔:

  • JavaScript
    DOM节点操作方法总计
  • js操作DOM–增多、删除节点的归纳实例
  • JavaScript中对DOM节点的探问、创制、修改、删除
  • javascript得到dom的下贰个节点方法
  • javascript 获取HTML
    DOM父、子、临近节点
  • js和jquery对dom节点的操作(创立/追加)
  • js中应用DOM复制(克隆卡塔尔钦点节点名数据到新的XML文件中的代码
  • javascript
    dom操作之cloneNode文本节点克隆使用技能
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

  attributes属性首要用于属性遍历。在须求将DOM结构类别化为HTML字符串时,相当多都会涉嫌遍历成分个性

发表评论

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

网站地图xml地图