【ca88】jacascript DOM节点——成分节点、属性节点

作者:ca88

返本求源——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,那么些性子是被协助的。既然显示的文书没变,那就翻开一下元素呢。
ca88 1

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

如上的这么些小案例就事关到了DOM操作时常常被忽略的几个主题材料:性格与天性的区分

返本求源

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

ca88 2

Property是对此某风度翩翩类别特征的呈报。可以这么驾驭,在DOM元素中得以因而点语法访谈,又不是正统天性的都能够成为属性。

DOM中具备的节点都落实了Node接口。Node接口是在DOM1级中定义的,此中定义了生龙活虎部分用来陈诉DOM节点的质量和操作方法。

ca88 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)
  • ca88,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标签上:

ca88 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三者关系应该这么画:

ca88 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 收藏 评论

ca88 6

HTML元素

文件节点

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

  attributes属性满含以下多少个办法:

dataset属性继自HTMLElement.prototype,它的值是DOMStringMap的实例集合,原型链世袭关系为:ele.dataset.__proto__->DOMStringMap.prototype->Object.prototype。
ca88 7
(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个性。
ca88 8
并从未background性情值,能够看看无论通过哪个形式得到的结果都独有成分上style天性设置的习性才会现身。
由此style属性再次来到了四个CSSStyleDeclaration类型实例集结,原型链继承关系为:div.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype
ca88 9
赢得的联谊中的属性唯有已安装的才有值,别的的性质为空字符串纵然它们都有暗许值。
ca88 10
回顾学习下CSSStyleDeclaration接口:代表css键值对的汇合,它在局地API中被选用

  属性节点,有的叫天性节点,大约多个野趣;

那一个函数使用了一个数组来保存名值对,最后再以空格分隔符将它们拼接起来(那是种类化长字符串时的常用技术卡塔 尔(阿拉伯语:قطر‎。

  成分节点便是HTML标签成分,成分节点主要提供了对成分标签字、子节点及质量的访问;

(4).item(pos):重临位于数字pos地方处的风味节点。 

本性节点

  • getNamedItem(str):重回贰个加以名字对应的质量节点(Attr卡塔 尔(英语:State of Qatar)
    ca88 11
  • setNamedItem(attr):替换或丰富一天性质节点到映射map中,会一直反映到DOM中
    ca88 12
    ca88 13
  • removeNamedItem(str):移除贰特性格节点,也会即时反映到文书档案的DOM树中
    ca88 14
  • item(idx):重返钦命索引处的习性节点,当索引超过范围再次来到null
    ca88 15
  • getNamedItemNS():遵照给定命名空间的参数和name再次回到叁个attr对象
  • setNamedItemNS():替换,增加给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

  元素的 childNodes 属性中蕴藏了它的全数子节点,那些子节点可能是因素、文本、注释、管理指重三点;

ca88 16

上述所述是我给我们介绍的jacascript DOM节点——成分节点、属性节点、文本节点,希望对大家享有助于,淌若我们有其余疑问请给本人留言,作者会及时还原我们的。在这里也特别多谢我们对剧本之家网址的支撑!

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

文件节点方法:

(3).HTML5行业内部对自定义天性做了抓好,只要自定义本性以'data-attrName'方式写到html标签中(setAttribute或间接html代码存在均可卡塔尔,在DOM属性中就可经过ele.dataset.attrName情势拜候自定义性格。
ca88 17

  1. obj.attributes.setNamedItem(attr);  向列表中加多节点,该形式无重返值;要先创立属性,在以nodeValue的样式赋属性值,在传诵setNamedItem
  2. obj.attributes.getNamedItem(attr);  再次回到 nodeName 属性等于 attr 的节点;以" attr=value " 情势再次回到;
  3. obj.attributes.removeNamedItem(attr); 从列表中移除 nodeName 属性等于 attr 的节点,并回到该节点;
  4. obj.attributes.item(index); 重回位于下标 index 地方处的节点,也可以用[]代替, obj.attributes[index];

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

  成分节点的五个node属性:nodeType:1、nodeName/TagName:成分的价签字大写、nodeValue:null;

成立成分

  attributes属性主要用来属性遍历。在急需将DOM结构类别化为HTML字符串时,相当多都会涉及遍历元素性情

  • 无法设置动态创造的<iframe>元素的name天性
  • 不能够透过表单的reset()方法重设动态创制的<input>成分。
  • 动态创设的type本性值为"reset"的<button>成分重设不了表单。
  • 动态成立的一群name相似的单选开关互相毫无关系,name值相通的后生可畏组单选开关本来应该用于表示后生可畏致选项的分化值,但动态创造的一群这种单选按键之间却并未有这种关联。

  文本节点的多少个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所富含的文本,其父节点 parentNode 指向包蕴该公文节点的成分节点,文本节点未有子节点;

 

  属性节点的七个node属性,nodeType:2、nodeName/name:属性名称、nodeValue/value:属性值;

Chrome46.0.2490.80:
ca88 18
FF44.0.2 :
ca88 19
假诺急需通过childNodes属性遍历子节点,平常要先检查一下当前节点的nodeType属性。

  操作属性的形式首要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()三个,能够本着任何性质使用,包含那些以HTMLElement类型属性的花样定义的本性;

上述全数标题都可通过在createElement()中钦定完整的HTML标签来化解。

  属性节点还会有叁个 specified 属性,specified 是叁个布尔值,用以分歧特性是在代码中内定的,照旧暗中认可的。这么些性子的值要是为true,则象征在HTML中钦命了相应天性,大概是通过 setAttribute() 方法设置了该属性。在IE中,全体未设置过的特点的该属性值都为false,而在别的浏览器中,全体安装过的性格的该属性值都以true,未安装过的特色,如若强行为其设置 specified 属性,则报错。

要素的childNodes属性(世袭自Node.prototype卡塔尔国包涵了它全数子节点,这个子节点只怕是因素,文本节点,注释,管理指令。不相同浏览器在待遇这个节点方面存在分化。

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

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
ca88 20
ca88 21

  • obj.getAttribute(attr)方法用于获取属性的值,若是给定称号的品质不设有或无参数则赶回null;
  • obj.getAttribute(attr)获取 class 时,直接用 class 就能够了;IE6/IE7除了那几个之外,IE6/IE7的 getAttribute(attr) 方法要用 className;
  • obj.getAttribute(attr)获取 for时,直接用 for就能够了;
  • obj.setAttribute(attr,value)方法接收四个参数:要设置的属性名和值,假使已经存在,则替换现成的值。如若属性不设有,则创制该属性并安装相应的值。该方法无重返值;
  • obj.setAttribute(attr,value)设置 class 时,直接用 class 就足以了;
  • obj.setAttribute(attr,value)设置 for 时,直接用 for 就能够了;
  • obj.setAttribute(attr,value)设置 style 时,直接用 style 就足以了;在 IE7及以下,用 obj.style.setAttribute("cssText",value);  这里的 style 只是行间样式;
  • 大家经常用 obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 来获取成分当前体制;

 

 <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>

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属性的函数。
ca88 22
並且通过getAttribute访谈仍得到的是标签上的性状值,且不怕从前曾经给onclick属性赋值了但调整台呈现成分自己并不曾那么些特性。笔者不理解怎么document.body本身上会没有onclick属性,那当访谈document.body.onclick时候去哪访问onclick的值,按着原型链吗?假诺函数是在原型链上的onclick属性上也不应有啊HTMLElement.prototype.onclick=function(){console.log(2)}那样不就使那几个情势成共享的了别样HTML成分实例都能访谈,那明显不实际因为我们只想为某一成分设置某件事件函数。对于document.body自己上会未有onclick属性不明了是或不是JS引擎内部落实的,借使是那现实是怎么落到实处的?知道的盆友麻烦告知~

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(oTest.attributes.item(1).specified);//true
      console.log(oTest.attributes.getNamedItem('id'));//id='test'
      console.log(typeof oTest.attributes.getNamedItem('id'));//object
      console.log(oTest.attributes.removeNamedItem('for'));//id='test'
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3}
      var abc = document.createAttribute("abc"); 
      abc.nodeValue = "1234567";
      oTest.attributes.setNamedItem(abc);
      //obj.attributes.setNamedItem(attr) 要先创建属性,在以nodeValue的形式赋属性值,在传入setNamedItem
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4}
      console.log(oTest.attributes.item(1));//id='test'
      console.log(oTest.attributes[1]);//id='test'
    </script>

setAttribute('attr','value'):世襲自Element.prototype。参数为要设置的表征名和值,假使性子已经存在,setAttribute()会以钦点值替换现存值,借使天性不设有,setAttribute会创立该属性并安装相应值。
通过该办法能够操作HTML性格也得以操作自定义本性,通过那个艺术设置的特征名会被归总改造为小写情势即"ID"转变为"id"。
因为具有个性都以性质,所以一向给属性赋值就可以安装特色的值,但透过加多自定义属性并不会化为该因素的特色那样其实为因素自己增多了质量。

  • obj.hasAttribute(attr)方法再次回到八个布尔值,表示近些日子成分节点是不是包含内定属性;
  • IE6/IE7不支持 hasAttribute() 方法;
  • obj.hasAttribute(attr)检查实验 class 属性时,直接用 class 就能够了,不要用className;
  • obj.hasAttribute(attr)质量评定 for属性时,直接用 for就能够了,不要用htmlFor;
document.body.attributes.getNamedItem("id");// id="test"
document.body.attributes[0].nodeName;// "id"

文件节点属性:

 

  • obj.removeAttribute(attr)方法用于深透去除成分的性质,那个主意不但会干净删除元素的属性值,还或然会去除成分属性。该措施无再次来到值;

注:<=IE7中,setAtttribute()存在有的不行行为不但通过setAttribute()设置成分基本特点或事件特性没用况兼通过点赋值法设置成分属性也不会反馈到成分标签中。固然到IE8才消除这么些bug,但依旧引入用点赋值法设置特色。
removeAttribute():世袭自Element.prototype,能够通透到底去除成分本性,不仅仅会消亡性情值还有恐怕会从要素中完全除去天性。该方法有的时候用,但在连串化DOM成分时,可以经过它来相符钦赐要包蕴如何特征。

  元素商点有一个 attributes 属性,它满含多个NamedNodeMap,包蕴当前因素全部的性质及属性值,与NodeList相通,也是叁个动态的集纳。元素的每三脾质量都由一个Attr节点表示,每一种节点都保存在NamedNodeMap对象中,各种节点的 nodeName 正是性质的称谓,节点的 nodeValue 正是性质的值;

(3).title:世襲自HTMLElement.prototype。有关因素的增大说明音信,平常通过工具提醒条显示出来。
(4).lang:世袭自HTMLElement.prototype。元素内容的语言代码, document.documentElement.lang;// "zh-cn" 
(5).dir:世袭自HTMLElement.prototype。语言的矛头,值为"ltr"(从左至右卡塔尔或"rtl"(从右至左卡塔 尔(英语:State of Qatar)。是规定语言内容的文书方向不是文字顺序颠倒。注意一点,应用dir="rtl"后纵然对文件全部是方向性的变动,但对标点符号和文书全体却做了颠倒。其实很好明白,这特性子是显明语言的来头,从右向左读,句号鲜明在读的相继的尾声也正是左手。在换行的时候依旧从截断的文件全体趋向左侧。
ca88 23

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

本文由ca88发布,转载请注明来源

关键词: ca88网址 javascript HTML5