国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

撲朔迷離的屬性和特性【徹底弄清】

pinecone / 2540人閱讀

摘要：從學(xué)習(xí)前端以來(lái)，屬性和特性已困惑我很久。注意啦，屬性和特性的一個(gè)關(guān)系出現(xiàn)了。以下除外屬性表明節(jié)點(diǎn)的類(lèi)型。與之前了解到的特性用來(lái)描述屬性的行為并無(wú)出入。下面，我們一起來(lái)看看屬性和特性是如何訪問(wèn)的。操作特性的方法主要有三個(gè)，分別是和。

從學(xué)習(xí)前端以來(lái)，屬性和特性已困惑我很久。今天使用jQuery時(shí)，又踩到了這個(gè)坑。于是下定決心，徹底搞懂它。

一、對(duì)象、屬性和特性的關(guān)系

先來(lái)看一下詞典的解釋?zhuān)?/p> 

property：1、財(cái)產(chǎn)、所有權(quán)、房地產(chǎn)；2、性質(zhì)、特性、屬性；
attribute：屬性、特質(zhì)、特性、品質(zhì)

好吧，除了財(cái)產(chǎn)、房地產(chǎn)（手動(dòng)斜眼），好像不能把他倆區(qū)分開(kāi)來(lái)。既然如此，我還是從專(zhuān)業(yè)書(shū)籍中尋找答案吧。《JavaScript高級(jí)程序設(shè)計(jì)》第6章：

ECMA-262把對(duì)象定義為：“無(wú)序屬性的集合，其屬性可以包含基本值、對(duì)象或者函數(shù)”。

“嗯...對(duì)象..的屬性..”
好像與對(duì)象有直接的聯(lián)系！property不是財(cái)產(chǎn)嗎？那我假裝property就是object的財(cái)產(chǎn)好了（手動(dòng)滑稽）。
來(lái)個(gè)例子吧：

var person = {
    name: “小明”,
    age: ‘26’,
    sayName: function(){
    alert(this.name);
    }
};

這里，name和age都是person對(duì)象的屬性。

這些屬性在創(chuàng)建時(shí)都帶有一些特征值（characteristic）， JavaScript 通過(guò)這些特征值來(lái)定義它們的行為。--《JavaScript高級(jí)程序設(shè)計(jì)》

簡(jiǎn)單點(diǎn)說(shuō)，屬性有特征值，用來(lái)定義屬性的行為。（注意啦，屬性和特性的一個(gè)關(guān)系出現(xiàn)了。）對(duì)于像name和age這樣的屬性，有4個(gè)特性描述它們的行為，分別是[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]]，這些特性描述了name和age屬性：
1、是否可以重新定義
2、是否可以用for-in循環(huán)返回屬性
3、是否可以修改
好的，我們到這里先打住，我們知道了，特性可以用來(lái)描述屬性的行為。

這里，我們自己創(chuàng)建的一個(gè)對(duì)象和DOM對(duì)象從直觀上來(lái)看，好像不太一樣。兩者不太容易產(chǎn)生聯(lián)系。那么，讓我們把目光聚焦到DOM（文檔對(duì)象模型）上吧，它可是如假包換的對(duì)象啊！

JavaScript 中的所有節(jié)點(diǎn)類(lèi)型都繼承自 Node 類(lèi)型，因此所有節(jié)點(diǎn)類(lèi)型都共享著相同的基本屬性和方法。(IE9以下除外)

nodetype屬性：表明節(jié)點(diǎn)的類(lèi)型。值為1表示節(jié)點(diǎn)是Element類(lèi)型，2是Attr類(lèi)型，3是Text類(lèi)型，等等
nodeName屬性：節(jié)點(diǎn)名稱(chēng)
nodeValue屬性：節(jié)點(diǎn)值
...
也就是說(shuō)，我們html中的div、ul、li等等都是node節(jié)點(diǎn)，而像id、class、type、title等是元素節(jié)點(diǎn)的特性，特性屬于Attr類(lèi)型，而特性是元素attributes屬性的節(jié)點(diǎn)。

看起來(lái)很繞，我們?cè)囍垡晦郏?b>div這樣的元素，它有attributes屬性，而id、class等是該屬性的節(jié)點(diǎn)，也就是說(shuō)，id和class這樣的特性是用來(lái)描述attributes屬性的。與之前了解到的“特性用來(lái)描述屬性的行為”并無(wú)出入。

到這里，我們小結(jié)一下。不論是person對(duì)象還是DOM對(duì)象（比如div），它們都有自己的屬性（property），而屬性又有一個(gè)叫特性（attribute）的東西來(lái)定義它的行為。好的，我們弄明白這三者的關(guān)系了。

但是，我們似乎還有一些謎團(tuán)沒(méi)有解開(kāi)。下面，我們一起來(lái)看看屬性和特性是如何訪問(wèn)的。

二、屬性和特性的訪問(wèn)

要訪問(wèn)對(duì)象的屬性，例如剛剛的person對(duì)象，我們可以用person.name來(lái)訪問(wèn)person對(duì)象的name屬性；對(duì)于DOM對(duì)象

，為了說(shuō)清楚問(wèn)題，我們先獲取對(duì)象的引用：

var oBox = document.getElementById("box");
//我們可以通過(guò)oBox.tagName訪問(wèn)tagName屬性和nodeType屬性
console.log(oBox.tagName);       //DIV
console.log(oBox.nodeType);      //1

可是，這很正常啊！問(wèn)題出現(xiàn)在：

//我們可以通過(guò)oBox.id獲取對(duì)象的id值
 console.log(oBox.id);           //box
 console.log(oBox.className);    //red

可能我們會(huì)覺(jué)得，這依然很正常啊！哪里不對(duì)嗎？

是的，這里不正常！因?yàn)閕d明明是oBox對(duì)象的attributes屬性中的節(jié)點(diǎn)，它又不是屬性，憑啥可以用oBox.id來(lái)訪問(wèn)？！可是我們當(dāng)初就是這么學(xué)的呀，一開(kāi)始就是這么使用的啊~

崩潰后，我們找到了答案，來(lái)自《JavaScript高級(jí)程序設(shè)計(jì)》：

所有HTML元素都由HTMLElement類(lèi)型表示，HTMLElement類(lèi)型直接繼承自Element并添加了一些屬性。添加的這些屬性分別對(duì)應(yīng)于每個(gè)HTML元素中都存在的下列標(biāo)準(zhǔn)特性：id、className、title等

啊，恍然大悟！快哉~

之所以能夠這么訪問(wèn)，原來(lái)是設(shè)計(jì)者的良苦用心啊，把id、class、title這樣的特性添加為html element的屬性id、className、title，這么訪問(wèn)不就方便了嗎？

到這里，迷霧已經(jīng)散去。我們漸漸看到了真相。

每個(gè)元素都有一或多個(gè)特性，這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息。操作特性的
DOM 方法主要有三個(gè)，分別是 getAttribute()、 setAttribute()和 removeAttribute()。這三
個(gè)方法可以針對(duì)任何特性使用，包括那些以 HTMLElement 類(lèi)型屬性的形式定義的特性。
console.log(oBox.getAttribute("id"));    //box
console.log(oBox.getAttribute("class")); //red

這樣，我們也明白了，為什么用getAttribute()訪問(wèn)class時(shí)，不需要用className的原因。

三、自定義特性和屬性 1.自定義特性

html：

js：

oBox.setAttribute("left","left");

不過(guò)，自定義的特性不能用屬性的方式來(lái)訪問(wèn)，

console.log(oBox.left);                 //undefined
console.log(oBox.getAttribute("left")); //left

另外，HTML5規(guī)范中，自定義特性應(yīng)該加上data-前綴，以便驗(yàn)證。

2.自定義屬性

其實(shí)，我們有用過(guò)“自定義”屬性，在設(shè)置定時(shí)器時(shí)，將timer綁定在元素上，不同的元素就有自己的定時(shí)器了。

oBox.timer = setTimeout(function(){
    //to do
},5000);

oBox2.timer = setTimeout(function(){
    //to do 2
},5000);

（完）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/51650.html

相關(guān)文章

  • 撲朔迷離的屬性和特性【徹底弄清】

    摘要：從學(xué)習(xí)前端以來(lái)，屬性和特性已困惑我很久。注意啦，屬性和特性的一個(gè)關(guān)系出現(xiàn)了。以下除外屬性表明節(jié)點(diǎn)的類(lèi)型。與之前了解到的特性用來(lái)描述屬性的行為并無(wú)出入。下面，我們一起來(lái)看看屬性和特性是如何訪問(wèn)的。操作特性的方法主要有三個(gè)，分別是和。 從學(xué)習(xí)前端以來(lái)，屬性和特性已困惑我很久。今天使用jQuery時(shí)，又踩到了這個(gè)坑。于是下定決心，徹底搞懂它。 一、對(duì)象、屬性和特性的關(guān)系 先來(lái)看一下詞典的解釋...

    harryhappy 評(píng)論0 收藏0

  • [PHP]一張圖片徹底弄清isset empty函數(shù)區(qū)別！！！

    摘要：如果還有人問(wèn)你兩者區(qū)別，馬上甩出這種圖有興趣可以往下閱讀，官方手冊(cè)給出的例子手冊(cè)這是一張將區(qū)別的表格，從表格中我們可以發(fā)現(xiàn)返回值等同返回值等同。 簡(jiǎn)單談一下isset和empty的區(qū)別？ 如果你是在面試，碰巧面試官提了這個(gè)問(wèn)題。你可以這樣回答： 如果變量值為0、空字符串、空數(shù)組等等，empty認(rèn)為它是空的，而isset認(rèn)為它不是空的。 如果變量不存在，isset和empty都認(rèn)為它是...

    venmos 評(píng)論0 收藏0

  • JS干貨｜ 瀏覽器缺陷、瀏覽器的缺陷修復(fù)等五大開(kāi)發(fā)問(wèn)題解決之道

    摘要：圖對(duì)可復(fù)用代碼挑戰(zhàn)最大的五項(xiàng)問(wèn)題五大開(kāi)發(fā)問(wèn)題如下。瀏覽器的缺陷修復(fù)。瀏覽器缺失的功能。復(fù)雜的地方是，當(dāng)前瀏覽器會(huì)在未來(lái)的瀏覽器版本中被修復(fù)。假設(shè)瀏覽器引起常見(jiàn)的網(wǎng)站問(wèn)題為解決瀏覽器使用特殊技巧，將來(lái)瀏覽器發(fā)布新版本修復(fù)了，就會(huì)出現(xiàn)問(wèn)題。 任意一段重要的代碼都需要關(guān)注無(wú)數(shù)的開(kāi)發(fā)問(wèn)題。但是，其中對(duì)可復(fù)用JavaScript代碼挑戰(zhàn)最大的五項(xiàng)問(wèn)題如圖14.2所示。 showImg(https...

    qiangdada 評(píng)論0 收藏0

  • 白話解釋 Javascript事件preventDefault,stopPropagation及re

    摘要：如圖使用事件捕獲模式注冊(cè)事件監(jiān)聽(tīng)對(duì)最外層，中間層，最內(nèi)層分別用捕獲模式注冊(cè)事件監(jiān)聽(tīng)，我們上面說(shuō)了，如果使用捕獲模式，那么第三個(gè)參數(shù)應(yīng)該是，否則則是冒泡模式，如果不聲明，默認(rèn)為冒泡模式。 來(lái)源: 個(gè)人博客 想必好多童鞋都有直接復(fù)制粘貼event.preventDefault() 或者event.stopPropagation() 的經(jīng)歷，但是為什么這樣做不甚了解，今天我們的目的就是要徹...

    chanjarster 評(píng)論0 收藏0

  • 萬(wàn)物之基礎(chǔ)——對(duì)象

    摘要：每個(gè)對(duì)象均有標(biāo)識(shí)符類(lèi)型值。通常我們認(rèn)為當(dāng)這些對(duì)象被垃圾回收機(jī)制回收時(shí)，它占用的外部資源即被釋放。造物主類(lèi)型對(duì)象的類(lèi)型幾乎影響了該對(duì)象的所有功能，在某種程度上，對(duì)象的標(biāo)識(shí)符也受其類(lèi)型的影響。 原文地址 對(duì)象 對(duì)象(Objects)是python中數(shù)據(jù)的抽象，python中所有的數(shù)據(jù)均可以用對(duì)象或者是對(duì)象之間的關(guān)系來(lái)表示。每個(gè)對(duì)象均有標(biāo)識(shí)符(identity)、類(lèi)型(type)、值(val...

    douzifly 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<