pos機(jī)設(shè)計(jì)元素, DOM元素的特性與屬性

 新聞資訊2  |   2023-06-11 12:45  |  投稿人:pos機(jī)之家

網(wǎng)上有很多關(guān)于pos機(jī)設(shè)計(jì)元素, DOM元素的特性與屬性的知識(shí),也有很多人為大家解答關(guān)于pos機(jī)設(shè)計(jì)元素的問題,今天pos機(jī)之家(www.dsth100338.com)為大家整理了關(guān)于這方面的知識(shí),讓我們一起來看下吧!

本文目錄一覽:

1、pos機(jī)設(shè)計(jì)元素

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

轉(zhuǎn)發(fā)請帶上網(wǎng)址:http://www.dsth100338.com/newsone/66475.html

你可能會(huì)喜歡:

版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 babsan@163.com 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除。