返本求源,属性节点

返本求源——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

要素节点

  很多前端类库(比如dojo与JQuery)在涉及dom操作时都会晤到多少个模块:attr、prop。某天代码复查时,见到一段为某节点设置文本的代码:

 

  元素节点就是HTML标签元素,元素节点首要提供了对元素标签名、子节点及品质的造访;

attr.set(node, 'innerText', 'Hello World!')

Element节点实例有以下特点:以下特点均三番五次自Node.prototype

  元素节点的四个node属性:nodeType:1、nodeName/TagName:元素的竹签名大写、nodeValue:null;

  那段代码执行后没有生效,虽说innerText不是规范属性,尚未被ff支持,可用的是chrome,那几个特性是被接济的。既然突显的公文没变,那就翻开一下因素呢。

  • nodeType值为1
  • nodeName值为元素标签名
  • 返本求源,属性节点。nodeValue值为null
  • parentNode可能是Document或Element
  • 其子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

  其父节点 parentNode 指向包括该因素节点的元素节点 Element 或文档节点
Document;

皇家赌场手机版 9

要拜访元素标签名,可以用nodeName(继承自Node.prototype)属性也可用tagName(继承自Element.prototype)属性,那多个属性会再次回到相同的值。但注意重临的字符串是大写。在HTML中标签字始终以整个大写表示,而在XML中(有时也蕴含XHTML)标签名则始终会与源码中的保持一致。借使你不确定自己的剧本将会在HTML如故XML中实施,最好在可比前边开展高低写转化。

  元素的 childNodes
属性中含有了它的所有子节点,那个子节点可能是因素、文本、注释、处理指令节点;

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

document.documentElement.tagName;// "HTML"
document.documentElement.nodeName;// "HTML"
document.documentElement.nodeName.toLowerCase();// "html"

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

  以上的那一个小案例就事关到了DOM操作时日常被忽视的一个题材:特性与品质的界别

 

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

 

目录

  操作属性的点子首要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()七个,能够针对其余性质使用,包涵这么些以HTMLElement类型属性的款式定义的质量;

 

  • HTML元素
  • 赢得特性
  • 安装特色
  • attributes属性
  • 始建元素
  • 要素的子节点
  • obj.hasAttribute(attr)方法再次回到一个布尔值,表示近年来因素节点是还是不是带有指定属性;
  • IE6/IE7不支持 hasAttribute() 方法;
  • obj.hasAttribute(attr)检测 class 属性时,直接用 class
    就足以了,不要用className;
  • obj.hasAttribute(attr)检测 for属性时,直接用
    for就足以了,不要用htmlFor;

返本求源

 

 <div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //IE6/IE7不支持hasAttribute方法
      console.log(oTest.hasAttribute('class'));//true
      console.log(oTest.hasAttribute('className'));//false  
      console.log(oTest.hasAttribute('id'));//true
      console.log(oTest.hasAttribute('style'));//true
      console.log(oTest.hasAttribute('for'));//true
      console.log(oTest.hasAttribute('htmlFor'));//false
    </script>

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

HTML元素

  • 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]; 来获取元素当前体制;

  皇家赌场手机版 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” 

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

  Property是对此某一档次特征的叙述。可以这么精通,在DOM元素中得以经过点语法访问,又不是正经特性的都可以成为属性。

(3).title:继承自HTMLElement.prototype。有关因素的叠加表达音信,一般通过工具提示条突显出来。
(4).lang:继承自HTMLElement.prototype。元素内容的语言代码, document.documentElement.lang;//
“zh-cn” 
(5).dir:继承自HTMLElement.prototype。语言的自由化,值为”ltr”(从左至右)或”rtl”(从右至左)。是规定语言内容的文本方向不是文字顺序颠倒。注意一点,应用dir=”rtl”后尽管对文件全体是方向性的转移,但对标点符号和文书全部却做了颠倒。其实很好通晓,那一个特性是确定语言的主旋律,从右向左读,句号肯定在读的逐一的最终也就是左边。在换行的时候依然从截断的文书全部偏向左侧。
皇家赌场手机版 11

  • obj.removeAttribute(attr)方法用于彻底剔除元素的特性,那一个办法不但会彻底删除元素的属性值,还会去除元素属性。该方法无重回值;

  DOM中具有的节点都落到实处了Node接口。Node接口是在DOM1级中定义的,其中定义了一些用来叙述DOM节点的质量和操作方法。

<div id="myID" class="bd" title="body" lang="en" dir="ltr">...</div>
<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>

  皇家赌场手机版 12

并不是对所有属性的改动都能直观在页面上显现出来。
对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集合是即时更新的,因而一旦它其中含有的目标暴发变更的话,该目的会自动更新到最新状态。
皇家赌场手机版 13

质量节点

  常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的特性。对于Node接口的现实性完结者,HTMLElement不仅一连了那些属性,还具备多个wac规范中的三个专业特性:id、title、lang、dir、class和一个属性:attributes。

  • length:只读,重临映射(map)中目的的多寡。

  属性节点,有的叫特性节点,大致一个趣味;

   每一个因素都有一个或七个特点,那几个特点的用处是付诸相应元素或其内容的增大音信。通过DOM元素直接操作特性的的格局有五个:

皇家赌场手机版 14

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

  • getAttribute(attrName)
  • setAttribute(attrName, value)
  • removeAttribute(name)
  • getNamedItem(str):重临一个加以名字对应的习性节点(Attr)
    皇家赌场手机版 15
  • setNamedItem(attr):替换或抬高一个属性节点到映射map中,会一贯反映到DOM中
    皇家赌场手机版 16
    皇家赌场手机版 17
  • removeNamedItem(str):移除一个属性节点,也会即时反映到文档的DOM树中
    皇家赌场手机版 18
  • item(idx):再次回到指定索引处的习性节点,当索引超出范围重临null
    皇家赌场手机版 19
  • getNamedItemNS():依据给定命名空间的参数和name再次回到一个attr对象
  • setNamedItemNS():替换,添加给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

  属性节点还有一个 specified 属性,specified
是一个布尔值,用以分裂特性是在代码中指定的,照旧默许的。这几个特性的值假若为true,则意味在HTML中指定了对应特性,或者是经过
setAttribute()
方法设置了该属性。在IE中,所有未设置过的特征的该属性值都为false,而在任何浏览器中,所有安装过的特点的该属性值都是true,未设置过的特性,如若强行为其安装
specified 属性,则报错。

  那多少个法子都得以操作自定义特性。然则只有公认的(非自定义)特性才会以属性的格局丰裕到DOM对象中,以属性格局操作这个特色会被一道到html标签中。HTMLElement的多个特点都有照应属性与其对待:id、title、lang、dir、className。在DOM中以属性格局操作那多少个性状会联手到html标签中。

 

  元素节点有一个 attributes 属性,它包罗一个
NamedNodeMap,包涵当前因素所有的习性及属性值,与NodeList类似,也是一个动态的聚合。元素的每一个性质都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中,每个节点的
nodeName 就是性质的称呼,节点的 nodeValue 就是性质的值;

  可是,HTML5正经对自定义特性做了压实,只要自定义特性以”data-attrName”的花样写入到html标签中,在DOM属性中就足以因此element.dataset.attrName的款式来走访自定义特性,如:

获取特性

  createAttribute(attr) 创制新的属性节点;

<input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​
seh.dataset.ff

(1).每个元素都有一个或三个特性,那么些特点的用途是给相应元素或其内容附加信息。元素继承自Element.prototype上的多少个属性,它们的机能是操作特性(不是性质)的方法:

  attributes属性包涵以下多个措施:

  

  • setAttribute(‘attr’,’value’)
  • getAttribute(‘attr’)
  • removeAttribute(‘attr’)
  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];

  元素的特征在DOM中以Attr类型来表示,Attr类型也兑现了Node接口。Attr对象有两个特性:name、value、specified。其中,name是特色的称谓,value是特色值,specified是一个布尔值,用来提示该特性是或不是被显著设置。

那五个措施都可操作自定义特性,但唯有公认的特点才能被使用以属性的样式加上到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访问。
皇家赌场手机版 20
(2).当然元素还是可以透过持续HTML某元素Element.prototype上的局地质量,比如input元素的HTMLInputElement.prototype上的disabled可以通过inputele.disabled取得或设置值。inputele.disabled;//
false表示该因素未被安装disabled属性即未被禁用,inputele.disabled=true;//
表示为该因素设置不可用属性。

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

  document.createAttribute方法能够用来成立特性节点。例如,要为元素添加align特性可以运用如下方法:

皇家赌场手机版 21

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

ar attr = document.createAttribute('align')
attr.value = 'left'
seh.setAttributeNode(attr)

(3).HTML5标准对自定义特性做了增进,只要自定义特性以’data-attrName’情势写到html标签中(setAttribute或直接html代码存在均可),在DOM属性中就可通过ele.dataset.attrName方式拜访自定义特性。
皇家赌场手机版 22

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      function outputAttributes(obj){
        var arr = [],
          attrName,
          attrValue,
          i;
        for(i = 0; i < obj.attributes.length; i++){
          attrName = obj.attributes[i].nodeName;
          attrValue = obj.attributes[i].nodeValue;
          arr.push(attrName + '=\"' + attrValue + '\"');
        }
        return arr.join(" ");
      }
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(typeof oTest.attributes);//object
      console.log(outputAttributes(oTest));
      //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
      console.log(typeof outputAttributes(oTest));//string
    </script>

  要将新创设的表征添加到元素上,必须利用要素的setAttributeNode方法。添加特性后,特性会反映在html标签上:

dataset属性继自HTMLElement.prototype,它的值是DOMStringMap的实例集合,原型链继承关系为:ele.dataset.__proto__皇家赌场手机版,->DOMStringMap.prototype->Object.prototype。
皇家赌场手机版 23
(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特性。
皇家赌场手机版 24
并不曾background特性值,可以看来不论通过哪个方式赢得的结果都唯有元素上style特性设置的品质才会油但是生。
透过style属性再次来到了一个CSSStyleDeclaration类型实例集合,原型链继承关系为:div.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype
皇家赌场手机版 25
获取的聚集中的属性唯有已设置的才有值,其他的习性为空字符串即便它们都有默认值。
皇家赌场手机版 26
概括学习下CSSStyleDeclaration接口:代表css键值对的集纳,它在局部API中被运用

文本节点

皇家赌场手机版 27

  • HTMLele.style 用于操作单个元素的体制(<ele style=”…”>)
  • 在getComputedStyle中使用:CSSStyleDeclaration是window.getComputedStyle()重返的只读接口,其中每个键都有值,或被安装的值或默许的值。

  文本节点的多个node属性,nodeType:3、nodeName:’#text’、nodeValue:节点所包罗的文书,其父节点
parentNode 指向包涵该文件节点的因素节点,文本节点没有子节点;

  注意,就算特性节点也落到实处了Node接口,但特性却不被认为是DOM文档树的一片段。

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属性的函数。
皇家赌场手机版 28
并且经过getAttribute访问仍取得的是标签上的特点值,且不怕此前已经给onclick属性赋值了但控制台呈现元素自身并不曾那几个特性。我不亮堂怎么document.body自身上会没有onclick属性,那当访问document.body.onclick时候去哪访问onclick的值,按着原型链吗?若是函数是在原型链上的onclick属性上也不该啊HTMLElement.prototype.onclick=function(){console.log(2)}那样不就使那一个点子成共享的了别样HTML元素实例都能访问,那眼看不实际因为我们只想为某一元素设置某事件函数。对于document.body自身上会没有onclick属性不晓得是否JS引擎内部贯彻的,假若是那现实是怎么落到实处的?知道的盆友麻烦告知~

  关于文本节点,遭遇最多的包容难点是空白文本节点难点。IE8及以下浏览器不识别空白文本节点,而任何浏览器会识别空白文本节点
;所以有时大家需求清理空白文本节点;

 

document.body.getAttribute('onclick');// "(function(){console.log(1)})()"
document.body.onclick;// function (){
  console.log(2)
}
document.body.hasOwnProperty('onclick');// false
 <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>

  在富有的DOM节点中attributes属性是Element类型所独有的的习性。从技术角度来说,特性就是存在于元素的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。元素的每一个特点节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

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

文本节点属性:

  • getNamedItem(name):重临特性名为name的风味节点
  • removeNamedItem(name):删除特性名为name的性状节点
  • setNamedItem(attr):像元素中添加一个特点节点
  • item(pos):重回位于数组pos处的节点

安装特色

  • 文件节点的 data 属性与 nodeValue 属性相同;
  • wholeText 属性将眼前 Text 节点与毗邻的 Text
    节点,作为一个完好无缺重回。大部分场地下,wholeText 属性的重临值,与
    data 属性和 textContent 属性相同;
  • 文件节点的 length 属性保存着节点字符的数码,而且
    nodeValue.length、data.length 也保留着同一的值;   

  获取、设置、删除元素节点可以如下格局:

setAttribute(‘attr’,’value’):继承自Element.prototype。参数为要设置的特色名和值,若是特性已经存在,setAttribute()会以指定值替换现有值,假使特性不设有,setAttribute会创立该属性并安装相应值。
通过该方法可以操作HTML特性也得以操作自定义特性,通过那么些办法设置的表征名会被合并更换为小写方式即”ID”转换为”id”。
因为有着特性都是性质,所以一直给属性赋值就可以安装特色的值,但经过抬高自定义属性并不会化为该因素的风味这样其实为因素自身添加了性能。

<div id="testData">hello world!</div>
    <div id="testWholeText">hello world!</div>
    <script type="text/javascript">
      var oTestData = document.getElementById('testData');
      //第一个和最后一个都是空白文本节点
      console.log(oTestData.firstChild);//"hello world!"  
      console.log(typeof oTestData.firstChild);//object  
      console.log(oTestData.childNodes.length); //1
      console.log(oTestData.firstChild.nodeValue);//"hello world!" 
      console.log(typeof oTestData.firstChild.nodeValue);//string
      console.log(oTestData.firstChild.data);//"hello world!" 
      //文本节点的data属性与nodeValue属性相同,都是 string 类型
      console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true
      var oTestWholeText = document.getElementById('testWholeText');
      console.log(oTestWholeText.childNodes); //[text]
      console.log(oTestWholeText.childNodes.length); //1
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      console.log(oTestWholeText.firstChild.data);//hello world!  
      oTestWholeText.firstChild.splitText('or');
      console.log(oTestWholeText.childNodes); //[text, text]
      console.log(oTestWholeText.childNodes.length); //2
      console.log(oTestWholeText.firstChild);//#text
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      //wholeText属性将当前Text节点与毗邻的Text节点,作为一个整体返回。
      console.log(oTestData.firstChild.length);//12
      console.log(oTestData.firstChild.nodeValue.length);//12
      console.log(oTestData.firstChild.data.length);//12
    </script>
element.attributes.getNamedItem('align') //获取

var attr = document.createAttribute('align');
attr.value = 'right';
element.attributes.setNamedItem(attr); //添加

element.attributes.removeNamedItem('align'); //删除
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

文本节点方法:

  实际运用中并不提出选拔特性节点的办法,而getAttribute、setAttribute、removeAttribute方法远比操作特性节点更有利于。

注:<=IE7中,setAtttribute()存在部分丰硕行为不仅通过setAttribute()设置元素基本特色或事件特性没用而且通过点赋值法设置元素属性也不会影响到元素标签中。即使到IE8才化解那个bug,但要么引进用点赋值法设置特色。
removeAttribute():继承自Element.prototype,可以彻底剔除元素特性,不仅会免去特性值还会从要素中完全除去特性。该措施不常用,但在连串化DOM元素时,能够通过它来适合指定要包括哪些特征。

  文本节点的操作与字符串的操作方法相当接近。一般地,大家获得文本都用
innerHTML,然后再去字符串的操作方法去操作。

  DOM、attributes、Attr三者关系应该那样画:

attributes属性

  • 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 截至处的字符串,并赶回该字符串。原来的文件节点无变化;

皇家赌场手机版 29

Element类型是应用attributes属性的绝无仅有一个DOM节点类型,attributes属性继承自Element.prototype。它的值是NamedNodeMap类型实例,也是个动态集合,元素的每一个特色都由一个Attr类型节点表示,每个节点都保存在NamedNodeMap对象中。

以上所述是作者给我们介绍的jacascript
DOM节点——元素节点、属性节点、文本节点,希望对咱们有着协助,即使我们有其余疑问请给自身留言,小编会及时还原大家的。在此也极度感谢咱们对剧本之家网站的支持!

 

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

您可能感兴趣的小说:

  • JavaScript
    DOM节点操作方法计算
  • js操作DOM–添加、删除节点的简短实例
  • JavaScript中对DOM节点的走访、创设、修改、删除
  • javascript得到dom的下一个节点方法
  • javascript 获取HTML
    DOM父、子、临近节点
  • js和jquery对dom节点的操作(创建/追加)
  • js中应用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
  • javascript
    dom操作之cloneNode文本节点克隆使用技巧

 

(1).getNamedItem(name):重临nodeName属性等于name的性状节点。

利用统计

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

  基于以上DOM基础知识和实在工作经历,我将特色和性质的不相同联系总括如下:

(2).removeNamedItem(name):从列表中移除nodeName等于name的节点。该形式与在要素上调用removeAttribute()方法效果一样,直接删除所有给定名称的表征节点。那二种艺术唯一的分别就是再次回到值,removeNamedItem再次来到被删去特性的Attr节点。

  1. 属性以及公认特性可以由此点语法访问;html5标准中,data-*款式的自定义特性可以透过element.dataset.*的款型来做客,否则用getAttribute
  2. 特性值只可以是字符串,而属性值可以是任意JavaScript协理的花色
  3. 多少个非凡性状:

    1. style,通过getAttrbute和setAttribute来操作这么些特点只好得到或设置字符串;而已属性格局来操作就是在操作CSSStyleDeclaration对象
    2. 事件处理程序,通过特色方式得到和传递的都只是函数字符串;而已属性方式操作的是函数对象
    3. value,对于协理value的要素,最好通过质量格局操作,而且操作不会反映在html标签上

      seh.value = 10
      <input type="text" name="as_q" class="box" id="searched_content" title="在此输入搜索内容。" disabled="false" data-ff="fsdf" align="left">
      
    4. href,通过品质形式设置可以反映到html标签上,但用过点语法和getAttribute可以取到的值并不一定相同

      <a href="/jsref/prop_checkbox_tabindex.asp" id="tabI">tabIndex</a>
      
      link.getAttribute('href') // "/jsref/prop_checkbox_tabindex.asp"
      
      link.href // "http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp"
      
    5. disabled和checked,对于支撑那四个性状的要向来说,他们在html标签中都是无状态的,只要有独立的标签属性在以点语法访问时就回去true,假若html标签属性不存在,则以点语法访问时就是false

    6. seh.disabled // true
      
attrMap.removeNamedItem('style');// style=​"overflow:​ hidden;​"
document.body.removeAttribute('class');// undefined
        seh.disabled = false
        <input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left">​


        如果您觉得这篇文章对您有帮助,请不吝点击右下方“推荐”,谢谢~

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

本条函数使用了一个数组来保存名值对,最后再以空格分隔符将它们拼接起来(那是系列化长字符串时的常用技巧)。

  • 本着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。一旦将元素添加到文档树,浏览器就会立时显现该因素。此后对这一个元素所做的其他修改都会实时反映在浏览器中。
在<=IE8中以另一种办法利用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
皇家赌场手机版 30
IE5~8
皇家赌场手机版 31

Chrome46.0.2490.80:
皇家赌场手机版 32
FF44.0.2 :
皇家赌场手机版 33
假诺需求通过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类型实例集合是回去当前因素的遗族(倘使有多层嵌套的话概括子元素和子元素的子孙)。document.getElementsByTagName()是继续自Document.prototype。

参考

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

Leave a Comment.