篮球世界杯投注盘口DOM元素的特性与属性

来源:http://www.michaelspen.com 作者:html入门 人气:63 发布时间:2019-10-12
摘要:返本求源——DOM成分的特点与质量 2015/09/06 · HTML5,JavaScript ·DOM 篮球世界杯投注盘口,初藳出处: 木的树    引玉之砖 比相当多前端类库(比如dojo与JQuery)在提到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,这一个天性是被帮助的。既然突显的文件没变,那就翻开一下要素呢。
篮球世界杯投注盘口 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

本文由篮球世界杯投注盘口_篮球世界杯即时盘口发布于html入门,转载请注明出处:篮球世界杯投注盘口DOM元素的特性与属性

关键词:

上一篇:戏说HTML5

下一篇:没有了

最火资讯