網(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í),希望能夠幫助到大家!
