威尼斯人线上娱乐

质量节点,从原型链看DOM

30 4月 , 2019  

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

2015/09/06 · HTML5,
JavaScript ·
DOM

原作出处: 木的树   

投砾引珠

广大前端类库(比方dojo与JQuery)在关乎dom操作时都会面到多个模块:attr、prop。某天代码复查时,见到1段为某节点设置文本的代码:

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接口是在DOM一级中定义的,个中定义了有个别用来描述DOM节点的天性和操作方法。

威尼斯人线上娱乐 3

广阔的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的属性。对于Node接口的具体贯彻者,HTMLElement不仅一连了这几个属性,还具有七个wac标准中的七个专门的学问本性:id、title、lang、dir、class和三性格质:attributes。

每1个成分都有贰个或两个性情,那些特征的用处是付诸相应成分或其剧情的叠加音讯。通过DOM成分直接操作性情的的秘技有多少个:

  • getAttribute(attrName)
  • 质量节点,从原型链看DOM。setAttribute(attrName, value)
  • removeAttribute(name)

那多少个情势都足以操作自定义个性。可是唯有公认的(非自定义)本性才会以属性的花样充足到DOM对象中,以属天性局操作那么些特色会被一并到html标签中。HTMLElement的七个特色都有照拂属性与其对待:id、title、lang、dir、className。在DOM中以属性格局操作那多少个特征会共同到html标签中。

而是,HTML五正规对自定义个性做了巩固,只要自定义脾性以”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. 属性以及公认性格能够通过点语法访问;html伍正经中,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

  成分节点正是HTML标签成分,元金天点主要提供了对成分标具名、子节点及品质的走访;

 

  成分节点的多个node属性:nodeType:一、nodeName/TagName:元素的价签字大写、nodeValue:null;

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

  其父节点 parentNode 指向包罗该因素秋点的因穷秋点 Element 或文档节点
Document;

  • nodeType值为1
  • nodeName值为成分标签名
  • nodeValue值为null
  • parentNode可能是Document或Element
  • 其子节点只怕是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

  成分的 childNodes
属性中富含了它的全部子节点,那个子节点或然是因素、文本、注释、处理指重三点;

要拜访成分标签字,能够用nodeName(承接自Node.prototype)属性也可用tagName(传承自Element.prototype)属性,那多少个属性会重临同样的值。但注意重回的字符串是大写。在HTML中标具名始终以壹切大写表示,而在XML中(有时也包罗XHTML)标具名则始终会与源码中的保持一致。即使你不鲜明本人的剧本将会在HTML还是XML中推行,最棒在可比前面开始展览高低写转化。

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

document.documentElement.tagName;// "HTML"
document.documentElement.nodeName;// "HTML"
document.documentElement.nodeName.toLowerCase();// "html"
   <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类型属性的样式定义的习性;

目录

  • obj.hasAttribute(attr)方法重回二个布尔值,表示近来因秋天点是还是不是包括钦定属性;
  • IE6/IE7不支持 hasAttribute() 方法;
  • obj.hasAttribute(attr)检查评定 class 属性时,直接用 class
    就能够了,不要用className;
  • obj.hasAttribute(attr)检查实验 for属性时,直接用
    for就能够了,不要用htmlFor;
  • HTML元素
  • 赚取天性
  • 安装特色
  • attributes属性
  • 创设成分
  • 要素的子节点
 <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>

 

  • obj.getAttribute(attr)方法用于获取属性的值,假若给定称号的天性不存在或无参数则赶回null;
  • obj.getAttribute(attr)获取 class 时,直接用 class
    就足以了;IE6/IE七除了这些之外,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 就能够了;在
    IE七及以下,用 obj.style.setAttribute(“cssText”,value);  这里的 style
    只是行间样式;
  • 小编们一般用 obj.currentStyle ? obj.currentStyle[attr] :
    getComputedStyle(obj)[attr]; 来获取成分当前体制;

HTML元素

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

HTML成分的二种规范特性(ele.attributes[index或’属性’]或ele.getAttributeNode(‘属性’)获得性剧情点),能够收获或修改。
(一).id:承继自Element.prototype,成分在文书档案中独一无二的标志符。 document.body.id;//
“Posts” 
(二).className:承接自Element.prototype,与成分的class天性对应,即为元素钦定的css类。未有将那脾天性命名称叫class,是因为class是ECMAScript的保留字。 document.forms[0].getElementsByTagName(‘div’)[0].className;//
“aspNetHidden” 

  • obj.removeAttribute(attr)方法用于通透到底剔除成分的习性,那个主意不但会彻底去除成分的属性值,还会去除成分属性。该措施无重临值;

(三).title:承袭自HTMLElement.prototype。有关因素的叠加表明新闻,一般通过工具提醒条突显出来。
(四).lang:承继自HTMLElement.prototype。成分内容的语言代码, document.documentElement.lang;//
“zh-cn” 
(5).dir:承接自HTMLElement.prototype。语言的可行性,值为”ltr”(从左至右)或”rtl”(从右至左)。是明确语言内容的文本方向不是文字顺序颠倒。注意一点,应用dir=”rtl”后虽说对文本全部是方向性的改造,但对标点符号和文件全部却做了颠倒。其实很好驾驭,这性子子是规定语言的来头,从右向左读,句号显明在读的逐条的末段也便是左手。在换行的时候依然从截断的文件全体偏向右边。
威尼斯人线上娱乐 9

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

质量节点

并不是对具有属性的退换都能直观在页面上表现出来。
对id或lang的修改对用户来说是透明不可知的;
对title的改造只会在鼠标移动到这些因素上时才显得出来;
对dir的退换会在性质被重写的那一刻立即影响页面粤语本左右对齐格局;
修改className时,假设新类关联了与此前不可同日而语的CSS样式那么就会及时利用该样式;
有关精晓全体HTML成分以及与之提到的原型类型的构造器可参考高程三P26叁,有的成分是1直接轨自HTMLElement.prototype比如b成分,有的是承袭自HTML某成分Element.prototype,举例a成分,它的原型属性指向HTMLAnchorElement.prototype。
(陆).attributes:承接自Element.prototype。重临一个NamedNodeMap的实例对象。
此处扩展了然一下NamedNodeMap接口,原型链传承关系为:ele.attributes.__proto__->NamedNodeMap.prototype->Object.prototype。NamedNodeMap接口表示属性节点目的的聚众,固然NamedNodeMap里面的对象能够像数组一样通过索引举行走访但它和NodeList不一致,对象的逐1未有点名。NamedNodeMap会集是即时更新的,因而假诺它里面含有的目标爆发变动的话,该对象会自动更新到最新气象。
威尼斯人线上娱乐 10

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

  • length:只读,再次来到映射(map)中目的的数据。

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

威尼斯人线上娱乐 11

  属性节点还有2个 specified 属性,specified
是一个布尔值,用以区别性情是在代码中钦赐的,照旧默许的。那特性情的值假使为true,则表示在HTML中钦点了相应特性,恐怕是通过
setAttribute()
方法设置了该属性。在IE中,全体未安装过的特征的该属性值都为false,而在其他浏览器中,全数安装过的特点的该属性值都是true,未安装过的天性,借使强行为其设置
specified 属性,则报错。

  • getNamedItem(str):重回1个加以名字对应的性剧情点(Attr)
    威尼斯人线上娱乐 12
  • setNamedItem(attr):替换或加上二性子剧情点到映射map中,会直接呈现到DOM中
    威尼斯人线上娱乐 13
    威尼斯人线上娱乐 14
  • removeNamedItem(str):移除一天性子节点,也会即时反映到文档的DOM树中
    威尼斯人线上娱乐 15
  • item(idx):重临钦定索引处的属性节点,当索引超过范围重回null
    威尼斯人线上娱乐 16
  • getNamedItemNS():依照给定命名空间的参数和name重回1个attr对象
  • setNamedItemNS():替换,加多给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

  成分节点有贰个 attributes 属性,它富含2个NamedNodeMap,包罗当前元素全体的品质及属性值,与NodeList类似,也是二个动态的集合。成分的每2天品质都由二个Attr节点表示,每一种节点都保存在NamedNodeMap对象中,各样节点的
nodeName 正是性质的名目,节点的 nodeValue 便是性质的值;

 

  createAttribute(attr) 创造新的性剧情点;

得到天性

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

(一).每种成分都有八个或几个特征,那几个特点的用途是给相应成分或其内容附加音信。成分承接自Element.prototype上的多少个属性,它们的作用是操作个性(不是性质)的方法:

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

那多少个艺术都可操作自定义天性,但唯有公认的性状才干被运用以属性的花样增加到DOM对象中,以属性方式操作那么些特征会被壹并到html标签中。HTMLElement的多个特点都有打点属性(意思是Element.prototype或HTMLElement.prototype上的性格可一向通过.格局拜访)与其对应:id,title,lang,dir,className。在DOM中以属天性局操作那个特征会共同到html标签中。因为class特性是这五种天性之1,能够透过className属性访问,xsf性格不在Element.prototype或HTMLElement.prototype对象中有对应属性所以经过质量访问格局赢得的值为undefiend。要想访问xsf天性值能够经过getAttribute(‘xsf’)(推荐)或getAttributeNode(‘xsf’).value或attributes[“xsf”].value访问。
威尼斯人线上娱乐 17
(2).当然成分还是能够通过三番五次HTML某成分Element.prototype上的一部分天性,比方input元素的HTMLInputElement.prototype上的disabled可以透过inputele.disabled获得或设置值。inputele.disabled;//
false表示该因素未棉被服装置disabled属性即未被禁止使用,inputele.disabled=true;//
代表为该因素设置不可用属性。

  attributes属性重要用于属性遍历。在须求将DOM结构体系化为HTML字符串时,好些个都会波及遍历成分本性

威尼斯人线上娱乐 18

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

(三).HTML伍标准对自定义性子做了巩固,只要自定义本性以’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特性值(在标签中定义的)中包含CSS文本
经过style属性访问归来1个CSSStyleDeclaration类型集结对象,由于style属性是用以以编制程序形式访问访问成分样式的之所以并不曾直接照射到style特性。该css属性来自竹签中被设置的style天性。
威尼斯人线上娱乐 21
并从未background天性值,能够见到不论通过哪些形式获取的结果都唯有成分上style个性设置的性质才会并发。
经过style属性再次来到了四个CSSStyleDeclaration类型实例集结,原型链承袭关系为:div.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype
威尼斯人线上娱乐 22
收获的聚合中的属性唯有已安装的才有值,别的的属性为空字符串即便它们都有私下认可值。
威尼斯人线上娱乐 23
简短学习下CSSStyleDeclaration接口:代表css键值对的集结,它在一部分API中被接纳

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

  • HTMLele.style 用于操作单个元素的样式(<ele style=”…”>)
  • 在getComputedStyle中央银行使:CSSStyleDeclaration是window.getComputedStyle()重临的只读接口,当中每一种键都有值,或被安装的值或暗中认可的值。

  关于文本节点,境遇最多的包容难题是空荡荡文本节点难题。IE八及以下浏览器不识别空白文本节点,而别的浏览器会识别空白文本节点
;所以有时大家须要清理空白文本节点;

ele.style.cssText:申明块的公文内容,修改这些天性会一向将标签中的style个性内容改造。
ele.style.length:属性的多寡即有具体值的css证明的多寡。window.getComputedStyle()重临值为26二。
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属性时会再次回到3个JavaScript函数(当onclick属性上不设有函数对象且未在要素标签中钦赐相应特性(为何说不是性质是因为倘诺在ele上未有找到onclick属性那就去标签中找onclick性格值)重临null)。由于存在这么些出入,在通过JavaScript以编制程序方式操作DOM时提出选取onclick属性值,唯有在获得自定义脾性值的景况下才通过getAttribute()访问。
当贰个要素标签中既有onclick本性,同时给ele.onclick内定函数(那操作并不会影响原本标签中onclick特性的值),则最终只试行ele.onclick属性的函数。
威尼斯人线上娱乐 24
并且经过getAttribute访问仍获得的是标签上的天性值,且不怕从前曾经给onclick属性赋值了但调节台展现成分自个儿并从未那个性格。小编不清楚为何document.body自个儿上会未有onclick属性,这当访问document.body.onclick时候去哪访问onclick的值,按着原型链吗?假使函数是在原型链上的onclick属性上也不应有啊HTMLElement.prototype.onclick=function(){console.log(②)}这样不就使那些办法成共享的了别的HTML成分实例都能访问,那明明不实际因为咱们只想为某一成分设置某事件函数。对于document.body本身上会没有onclick属性不通晓是否JS引擎内部贯彻的,尽管是那现实是怎么得以落成的?知道的盆友麻烦告知~

 <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>
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’)重返的不是字符串而是函数。即使IE八已修复该bug但不一样版本的不1致性照旧建议选拔性质访问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支持

  • 文件节点的 data 属性与 nodeValue 属性同样;
  • wholeText 属性将方今 Text 节点与毗邻的 Text
    节点,作为1个全体再次回到。大繁多气象下,wholeText 属性的重返值,与
    data 属性和 textContent 属性一样;
  • 文本节点的 length 属性保存着节点字符的数据,而且
    nodeValue.length、data.length 也保留着一样的值;   

设置特色

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

setAttribute(‘attr’,’value’):继承自Element.prototype。参数为要设置的性状名和值,若是天性已经存在,setAttribute()会以钦点值替换现成值,就算天性不设有,setAttribute会创立该属性并安装相应值。
经过该措施能够操作HTML性格也足以操作自定义天性,通过这些情势设置的特征名会被统1更动为小写方式即”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

  文本节点的操作与字符串的操作方法分外接近。一般地,我们得到文本都用
innerHTML,然后再去字符串的操作方法去操作。

注:<=IE柒中,setAtttribute()存在有的那多少个行为不但通过setAttribute()设置成分基本特色或事件性情没用而且经过点赋值法设置成分属性也不会反应到成分标签中。纵然到IE8才缓慢解决这几个bug,但依然引入用点赋值法设置特色。
removeAttribute():继承自Element.prototype,能够深透去除成分性格,不仅会消除性子值还会从要素中全然除去个性。该办法不常用,但在类别化DOM元素时,能够透过它来适合内定要含有哪些特征。

  • 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 甘休处的字符串,并回到该字符串。原来的文本节点无变化;

attributes属性

如上所述是作者给我们介绍的jacascript
DOM节点——元三秋点、属性节点、文本节点,希望对大家全体帮衬,假设大家有其它疑问请给自家留言,作者会及时回复我们的。在此也卓殊多谢我们对台本之家网站的支撑!

Element类型是行使attributes属性的唯一1个DOM节点类型,attributes属性承接自Element.prototype。它的值是NamedNodeMap类型实例,也是个动态集合,成分的每多少个表征都由贰个Attr类型节点表示,各个节点都保存在NamedNodeMap对象中。

你大概感兴趣的小说:

  • JavaScript
    DOM节点操作方法计算
  • js操作DOM–增多、删除节点的简易实例
  • JavaScript中对DOM节点的拜访、创制、修改、删除
  • javascript得到dom的下一个节点方法
  • javascript 获取HTML
    DOM父、子、临近节点
  • js和jquery对dom节点的操作(创造/追加)
  • js中使用DOM复制(克隆)钦定节点名数据到新的XML文件中的代码
  • javascript
    dom操作之cloneNode文本节点克隆使用本事
Object.getOwnPropertyNames(NamedNodeMap.prototype);//
["length", "item", "getNamedItem", "getNamedItemNS", 
"setNamedItem", "setNamedItemNS", "removeNamedItem", 
"removeNamedItemNS", "constructor"]

(一).getNamedItem(name):再次来到nodeName属性等于name的特点节点。

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

(二).removeNamedItem(name):从列表中移除nodeName等于name的节点。该办法与在要素上调用removeAttribute()方法效果同样,直接删除全数给定名称的天性节点。那三种方式唯壹的界别就是重临值,removeNamedItem重回被删除个性的Attr节点。

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

(三).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}

(四).item(pos):重返位于数字pos地点处的特征节点。 

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

attributes属性中富含1多级节点,假如想要遍历元素本性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字符串时,诸多都会波及遍历成分天性。以下代码展示了哪些迭代成分的每1个特征然后将它们协会成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对象中的顺序1致。
  • <=IE7会回到HTML成分全数异常的大可能率性子,包含没有点名的性状。针对IE7这一bug能够改良一下顺序,每一种特性节点都有三个specified(承继自Attr.prototype)的天性,specified=true表明要么是在HTML成分中钦命了对应脾性要么通过setAttribute()方法设置了该本性。在<=IE柒中不管有未有设置过某天性,某天性都有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中学以另1种方法使用createElement,即为这几个措施传入完整的成分标签也足以包涵属性,document.createElement(‘<div
id=”test”></div>’) 。那种方法有助于避开在IE七及更早版本中动态创制成分(document.createElement(‘div’)然后插入叫动态创立)的一点难点,在此以前存在以下那个题目:

  • 不能设置动态创制的<iframe>成分的name天性
  • 不能通过表单的reset()方法重设动态创立的<input>成分。
  • 动态成立的type本性值为”reset”的<button>成分重设不了表单。
  • 动态创造的一群name一样的单选按键互相毫非亲非故系,name值一样的1组单选开关本来应该用于表示壹致选项的例外值,但动态成立的一群那种单选开关之间却尚未那种关系。

上述全体标题都可因此在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类型实例集结是回去当前因素的后代(借使有多层嵌套的话回顾子成分和子成分的后人)。document.getElementsByTagName()是持续自Document.prototype。

参考

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


相关文章

发表评论

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

网站地图xml地图