網(wǎng)上有很多關(guān)于pos機(jī)設(shè)計(jì)元素, DOM元素的特性與屬性的知識(shí)，也有很多人為大家解答關(guān)于pos機(jī)設(shè)計(jì)元素的問題，今天pos機(jī)之家(www.dsth100338.com)為大家整理了關(guān)于這方面的知識(shí)，讓我們一起來看下吧!
本文目錄一覽：
pos機(jī)設(shè)計(jì)元素
拋磚引玉
很多前端類庫（比如dojo與JQuery）在涉及dom操作時(shí)都會(huì)見到兩個(gè)模塊：attr、prop。某天代碼復(fù)查時(shí)，見到一段為某節(jié)點(diǎn)設(shè)置文本的代碼：
attr.set(node, \'innerText\', \'Hello World!\')
這段代碼執(zhí)行后并未生效，雖說innerText不是標(biāo)準(zhǔn)屬性，尚未被ff支持，可用的是chrome，這個(gè)屬性是被支持的。既然顯示的文本沒變，那就查看一下元素吧。
innerText被添加到了html標(biāo)簽上，而換成prop模塊后，成功的為節(jié)點(diǎn)替換文本。
以上的這個(gè)小案例就涉及到了DOM操作時(shí)常常被忽略的一個(gè)問題：特性與屬性的區(qū)別
返本求源
在DOM中，特性指的是html標(biāo)簽上的屬性，比如：
Property是對于某一類型特征的描述?？梢赃@樣理解，在DOM元素中可以通過點(diǎn)語法訪問，又不是標(biāo)準(zhǔn)特性的都可以成為屬性。
DOM中所有的節(jié)點(diǎn)都實(shí)現(xiàn)了Node接口。Node接口是在DOM1級中定義的，其中定義了一些用來描述DOM節(jié)點(diǎn)的屬性和操作方法。
常見的nodeType、nodeValue、節(jié)點(diǎn)關(guān)系（parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等）都屬于Node接口定義的屬性。對于Node接口的具體實(shí)現(xiàn)者，HTMLElement不僅繼承了這些屬性，還擁有五個(gè)wac規(guī)范中的五個(gè)標(biāo)準(zhǔn)特性：id、title、lang、dir、class和一個(gè)屬性：attributes。
每一個(gè)元素都有一個(gè)或多個(gè)特性，這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息。通過DOM元素直接操作特性的的方法有三個(gè)：
getAttribute（attrName）
setAttribute（attrName， value）
removeAttribute（name）
這三個(gè)方法都可以操作自定義特性。但是只有公認(rèn)的（非自定義）特性才會(huì)以屬性的形式添加到DOM對象中，以屬性方式操作這些特性會(huì)被同步到html標(biāo)簽中。HTMLElement的五個(gè)特性都有相應(yīng)屬性與其對待：id、title、lang、dir、className。在DOM中以屬性方式操作這幾個(gè)特性會(huì)同步到html標(biāo)簽中。
不過，HTML5規(guī)范對自定義特性做了增強(qiáng)，只要自定義特性以”data-attrName”的形式寫入到html標(biāo)簽中，在DOM屬性中就可以通過element.dataset.attrName的形式來訪問自定義特性，如：
<input type="text" name="as_q" class="box" id="searched_content" title="在此輸入搜索內(nèi)容。" disabled="false" data-ff="fsdf">
seh.dataset.ff
元素的特性在DOM中以Attr類型來表示，Attr類型也實(shí)現(xiàn)了Node接口。Attr對象有三個(gè)屬性：name、value、specified。其中，name是特性的名稱，value是特性值，specified是一個(gè)布爾值，用來指示該特性是否被明確設(shè)置。
document.createAttribute方法可以用來創(chuàng)建特性節(jié)點(diǎn)。例如，要為元素添加align特性可以使用如下方法：
ar attr = document.createAttribute(\'align\')
attr.value = \'left\'
seh.setAttributeNode(attr)
要將新創(chuàng)建的特性添加到元素上，必須使用元素的setAttributeNode方法。添加特性后，特性會(huì)反映在html標(biāo)簽上：
注意，盡管特性節(jié)點(diǎn)也實(shí)現(xiàn)了Node接口，但特性卻不被認(rèn)為是DOM文檔樹的一部分。
在所有的DOM節(jié)點(diǎn)中attributes屬性是Element類型所獨(dú)有的的屬性。從技術(shù)角度來說，特性就是存在于元素的attributes屬性中的節(jié)點(diǎn)。attributes屬性屬于NamedNodeMap類型的實(shí)例。元素的每一個(gè)特性節(jié)點(diǎn)都保存在NamedNodeMap對象中。NamedNodeMap類型擁有如下方法：
getNamedItem(name)：返回特性名為name的特性節(jié)點(diǎn)
removeNamedItem(name)：刪除特性名為name的特性節(jié)點(diǎn)
setNamedItem(attr)：像元素中添加一個(gè)特性節(jié)點(diǎn)
item(pos)：返回位于數(shù)組pos處的節(jié)點(diǎn)
獲取、設(shè)置、刪除元素節(jié)點(diǎn)可以如下方式：
element.attributes.getNamedItem(\'align\') //獲取
var attr = document.createAttribute(\'align\');
attr.value = \'right\';
element.attributes.setNamedItem(attr); //添加
element.attributes.removeNamedItem(\'align\'); //刪除
實(shí)際應(yīng)用中并不建議使用特性節(jié)點(diǎn)的方式，而getAttribute、setAttribute、removeAttribute方法遠(yuǎn)比操作特性節(jié)點(diǎn)更方便。
DOM、attributes、Attr三者關(guān)系應(yīng)該這么畫：
應(yīng)用總結(jié)
基于以上DOM基礎(chǔ)知識(shí)和實(shí)際工作經(jīng)驗(yàn)，我將特性和屬性的區(qū)別聯(lián)系總結(jié)如下：
屬性以及公認(rèn)特性可以通過點(diǎn)語法訪問；html5規(guī)范中，data-*形式的自定義特性可以通過element.dataset.*的形式來訪問，否則用getAttribute
特性值只能是字符串，而屬性值可以是任意JavaScript支持的類型
幾個(gè)特殊特性：
1.style，通過getAttrbute和setAttribute來操作這個(gè)特性只能得到或設(shè)置字符串；而已屬性方式來操作就是在操作CSSStyleDeclaration對象
2.事件處理程序，通過特性方式得到和傳遞的都只是函數(shù)字符串；而已屬性方式操作的是函數(shù)對象
3.value，對于支持value的元素，最好通過屬性方式操作，而且操作不會(huì)反映在html標(biāo)簽上
seh.value = 10
<input type="text" name="as_q" class="box" id="searched_content" title="在此輸入搜索內(nèi)容。" disabled="false" data-ff="fsdf" align="left">
4.href，通過屬性方式設(shè)置可以反映到html標(biāo)簽上，但用過點(diǎn)語法和getAttribute能夠取到的值并不一定相同
<a href="/jsref/prop_checkbox_tabindex.asp" id="tabI">tabIndex</a>
link.getAttribute(\'href\') // "/jsref/prop_checkbox_tabindex.asp"
link.href // "http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp"
5.disabled和checked，對于支持這兩個(gè)特性的元素來說，他們在html標(biāo)簽中都是無狀態(tài)的，只要有獨(dú)立的標(biāo)簽屬性在以點(diǎn)語法訪問時(shí)就返回true，如果html標(biāo)簽屬性不存在，則以點(diǎn)語法訪問時(shí)就是false
<input type="text" name="as_q" class="box" id="searched_content" title="在此輸入搜索內(nèi)容。" disabled="false" data-ff="fsdf" align="left">
seh.disabled // true
seh.disabled = false
<input type="text" name="as_q" class="box" id="searched_content" title="在此輸入搜索內(nèi)容。" data-ff="fsdf" align="left">
以上就是關(guān)于pos機(jī)設(shè)計(jì)元素, DOM元素的特性與屬性的知識(shí)，后面我們會(huì)繼續(xù)為大家整理關(guān)于pos機(jī)設(shè)計(jì)元素的知識(shí)，希望能夠幫助到大家！
