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

資訊專欄INFORMATION COLUMN

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

harryhappy / 835人閱讀

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

從學習前端以來，屬性和特性已困惑我很久。今天使用jQuery時，又踩到了這個坑。于是下定決心，徹底搞懂它。

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

先來看一下詞典的解釋：

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

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

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

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

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

這里，name和age都是person對象的屬性。

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

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

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

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

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

看起來很繞，我們試著捋一捋，像div這樣的元素，它有attributes屬性，而id、class等是該屬性的節(jié)點，也就是說，id和class這樣的特性是用來描述attributes屬性的。與之前了解到的“特性用來描述屬性的行為”并無出入。

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

但是，我們似乎還有一些謎團沒有解開。下面，我們一起來看看屬性和特性是如何訪問的。

二、屬性和特性的訪問

要訪問對象的屬性，例如剛剛的person對象，我們可以用person.name來訪問person對象的name屬性；對于DOM對象

，為了說清楚問題，我們先獲取對象的引用：

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

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

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

可能我們會覺得，這依然很正常啊！哪里不對嗎？

是的，這里不正常！因為id明明是oBox對象的attributes屬性中的節(jié)點，它又不是屬性，憑啥可以用oBox.id來訪問？！可是我們當初就是這么學的呀，一開始就是這么使用的啊~

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

所有HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性。添加的這些屬性分別對應于每個HTML元素中都存在的下列標準特性：id、className、title等

啊，恍然大悟！快哉~

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

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

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

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

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

html：

js：

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

不過，自定義的特性不能用屬性的方式來訪問，

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

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

2.自定義屬性

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

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

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

（完）

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90598.html

相關(guān)文章

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

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

    pinecone 評論0 收藏0

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

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

    venmos 評論0 收藏0

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

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

    qiangdada 評論0 收藏0

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

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

    chanjarster 評論0 收藏0

  • 萬物之基礎(chǔ)——對象

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

    douzifly 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<