菜单

jacascript DOM节点——元素节点、属性节点、文本节点

2019年2月7日 - 金沙前端

返本求源——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元素间接操作特性的的章程有多少个:

那三个法子都得以操作自定义特性。只是唯有公认的(非自定义)特性才会以属性的款型丰盛到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类型拥有如下方法:

获得、设置、删除元素节点能够如下情势:

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

  那段代码执行后尚未生效,虽说innerText不是正统属性,尚未被ff支持,可用的是chrome,这一个特性是被接济的。既然呈现的文书没变,那就翻开一下因素呢。

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">');
}

以上所述是小编给我们介绍的jacascript
DOM节点——元素节点、属性节点、文本节点,希望对大家所有接济,如若我们有其它疑问请给我留言,作者会及时回复我们的。在此也非凡感谢我们对台本之家网站的支撑!

返本求源

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

 

dataset属性继自HTMLElement.prototype,它的值是DOMStringMap的实例集合,原型链继承关系为:ele.dataset.__proto__->DOMStringMap.prototype->Object.prototype。
澳门金沙网上娱乐 7
(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特性。
澳门金沙网上娱乐 8
并从未background特性值,可以见到不论通过哪个方式赢得的结果都唯有元素上style特性设置的质量才会并发。
通过style属性再次来到了一个CSSStyleDeclaration类型实例集合,原型链继承关系为:div.style.__proto__->CSSStyleDeclaration.prototype->Object.prototype
澳门金沙网上娱乐 9
得到的聚众中的属性唯有已安装的才有值,其他的特性为空字符串即使它们都有默许值。
澳门金沙网上娱乐 10
不难学习下CSSStyleDeclaration接口:代表css键值对的会见,它在有些API中被应用

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

 

设置特色

 <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基础知识和实际工作经历,我将特色和性质的界别联系统计如下:

Chrome46.0.2490.80:
澳门金沙网上娱乐 11
FF44.0.2 :
澳门金沙网上娱乐 12
借使急需经过childNodes属性遍历子节点,平时要先检查一下当前节点的nodeType属性。

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

  澳门金沙网上娱乐 13

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

  属性节点还有一个 specified 属性,specified
是一个布尔值,用以不同特性是在代码中指定的,依然默许的。这几个特性的值如若为true,则表示在HTML中指定了对应特性,或者是因此setAttribute()
方法设置了该属性。在IE中,所有未设置过的特点的该属性值都为false,而在其余浏览器中,所有安装过的特色的该属性值都是true,未设置过的特色,借使强行为其安装
specified 属性,则报错。

  常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的性质。对于Node接口的切切实实贯彻者,HTMLElement不仅继承了那些属性,还怀有四个wac规范中的多个正规特性:id、title、lang、dir、class和一个品质:attributes。

目录

要素节点

ar attr = document.createAttribute('align')
attr.value = 'left'
seh.setAttributeNode(attr)
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;
}

质量节点

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

要素的childNodes属性(继承自Node.prototype)蕴含了它所有子节点,那些子节点可能是因素,文本节点,注释,处理指令。差距浏览器在对待这个节点方面存在分裂。

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

并不是对所有属性的修改都能直观在页面上显示出来。
对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集合是即时更新的,由此一旦它其中含有的目的发生转移的话,该目的会自动更新到最新情状。
澳门金沙网上娱乐 14

  属性节点,有的叫特性节点,几乎一个情趣;

 

HTML元素

  createAttribute(attr) 创设新的习性节点;

使用总括

安装特色的值:先获得特性节点然后将其nodeValue设置为新值。
当你设置document.body.id=”test”时候JS引擎内部可能落成了之类操作

  DOM中颇具的节点都达成了Node接口。Node接口是在DOM1级中定义的,其中定义了一部分用来讲述DOM节点的品质和操作方法。

(2).removeNamedItem(name):从列表中移除nodeName等于name的节点。该方法与在要素上调用removeAttribute()方法效果等同,直接删除所有给定名称的特性节点。那二种格局唯一的区分就是再次来到值,removeNamedItem重返被剔除特性的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>
attr.set(node, 'innerText', 'Hello World!')

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

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

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

document.body.getAttribute('onclick');// "(function(){console.log(1)})()"
document.body.onclick;// function (){
  console.log(2)
}
document.body.hasOwnProperty('onclick');// false

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

  document.createAttribute方法可以用来创建特性节点。例如,要为元素添加align特性可以应用如下方法:

在急需将DOM结构系列化为XML或HTML字符串时,多数都会涉嫌遍历元素特性。以下代码浮现了何等迭代元素的每一个特征然后将它们协会成name=”value”那样的键值对格局

  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是一个布尔值,用来提醒该特性是还是不是被明确设置。

(4).item(pos):再次回到位于数字pos地方处的性状节点。 

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

  那七个点子都得以操作自定义特性。唯独唯有公认的(非自定义)特性才会以属性的样式丰硕到DOM对象中,以属性格局操作这几个特征会被一起到html标签中。HTMLElement的七个特征都有对应属性与其相比较:id、title、lang、dir、className。在DOM中以属性形式操作那多少个特色会同步到html标签中。

上述所有难点都可经过在createElement()中指定完整的HTML标签来解决。

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

相关文章

发表评论

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

网站地图xml地图