ylg娱乐官网返本求源——DOM成分的天性与质量

返本求源——DOM元素的特性与属性

2015/09/06 · HTML5,
JavaScript ·
DOM

原文出处: 木的树   

抛砖引玉

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

JavaScript

attr.set(node, ‘innerText’, ‘Hello World!’)

1
attr.set(node, ‘innerText’, ‘Hello World!’)

这段代码执行后并未生效,虽说innerText不是标准属性,尚未被ff支持,可用的是chrome,这个属性是被支持的。既然显示的文本没变,那就查看一下元素吧。
ylg娱乐官网 1

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

以上的这个小案例就涉及到了DOM操作时常常被忽略的一个问题:特性与属性的区别

返本求源

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

ylg娱乐官网 2

Property是对于某一类型特征的描述。可以这样理解,在DOM元素中可以通过点语法访问,又不是标准特性的都可以成为属性。

DOM中所有的节点都实现了Node接口。Node接口是在DOM1级中定义的,其中定义了一些用来描述DOM节点的属性和操作方法。

ylg娱乐官网 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标签上:

ylg娱乐官网 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三者关系应该这么画:

ylg娱乐官网 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 收藏
评论

ylg娱乐官网 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
ylg娱乐官网 7
ylg娱乐官网 8

元素节点

 

  元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;

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

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

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

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

要访问元素标签名,可以用nodeName(继承自Node.prototype)属性也可用tagName(继承自Element.prototype)属性,这两个属性会返回相同的值。但注意返回的字符串是大写。在HTML中标签名始终以全部大写表示,而在XML中(有时也包括XHTML)标签名则始终会与源码中的保持一致。假如你不确定自己的脚本将会在HTML还是XML中执行,最好在比较之前进行大小写转化。

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

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

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

 

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

ylg娱乐官网, 

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

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]; 来获取元素当前样式;

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>

(3).title:继承自HTMLElement.prototype。有关元素的附加说明信息,一般通过工具提示条显示出来。
(4).lang:继承自HTMLElement.prototype。元素内容的语言代码, document.documentElement.lang;//
“zh-cn” 
(5).dir:继承自HTMLElement.prototype。语言的方向,值为”ltr”(从左至右)或”rtl”(从右至左)。是规定语言内容的文本方向不是文字顺序颠倒。注意一点,应用dir=”rtl”后虽然对文本整体是方向性的改变,但对标点符号和文本整体却做了颠倒。其实很好理解,这个属性是规定语言的方向,从右向左读,句号肯定在读的顺序的最后也就是左边。在换行的时候还是从截断的文本整体偏向右侧。
ylg娱乐官网 9

  • obj.removeAttribute(attr)方法用于彻底删除元素的属性,这个方法不仅会彻底删除元素的属性值,还会删除元素属性。该方法无返回值;
<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>

并不是对所有属性的修改都能直观在页面上表现出来。
对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集合是即时更新的,因此如果它内部包含的对象发生改变的话,该对象会自动更新到最新状态。
ylg娱乐官网 10

属性节点

  • length:只读,返回映射(map)中对象的数量。

  属性节点,有的叫特性节点,差不多一个意思;

ylg娱乐官网 11

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

  • getNamedItem(str):返回一个给定名字对应的属性节点(Attr)
    ylg娱乐官网 12
  • setNamedItem(attr):替换或添加一个属性节点到映射map中,会直接反映到DOM中
    ylg娱乐官网 13
    ylg娱乐官网 14
  • removeNamedItem(str):移除一个属性节点,也会即时反映到文档的DOM树中
    ylg娱乐官网 15
  • item(idx):返回指定索引处的属性节点,当索引超出范围返回null
    ylg娱乐官网 16
  • getNamedItemNS():根据给定命名空间的参数和name返回一个attr对象
  • setNamedItemNS():替换,添加给定命名空间参数和name参数的attr对象
  • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

  属性节点还有一个 specified 属性,specified
是一个布尔值,用以区别特性是在代码中指定的,还是默认的。这个属性的值如果为true,则意味着在HTML中指定了相应特性,或者是通过
setAttribute()
方法设置了该属性。在IE中,所有未设置过的特性的该属性值都为false,而在其他浏览器中,所有设置过的特性的该属性值都是true,未设置过的特性,如果强行为其设置
specified 属性,则报错。

 

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

取得特性

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

(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对象中,以属性方式操作这些特性会被同步到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访问。
ylg娱乐官网 17
(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>

ylg娱乐官网 18

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

发表评论

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