您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版从原型链看DOM,JavaScript高级程

1010cc时时彩经典版从原型链看DOM,JavaScript高级程

发布时间:2019-11-05 17:08编辑:1010cc时时彩客户端浏览(149)

    返本求源——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,那么些特性是被协理的。既然彰显的文件没变,那就翻开一下要素呢。
    1010cc时时彩经典版 1

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

    上述的这么些小案例就关乎到了DOM操作时平日被忽视的三个标题:性情与性格的区分

    返本求源

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

    1010cc时时彩经典版 2

    Property是对此某生机勃勃种类特征的陈诉。能够如此掌握,在DOM成分中得以因而点语法访谈,又不是明媒正礼特性的都得以形成属性。

    DOM中兼有的节点都贯彻了Node接口。Node接口是在DOM1级中定义的,当中定义了生龙活虎部分用来说述DOM节点的质量和操作方法。

    1010cc时时彩经典版 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标签上:

    1010cc时时彩经典版 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三者关系应该这样画:

    1010cc时时彩经典版 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 收藏 评论

    1010cc时时彩经典版 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
    1010cc时时彩经典版 7
    1010cc时时彩经典版 8

    要初秋点

    Array类型

    var arr = [];
    arr.length;     //返回数组元素个数
    

    转移length能够动态改造数组大小

     

      成分节点正是HTML标签成分,元上秋点重要提供了对成分标签字、子节点及质量的寻访;

    检查评定数组

    instanceof能够检验某些对象是否是数组,限定:只好是八个网页或八个大局成效域

    Array.isArray(arr);          //最终确定某个值到底是不是数组,没有限制
    

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

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

    调换方法

    arr.toString();                   //返回由数组每个值的字符串形式拼接而成的以逗号分隔的字符串
    arr.valueOf();                    //与toString方法一致
    arr.toLocalString();          //一般情况与toString和valueOf值一致,重定义则不一定
    

    注:toString方法会去调用每一种值的toString方法,toLocaleString会去调用各种值的toLocaleString方法

    arr.join("-");                    //以传入的字符串当做分隔符,返回字符串,不传值,以逗号分隔
    
    • nodeType值为1
    • nodeName值为成分标具名
    • nodeValue值为null
    • parentNode可能是Document或Element
    • 其子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

      其父节点 parentNode 指向包涵该因金秋点的成分节点 Element 或文书档案节点 Document;

    栈方法

    arr.push(arg1,arg2,arg3....);               //接收不限量的参数,按顺序添加到数组末尾,返回修改后数组的长度
    arr.pop();                                             //返回数组最后一项,并移出数组
    

    要访谈成分标签名,能够用nodeName(世袭自Node.prototype卡塔尔属性也可用tagName(世襲自Element.prototype卡塔 尔(阿拉伯语:قطر‎属性,那多个属性会再次回到相像的值。但只顾重回的字符串是大写。在HTML中标签名始终以任何大写表示,而在XML中(不时也席卷XHTML卡塔 尔(英语:State of Qatar)标具名则始终会与源码中的保持豆蔻梢头致。假诺你不分明自个儿的脚本将会在HTML依旧XML中进行,最棒在相比较前面进行高低写转变。

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

    队列方法(需和栈方法组合卡塔尔国

    arr.shift();                                             //移除数组第一项,并返回被移除项
    arr.unshift(arg1,arg2,arg3....);               //在数组前端添加任意项,并返回改变后数组长度
    
    document.documentElement.tagName;// "HTML"
    document.documentElement.nodeName;// "HTML"
    document.documentElement.nodeName.toLowerCase();// "html"
    

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

    重排序方法

    arr.reverse();                                        //反转数组
    arr.sort();                                             //将数组每一项都转成字符串形式,进行比较,升序排列
    arr.sort(function(){});                              //接收一个函数作为参数,根据函数返回值排序,前一项排在后一项后面,返回1,排在前,返回-1
    

     

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

    操作方法

    arr.concat(arg1,arg2,arg3,.....);          //不限制传入数量,可以是数组,可以是字符串,可以是数值
    arr.slice(arg1,arg2);                              //接收两个参数,要返回的起始项(可选)和结束位置(可选),不传最后一个参数,返回从起始项到数组末尾,不传参数,返回整个数组
    arr.splice(arg1,arg2,arg3);                    //arg1删除的第一项的位置,arg2删除的项数,arg3,可以是任意数量的字符串,用于删除后插入
    

    目录

      操作属性的法子重要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()五个,能够本着别的性质使用,包罗那个以HTMLElement类型属性的样式定义的性质;

    岗位方法

    arr.indexOf(arg1,arg2);                         //arg1查找的项,arg2查找起点(可选),从头查找,找到返回位置索引(以位置0开始),未找到返回-1
    arr.lastIndexOf(arg1,arg2);                    //与indexOf相反的查找方向,参数数量,意义一致
    
    • HTML元素
    • 获得天性
    • 设置特色
    • attributes属性
    • 始建变成分
    • 要素的子节点
    • obj.hasAttribute(attr)方法重返四个布尔值,表示如今因三秋点是还是不是包涵钦定属性;
    • IE6/IE7不支持 hasAttribute() 方法;
    • obj.hasAttribute(attr)检查评定 class 属性时,直接用 class 就能够了,不要用className;
    • obj.hasAttribute(attr)检验 for属性时,直接用 for就可以了,不要用htmlFor;

    迭代艺术

    arr.every(function(){});                            //对数组每一项运行参数函数,都返回true,才为true
    arr.filter(function(){});                            //对数组每一项运行参数函数,返回函数返回true的数组成员
    arr.forEach(function(){});                         //对数组每一项运行参数函数,没有返回值,改变数组元素
    arr.map(function(){});                              //对数组每一项运行参数函数,返回每次函数调用的结果组成的数组
    arr.some(function(){});                              //对数组每一项运行参数函数,只要有一项返回true,返回true
    function(item,index,array){}                    //参数函数,接收三个参数:数组项的值,该项在数组的位置,数组对象本身
    

     

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

    归总方法

    arr.reduce(function(){},initValue);               //迭代数组所有项,构建一个返回值,从数组第一项开始
    arr.reduceRight(function(){},initValue);          //迭代数组所有项,构建一个返回值,从数组最后一项开始
    function(prev,cur,index,array){}                    //参数函数,四个参数:前一个值(由前一次函数结果来确定),当前值,项的索引,数组对象
    initValue                                                       //可选
    

    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]; 来获取成分当前体制;

    DOM

    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>
    

    Node类型

    nodetype属性:节点类型,nodeName属性:节点名称,nodeValue属性:节点值

    每个节点皆有childNodes属性,保存NodeList对象,动态目标,有length属性,可以应用item()方法和方括号法访问。

    • parentNode属性,指向文档树父节点。
    • previousSibling属性:同一列表前三个节点
    • nextSibling属性:同一列表后多少个节点
    • firstChild属性:第二个头节点
    • lastChild属性:最后一个子节点
    • ownerDocument属性:指向任何文书档案的文书档案节点
    • hasChildNodes(node):在节点蕴涵三个或多少个子节点再次来到true
    • someNode.appendChild(newNode):在结尾贰个子节点之后参与节点
    • someNode.insertBefore(newNode,node):在参照他事他说加以考察节点此前插入节点,参照节点为null,结果与appendChild方法生龙活虎致
    • someNode.replaceChild(newNode,node):替换节点
    • someNode.removeChild(node):移除节点
    • someNode.cloneNode(Boolean):复制,true深复制,复制这几个节点及子树,false浅复制,只复制本节点
    • normalize();管理文书档案树中的文本节点,合併用的

    (3).title:继承自HTMLElement.prototype。有关因素的增大表达音讯,常常通过工具提醒条展现出来。
    (4).lang:世襲自HTMLElement.prototype。成分内容的言语代码, document.documentElement.lang;// "zh-cn" 
    (5).dir:继承自HTMLElement.prototype。语言的样子,值为"ltr"(从左至右卡塔 尔(英语:State of Qatar)或"rtl"(从右至左卡塔 尔(阿拉伯语:قطر‎。是明显语言内容的公文方向不是文字顺序颠倒。注意一点,应用dir="rtl"后虽说对文本全体是方向性的转移,但对标点符号和文件全部却做了颠倒。其实很好通晓,那些特性是分明语言的方向,从右向左读,句号断定在读的生龙活虎风姿洒脱的终极也正是左侧。在换行的时候依旧从截断的公文全体偏侧侧面。
    1010cc时时彩经典版 9

    • obj.removeAttribute(attr)方法用于通透到底删除成分的天性,这些措施不止会干净剔除元素的属性值,还大概会删除成分属性。该措施无重回值;

    Document类型

    js用以代表文书档案,是成套文书档案,不是有个别,即document对象

    • document.documentElement属性:指向<html>
    • document.body属性:指向<body>
    • document.doctype:指向<!DOCTYPE>
    • document.title:指向<title>
    • document.U传祺L:页面完整U揽胜L
    • document.domain:域名,可设置,同一域
    • document.referrer:保存着链接到当前页的可怜页面包车型客车ULANDL
    <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>
    

    查找元素

    • getElementById:接纳三个参数,要博取的因素的ID,严谨据守朗朗上口写匹配,五个id相像,重临第三个成分
    • getElementByTagName:选取七个参数,要赢得的要素标具名,再次回到NodeList,在HTML文档中回到HTMLCollection对象,动态集合,能够动用item()方法或方括号法访谈成分。
    • HTMLCollection对象,还也是有一个办法,namedItem,能够运用这几个主意通过成分的name天性拿到集结中的项。
    • getElementsByName():HTMLCollection类型才有的艺术。重返给定name本性的保有因素

    实际不是对具有属性的退换都能直观在页面上显现出来。
    对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集合是即时更新的,由此风姿罗曼蒂克旦它里面含有的指标产生改换的话,该对象会自动更新到新型状态。
    1010cc时时彩经典版 10

    属性节点

    非常规集合

    都是HTMLCollection对象

    • document.anchors:全数带有name特性的<a>
    • document.applets:所有<applets>
    • document.forms:所有<form>
    • document.images:所有<img>
    • document.links:所有带href的<a>
    • length:只读,重返映射(map)中目的的数目。

      属性节点,有的叫天性节点,差非常少二个意味;

    Element类型

    装有HTML成分都以HTMLElement类型,不然也是经过它的子类型表示。

    特性:

    • id:在文档中的唯生机勃勃标志符
    • title:有关因素附加表明,平常经过工具提醒条彰显出来
    • lang:成分内容语言代码,少之甚少使用
    • dir:语言方向,tlr(左向右卡塔尔,rlt(右向左卡塔尔,少之甚少使用
    • className:与成分class对应,为因素钦定的CSS类

    1010cc时时彩经典版 11

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

    获得性子

    • getAttribute():注意:传递的性子名与实际特点名相仿,因而要博取class天性,要传递"class",并不是"className",也足以收获自定义特性,天性是不区分朗朗上口写的注:常常经过对象属性来访谈天性,独有拿到自定义性情才使用getAttribute方法
    • setAttribute():接纳八个参数,要设置的特征名和值。已存在,替换,不设有,制造。设置的特色名会计统计生龙活虎改换为小写。
    • removeAttribute():接纳性格名。清楚特性值,并删除个性。
    • getNamedItem(str):重回叁个加以名字对应的习性节点(Attr卡塔 尔(英语:State of Qatar)
      1010cc时时彩经典版 12
    • setNamedItem(attr):替换或加上四个性格节点到映射map中,会直接展现到DOM中
      1010cc时时彩经典版 13
      1010cc时时彩经典版 14
    • removeNamedItem(str):移除三个天性节点,也会即时反映到文书档案的DOM树中
      1010cc时时彩经典版 15
    • item(idx):重返钦命索引处的性格节点,当索引超过范围重返null
      1010cc时时彩经典版 16
    • getNamedItemNS():依据给定命名空间的参数和name重临二个attr对象
    • setNamedItemNS():替换,增加给定命名空间参数和name参数的attr对象
    • removeNamedItemNS():移除给定命名空间参数和name参数的attr对象

      属性节点还应该有一个 specified 属性,specified 是三个布尔值,用以区别特性是在代码中钦赐的,照旧暗许的。那天性子的值假使为true,则象征在HTML中钦赐了相应本性,可能是经过 setAttribute() 方法设置了该属性。在IE中,全体未设置过的特点的该属性值都为false,而在别的浏览器中,全数安装过的风味的该属性值都以true,未设置过的表征,假若强行为其安装 specified 属性,则报错。

    attributes属性

    Element类型是当世无双接收attributes属性的独占鳌头一个DOM节点类型

    attributes属性中饱含三个NamedNodeMap,动态会集。成分每性格格都由一个Attr节点表示,每一个节点保存在NamedNodeMap对象中,对象具备的章程:

    • element.attributes.getNamedItem("id"):再次来到nodeName属性等于id的节点,简写:element.attributes["id"]
    • element.attributes.removeNamedItem("id"):移除nodeName属性等于name的节点
    • element.attributes.setNamedItem(node):很临时用的方法,为要素加多个性。

    attributes的点子相当不够便利,更加多的会利用getAttribute,setAttribute,removeAttribute方法。类别化倒是有用:

    function outputAttribute(element){
        var pairs = new Array(),
            attrName,
            attrValue,
            i,
            len;
    
        for(i=0,len=element.attributes.length;i<len;i  ){
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            pairs.push(attrName  = "=""   attrValue   """);
        }
    
        return pairs.join(" ");
    }
    

    出于IE7及更早版本会再次来到HTML中装有十分的大大概的风味,所以对上述函数加以改过,让它回到钦命性情。每一个特性节点都有二个specified属性,为true,要么在HTML中钦定了相应特性,要么通过setAttribute设置。校勘后代码:

    function outputAttribute(element){
        var pairs = new Array(),
            attrName,
            attrValue,
            i,
            len;
    
        for(i=0,len=element.attributes.length;i<len;i  ){
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            if(element.attributes[i].specified){
                pairs.push(attrName  = "=""   attrValue   """);
            }       
        }
    
        return pairs.join(" ");
    }
    

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版从原型链看DOM,JavaScript高级程

    关键词: