您的位置:68399皇家赌场 > 服务器租用 > www.68399.com:jacascript DOM节点——成分节点、属性

www.68399.com:jacascript DOM节点——成分节点、属性

发布时间:2019-11-15 19:22编辑:服务器租用浏览(168)

    返本求源——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,这几个天性是被扶植的。既然展现的文件没变,那就翻开一下因素呢。
    www.68399.com 1

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

    以上的那个小案例就涉嫌到了DOM操作时日常被忽略的多个难题:脾性与品质的界别

    返本求源

    在DOM中,性子指的是html标签上的属性,举例:

    www.68399.com 2

    Property是对于某黄金年代连串特征的汇报。能够那样敞亮,在DOM成分中得以透过点语法访谈,又不是标准个性的都足以改为属性。

    DOM中保有的节点都贯彻了Node接口。Node接口是在DOM1级中定义的,在那之中定义了部分用来描述DOM节点的习性和操作方法。

    www.68399.com 3

    大面积的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等卡塔 尔(英语:State of Qatar)都归属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标签上:

    www.68399.com 4

    在乎,就算性格节点也落到实处了Node接口,但天性却不被感到是DOM文书档案树的生龙活虎某个。

    在具有的DOM节点中attributes属性是Element类型所独有的的习性。从技能角度来讲,天性正是存在于成分的attributes属性中的节点。attributes属性归于NamedNodeMap类型的实例。成分的每多个风味节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

    • getNamedItem(name):重回天性名字为name的特征节点
    • removeNamedItem(name):删除特性名字为name的特色节点
    • setNamedItem(attr):像成分中加多叁个风味节点
    • item(pos):重返位于数组pos处的节点

    赢得、设置、删除成分节点能够如下形式:

    JavaScript

    www.68399.com,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三者关系应该这么画:

    www.68399.com 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 收藏 评论

    www.68399.com 6

    IE:
    IE9~11
    www.68399.com 7
    IE5~8
    www.68399.com 8

    文本节点方法:

    在新成分上设置这一个特征只是给它们付与了相应新闻,由于新因素还未有被增添到文书档案树中,因而设置那些特征不会潜濡默化浏览器显示。要把新因素增添到文档树中,可应用appendChild(),insertBefore(),replaceChild()均一而再自Node.prototype。大器晚成旦将成分加多到文书档案树,浏览器就能即时显现该因素。从此以后对这几个成分所做的其他修改都会实时反映在浏览器中。
    在<=IE第88中学以另生机勃勃种艺术接受createElement,即为这些点子传入完整的成分标签也能够满含属性,document.createElement('<div id="test"></div>') 。这种方法有利于避开在IE7及更早版本中动态创形成分(document.createElement('div')然后插入叫动态创建卡塔 尔(英语:State of Qatar)的一些难点,以前存在以下那么些标题:

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

    要寻访成分标签名,能够用nodeName(世袭自Node.prototype卡塔尔国属性也可用tagName(世袭自Element.prototype卡塔 尔(阿拉伯语:قطر‎属性,这四个属性会再次回到肖似的值。但只顾重返的字符串是大写。在HTML中标具名始终以一切大写表示,而在XML中(一时也席卷XHTML卡塔 尔(英语:State of Qatar)标具名则始终会与源码中的保持生机勃勃致。若是你不显明本身的台本将会在HTML依旧XML中实行,最棒在可比前边举办高低写转变。

      文本节点的操作与字符串的操作方法极度附近。经常地,大家赢得文本都用 innerHTML,然后再去字符串的操作方法去操作。

    参考

      文本节点的四个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所包涵的文件,其父节点 parentNode 指向蕴含该公文节点的要金秋点,文本节点未有子节点;

     

    您恐怕感兴趣的篇章:

    • JavaScript DOM节点操作方法总计
    • js操作DOM--加多、删除节点的归纳实例
    • JavaScript中对DOM节点的拜见、创建、改良、删除
    • javascript获得dom的下三个节点方法
    • javascript 获取HTML DOM父、子、贴近节点
    • js和jquery对dom节点的操作(成立/追加)
    • js中动用DOM复制(克隆卡塔尔内定节点名数据到新的XML文件中的代码
    • javascript dom操作之cloneNode文本节点克隆使用技巧
    document.body.attributes.getNamedItem("id");// id="test"
    document.body.attributes[0].nodeName;// "id"
    

      成分节点就是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>
    

     

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

     

      属性节点还也可以有一个 specified 属性,specified 是壹个布尔值,用以区别个性是在代码中钦命的,依然暗中认可的。这一个性子的值如若为true,则意味在HTML中钦点了对应本性,也许是透过 setAttribute() 方法设置了该属性。在IE中,全部未安装过的特点的该属性值都为false,而在别的浏览器中,全部安装过的特色的该属性值都是true,未安装过的风味,假使强行为其设置 specified 属性,则报错。

    始建设成分

      操作属性的不二等秘书技首要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,能够本着其余性质使用,蕴含那个以HTMLElement类型属性的格局定义的本性;

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

      createAttribute(attr) 创立新的性质节点;

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

      关于文本节点,蒙受最多的包容难点是空荡荡文本节点难题。IE8及以下浏览器不识别空白文本节点,而此外浏览器会识别空白文本节点 ;所以不时候大家要求清理空白文本节点;

    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
    

      属性节点,有的叫天性节点,差十分的少叁个情趣;

    • 不可能安装动态制造的<iframe>成分的name特性
    • 不能够经过表单的reset()方法重设动态创设的<input>元素。
    • 动态创建的type特性值为"reset"的<button>成分重设不了表单。
    • 动态成立的一群name相符的单选按键互相毫非亲非故系,name值相近的大器晚成组单选按键本来应该用于表示后生可畏致选项的分裂值,但动态创制的一堆这种单选按键之间却不曾这种涉及。
     <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>
    

    注:<=IE7中,setAtttribute()存在一些特别行为不止通过setAttribute()设置成分基本特征或事件性格没用何况经过点赋值法设置成分属性也不会反射到成分标签中。固然到IE8才化解这一个bug,但照旧引入用点赋值法设置特色。
    removeAttribute():世襲自Element.prototype,能够深透剔除成分性情,不止会免去特性值还有或者会从要素中全然除去天性。该措施有的时候用,但在类别化DOM成分时,能够由此它来切合钦定要包涵如何特点。

      成分节点有八个 attributes 属性,它满含二个NamedNodeMap,包含当前因素全数的本性及属性值,与NodeList相仿,也是八个动态的集纳。成分的每贰特品质都由一个Attr节点表示,各种节点都保存在NamedNodeMap对象中,各个节点的 nodeName 便是性质的名称,节点的 nodeValue 正是性质的值;

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

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

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

    文件节点属性:

     

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

    文本节点

    (3).setNamedItem(attrnode):向列表中加多属性节点,以节点的nodeName属性为索引。

      成分的 childNodes 属性中蕴含了它的全部子节点,那些子节点恐怕是因素、文本、注释、管理指重三点;

    并不是对具备属性的修改都能直观在页面上海展览中心现出来。
    对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集结是即时更新的,因而豆蔻年华旦它里面含有的靶子爆发变动的话,该指标会自动更新到最新气象。
    www.68399.com 9

      其父节点 parentNode 指向富含该因新秋点的因金天点 Element 或文书档案节点 Document;

    HTML成分的四种规范个性(ele.attributes[index或'属性']或ele.getAttributeNode('属性')得到性剧情点卡塔 尔(英语:State of Qatar),能够拿走或改革。
    (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" 

      attributes属性包括以下多个办法:

    Chrome46.0.2490.80:
    www.68399.com 10
    FF44.0.2 :
    www.68399.com 11
    倘使须求通过childNodes属性遍历子节点,平常要先检查一下当前节点的nodeType属性。

    • 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属性

    要秋天点

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:www.68399.com:jacascript DOM节点——成分节点、属性

    关键词: 68399皇家赌场 HTML5 JavaScript

上一篇:DOM操作

下一篇:没有了