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

by admin on 2019年10月3日

返本求源——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成分直接操作性子的的章程有多个:

  • 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标签上:

奥门威尼斯网址 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. 性格以及公众认同性格能够通过点语法访问;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

1.介绍:

上篇js便签笔记末尾提到了dom成分的Attribute和Property,本文简要介绍一下自家的敞亮。

实际上Attribute和Property那三个单词,翻译出来都以“属性”,《js高端程序设计》书中翻译为“个性”和“属性”,以示不同。

 

简易通晓,Attribute正是dom节点自带的属性,举个例子html中常用的id、class、title、align等:

奥门威尼斯网址 7

而Property是以此DOM元素作为靶子,其附加的内容,举个例子childNodes、firstChild等:

奥门威尼斯网址 8

 

  上一篇批注dojo/dom-attr的作品中大家精通在少数情形下,attr模块中会交给prop模块来管理。比如:

  上一篇返本求源中,我们从DOM基础的角度出发,计算了特色与品质的涉嫌。本文中,大家来探访dojo框架是何等管理个性与质量的。dojo框架中脾气的管理位于dojo/dom-attr模块属性的拍卖为与dojo/dom-prop模块中。

2.“脚踩多只船”:

其余,常用的Attribute,比如id、class、title等,已经被用作Property附加到DOM对象上,能够和Property同样取值和赋值。可是自定义的Attribute,就不会有如此的例外优待,比如:

<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>

那一个div里面包车型地铁“title1”就不会变成Property。

即,只倘使DOM标签中冒出的习性(html代码),都以Attribute。然后有些常用特性(id、class、title等),会被转正为Property。能够很形象的说,这几个特征/属性,是“足踏七只船”的。

奥门威尼斯网址 9

奥门威尼斯网址 10

 

末了注意:“class”产生Property之后叫做“className”,因为“class”是ECMA的要害字。以下代码等价:

1 var className = div1.className;
2 var className1 = div1.getAttribute("class");

 

  • textContent、innerHTML、className、htmlFor、value
  • disabled、checked等无状态脾性对应于属性中的布尔变量
  • 事件的拍卖

attr.set()

3.取值与赋值:

3.1. Attribute取值:

上一篇博客业已提到,能够由此div1.Attributes拿走具有的特色新闻,div1.Attributes将重回四个NamedNodeList类数组,个中蕴藏了若干个Attr类型的对象。《js高档程序设计》中涉嫌,为了便于操作,提议我们用setAttribute()和getAttribute()来操作就可以。

1 <div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div>
2 
3 var id = div1.getAttribute("id");              
4 var className1 = div1.getAttribute("class");
5 var title = div1.getAttribute("title");
6 var title1 = div1.getAttribute("title1");   //自定义特性

getAttribute()能够拿走别的天性,不管是正式的依然自定义的。

只是那几个主意的浏览器宽容性非凡,有些浏览器只怕会获取属性Property的值,由此jQuery要做一个测量检验,看getAttribute()是还是不是是相对获取天性Attribute的值。

div1.className = 'a';
var judge = div1.getAttribute("className") === 'a';

如果以上代码创造,表明getAttribute()方法出现了难题,将不再行使。

3.2. Attribute赋值:

1 div1.setAttribute('class', 'a');
2 div1.setAttribute('title', 'b');
3 div1.setAttribute('title1', 'c');
4 div1.setAttribute('title2', 'd');

用setAttrbute()赋值,任何Attribute都得以,富含自定义的。并且,赋值的Attribute会立即表现到DOM成分上。

奥门威尼斯网址 11

一旦是正经性子,也会更新它们关联的天性的值:

奥门威尼斯网址 12

末段注意,setAttribute()的两个参数,都必得是字符串。即对特色Attribute职能赋值字符串,而对品质Property就足以赋任何类型的值了。

 

3.3. Property取值:

个性取值很简单。取任何性质的只,用“.”就能够:

1 var id = div1.id;
2 var className = div1.className;
3 var childNodes = div1.childNodes;
4 var attrs = div1.attributes;

此处再一次重申:

第一,class个性在改为属性时,名字改成了“className”,因而div1.className和div1.getAttrbute(‘class’)同样。

第二,上面代码中的div1.attributes是取的attributes这一性情,收取来保存到attrs变量中,attrs就成了贰个NamedNodeList类型的目的,里面积存了多少个Attr类型。

 

3.4. Property赋值:

赋值和主导的js对象属性赋值一样,用“.”就能够:

div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];

对质量Property能够赋任何项目标值,而对特色Attribute只好赋值字符串!

别的,对于属性Property的赋值在IE中或者会挑起循环援引,内部存款和储蓄器泄漏。为了防止这些主题素材,jQuery.data()做了非常管理,解耦了数据和DOM对象,有乐趣能够精通以下。那不是本文的要紧,不做赘述。

 

  那这一节,大家便来看看prop对于属性的管理。

  方法的函数签字为:

4.style和onclick:

实质上style和onclick与id、class、title同样,也是“足踏五只船”,不过向id、class、title都以归纳的字符串值,用“.”和getAttribute()获取结果一律。然则对于style和onclick这两者,就不雷同了。

4.1. 用“.”获取Style:

<div id="div1" class="divClass" style="width:100%; padding:10px;">100</div>

console.log(div1.style);

上述代码中,重临了一个CSSStyleDeclaration对象,那个目的中隐含着体制的装有音讯:

奥门威尼斯网址 13

 

4.2. 用getAttribute()获取style:

<div id="div1" class="divClass" style="width:100%; padding:10px;">100</div>

console.log(div1.getAttribute("style"));

如上代码重返的正是二个简易的字符串:“width:百分百; padding:10px;”

 

4.3. 总结:

上边多个例证,用“.”获取的是style属性Property,我们得以给属性Property赋任何类型的值;而用getAttribute()获取的是特色Attribute,特性Attribute中不得不存贮字符串。两者的数据结构分裂,导致再次来到的结果分裂。

到此地,我们就没有需求再演示用“.”和getAttribute()获取onclick了,我们推测就会取得答案。。。

 

 

require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.set("myNode", "someAttr", "value");
});

5.总结:

正文简要介绍了DOM成分的性状(Attribute)和属性(Property),上边说一说入眼条款:

  • 特色和性质二者的囤积格局差别;
  • “2.脚踩多只船”要明白;
  • DOM属性大概会招致循环援用内存泄漏。

 

就写到这里呢,大家以为有供给补充的,即便建议意见!

  首先是三个正式名称字典,就要设置的品质名重新命名,制止与保留字的冲突:

  “someAttr”代表特性名称,但有的时候也足以是一些独特的属性名,如:‘textContent’:

exports.names = {
        // properties renamed to avoid clashes with reserved words
        "class": "className",
        "for": "htmlFor",
        // properties written as camelCase
        tabindex: "tabIndex",
        readonly: "readOnly",
        colspan: "colSpan",
        frameborder: "frameBorder",
        rowspan: "rowSpan",
        textcontent: "textContent",
        valuetype: "valueType"
    };

  奥门威尼斯网址 14

  比较dom-attr来讲,dom-prop模块独有八个公共函数:prop.get与prop.set

  能够见到上海教室中利用attr设置innerText只会在html标签中扩大innerText那么些自定义性子,而一点计策也施展不出改变文本,使用textContent却能够完毕改造文本的目标。其中缘由便是因为在attr模块创设了forceProps字典,在此字典中的key全体应用prop模块来设置:

  prop.get方法的函数具名字为:

        forcePropNames = {
            innerHTML:    1,
            textContent:1,
            className:    1,
            htmlFor:    has("ie"),
            value:        1
        }
// Dojo 1.7+ (AMD)
require(["dojo/dom-prop"], function(domProp){
  result = domProp.get("myNode", "someAttr");
});

  set()方法中至关心珍视要管理以下几件事:

  除了textContent属性外,别的间接以方括号语法从node中取值:node[prop];对于textContent属性,若是成分不匡助textContent,便以深度优先算法去获得成分下具有文件节点的nodevalue:

  • “someAttr”除了能够是字符串外,还是能是key-value对象,所以对于key-value对象我们先是要进行参数分解。
  • 若果someAttr等于style,就提交dojo/dom-style模块来拍卖
  • 上篇小说中大家说过,个性值只好是字符串,所以对于函数,私下认可是充任事件绑定到成分上,那有些交给dojo/dom-prop来拍卖;别的对于disabled、checked等无状态的品质,在经过质量设置时,只可以传递布尔值,所以那部分也提交prop来拍卖
  • 剩余的交由原生api,setAttribute来拍卖,那几个方法会自动调用value的toString方法

    exports.set = function setAttr(/DOMNode|String/ node, /String|Object/ name, /String?/ value){

        node = dom.byId(node);
        if(arguments.length == 2){ // inline'd type check
            // the object form of setter: the 2nd argument is a dictionary
            for(var x in name){
                exports.set(node, x, name[x]);
            }
            return node; // DomNode
        }
        var lc = name.toLowerCase(),
            propName = prop.names[lc] || name,
            forceProp = forcePropNames[propName];
        if(propName == "style" && typeof value != "string"){ // inline'd type check
            // special case: setting a style
            style.set(node, value);
            return node; // DomNode
        }
        if(forceProp || typeof value == "boolean" || lang.isFunction(value)){
            return prop.set(node, name, value);
        }
        // node's attribute
        node.setAttribute(attrNames[lc] || name, value);
        return node; // DomNode
    };
    
function getText(/*DOMNode*/node){
        var text = "", ch = node.childNodes;
        for(var i = 0, n; n = ch[i]; i++){
            //Skip comments.
            if(n.nodeType != 8){
                if(n.nodeType == 1){
                    text += getText(n);
                }else{
                    text += n.nodeValue;
                }
            }
        }
        return text;
    }

 

  因为innerText并非职业属性,所以这里弃之不用;以下正是get方法的源码:

attr.get()

exports.get = function getProp(/*DOMNode|String*/ node, /*String*/ name){
        node = dom.byId(node);
        //转化成标准属性
        var lc = name.toLowerCase(), propName = exports.names[lc] || name;
    //处理textContent这种特殊属性
        if(propName == "textContent" && !has("dom-textContent")){
            return getText(node);
        }

        return node[propName];    // Anything
    };

  方法的函数签名字为:

 

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.get("myNode", "someAttr");
});

  prop.set方法的函数签字为:

  为了解说方便,大家要先看一下get方法的源码:

require(["dojo/dom-prop"], function(domProp){
  result = domProp.set("myNode", "someAttr", "value");
});
exports.get = function getAttr(/*DOMNode|String*/ node, /*String*/ name){
        node = dom.byId(node);
        var lc = name.toLowerCase(),
            propName = prop.names[lc] || name,
            forceProp = forcePropNames[propName],
            value = node[propName];        // should we access this attribute via a property or via getAttribute()?

        if(forceProp && typeof value != "undefined"){
            // node's property
            return value;    // Anything
        }

        if(propName == "textContent"){
            return prop.get(node, propName);
        }

        if(propName != "href" && (typeof value == "boolean" || lang.isFunction(value))){
            // node's property
            return value;    // Anything
        }
        // node's attribute
        // we need _hasAttr() here to guard against IE returning a default value
        var attrName = attrNames[lc] || name;
        return _hasAttr(node, attrName) ? node.getAttribute(attrName) : null; // Anything
    };

  在attr.set方法中,相当多情状都提交prop来管理,下边我们将要看看prop中set方法的贯彻。

  1. 先获得的是多少个变量:propName、forceProp、value,
  2. 假设attrName属于forceProps集合,直接重回DOM节点的属性
  3. textContent显然位于forceProps中,为何还要单独拿出去做剖断?因为有的低版本的浏览器不帮忙textContent,大家必要运用深度优先算法,利用文本的节点的nodeValue由父到子依次拼接文本,那点jQuery与dojo的笔触都以一致的:

    1. dojo:

      function getText(/*DOMNode*/node){
              var text = "", ch = node.childNodes;
              for(var i = 0, n; n = ch[i]; i++){
                  //Skip comments.
                  if(n.nodeType != 8){
                      if(n.nodeType == 1){
                          text += getText(n);
                      }else{
                          text += n.nodeValue;
                      }
                  }
              }
              return text;
          }
      
    2. jQuery:奥门威尼斯网址 15

  4. set方法中提到过,对于布尔跟函数,交给prop来安装,那么取值时当然也要从prop中来取;至于为啥要单独拿出href,在“返本求源”中曾经说过,通过品质获得的href属性跟getAttribute方法赢得的值并不一定同样,尤其是非葡萄牙共和国语字符:奥门威尼斯网址 16
  5. 由prop模块该做的都做完了,所以那边判定node中是或不是留存该性酉时,无需理会forceProps字典;若是存在则调用getAttribute方法。

  set方法用来为成分的属性赋值,在实际上利用中需求管理以下三种情景:

 

  • 参数分解,借使一遍设置三个性格,为每一种属性分别设置
  • 纵然someAttr是“style”,则交给dom-style模块处理
  • 比如someAttr是innerHTML,因为一些成分(tbody、thead、tfoot、tr、td、th、caption、colgroup、col)不帮助innerHTML属性,所以须要曲线救国,这里首先将成分的子节点清除掉,然后使用dom-construct的toDom方法,将html片段转化成dom节点,作为子节点插入元素中
  • 设若someAttr是textContent,一样因为部分浏览器并不帮衬该属性,曲线救国的方法是先祛除成分的子节点,然后成立文本节点作为子节点插入成分中
  • 纵然value是function,则作为增多事件;对于event的拍卖特别不要选用prop模块还是引入应用on模块来绑定事件

    exports.set = function setProp(/*DOMNode|String*/ node, /*String|Object*/ name, /*String?*/ value){
        node = dom.byId(node);
        var l = arguments.length;
        //分解参数
        if(l == 2 && typeof name != "string"){ // inline'd type check
            for(var x in name){
                exports.set(node, x, name[x]);
            }
            return node; // DomNode
        }
        //如果要设置style,调用dom-style来处理
        var lc = name.toLowerCase(), propName = exports.names[lc] || name;
        if(propName == "style" && typeof value != "string"){ // inline'd type check
            // special case: setting a style
            style.set(node, value);
            return node; // DomNode
        }
        //如果是innerHTML,对于不支持innerHTML的节点,采用曲线救国的方式,否则直接设置innerHTML
        if(propName == "innerHTML"){
            // special case: assigning HTML
            // the hash lists elements with read-only innerHTML on IE
            if(has("ie") && node.tagName.toLowerCase() in {col: 1, colgroup: 1,
                        table: 1, tbody: 1, tfoot: 1, thead: 1, tr: 1, title: 1}){
                ctr.empty(node);
                node.appendChild(ctr.toDom(value, node.ownerDocument));
            }else{
                node[propName] = value;
            }
            return node; // DomNode
        }
        //如果不支持textContent,清除元素子节点后,添加文本节点
        if(propName == "textContent" && !has("dom-textContent")) {
            ctr.empty(node);
            node.appendChild(node.ownerDocument.createTextNode(value));
            return node;
        }
        //这一部分是通过prop来绑定事件,但并不建议用这种方式
        if(lang.isFunction(value)){
            // special case: assigning an event handler
            // clobber if we can
            var attrId = node[_attrId];
            if(!attrId){
                attrId = _ctr++;
                node[_attrId] = attrId;
            }
            if(!_evtHdlrMap[attrId]){
                _evtHdlrMap[attrId] = {};
            }
            var h = _evtHdlrMap[attrId][propName];
            if(h){
                //h.remove(); 如果曾经以类似的方式绑定过事件,则移除事件
                conn.disconnect(h);
            }else{
                try{
                    delete node[propName];
                }catch(e){}
            }
            // ensure that event objects are normalized, etc.
            if(value){//prop.get函数返回node,所以把handle放到_evtHdlrMap中
                //_evtHdlrMap[attrId][propName] = on(node, propName, value);
                _evtHdlrMap[attrId][propName] = conn.connect(node, propName, value);
            }else{
                node[propName] = null;
            }
            return node; // DomNode
        }
        node[propName] = value; //直接为属性赋值
        return node;    // DomNode
    };
    

attr.has

  若果您以为那篇小说对您有帮扶,请不吝点击右下方“推荐”,多谢~

  既然可以使用attr来set这一个属性,那在attr.has方法中,位于此字典中属性当然也要回去true,所以attr.has(node,
attrName)方法首要判定两个地点:

  • attrName是否是forceProps中的key
  • attrName是还是不是是三个风味节点。性剧情点为与元素的attributes属性中,能够由此:attributes[attrName]
    && attributes[attrName].specified 来判断

    exports.has = function hasAttr(/DOMNode|String/ node, /String/ name){

        var lc = name.toLowerCase();
        return forcePropNames[prop.names[lc] || name] || _hasAttr(dom.byId(node), attrNames[lc] || name);    // Boolean
    };
    

    function _hasAttr(node, name){

        var attr = node.getAttributeNode && node.getAttributeNode(name);
        return !!attr && attr.specified; // Boolean
    }
    

  

attr.remove

  那个办法相比轻易,直接调用了removeAttribute方法

exports.remove = function removeAttr(/*DOMNode|String*/ node, /*String*/ name){
        // summary:
        //        Removes an attribute from an HTML element.
        // node: DOMNode|String
        //        id or reference to the element to remove the attribute from
        // name: String
        //        the name of the attribute to remove

        dom.byId(node).removeAttribute(attrNames[name.toLowerCase()] || name);
    };

  

  只要您以为那篇小说对您有利于,请不吝点击右下方“推荐”,多谢~

发表评论

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

网站地图xml地图