JavaScript DOM 4 - 屬性 attribute vs property

1: 獲取網頁元素的屬性值
HTML里面的標簽,都有一些屬性(attribute),比方:

<img src="//www.abc.com/logo.png" class='logo' id='logo'>

 

這里的'href', 'id'和'class'都是這個'<img>'元素的attribute。而在我們的HTMLElement里,定義了與之對應的屬性(property),通過引用它們,可以得到這些元素的attribute的價值,例如:


我們可以通過在在我們獲取的HTMLElement上用引用這些同名的property,就能獲得HTML元素對應的attribute的值。
但是,或許你注意到了,我們使用了'img.className'而不是'img.class'來獲取了這個圖片元素的class的值。這是因為,從attribute到property,并不是所有的都是同名的,是有一些規則的:

1: HTML的attribute不區分大小寫,但是javaScript的property是區分的。所以引用property時,應該用小寫。但是對于本身attribute是超過一個單詞的,property應該用駝峰,例如:defaultChecked, tabIndex
3: 如果attribute是javaScript的保留字,那對應的property是在attribute前面加'html'。比如'<label for='xxyyzz' id='lableExample'></label>',我們要通過‘htmlFor’來得到‘xxyyzz’. 但是‘class’是一個特殊,它的property是‘className’,而不是‘htmlCss’.

 

接下來看一個對照表:


2:設置網頁元素的屬性值
我們通過直接給HTMLElement的property賦值,就可以改變HTML元素的attribute的值。比如我們一開始有一段html:

<img src="//www.abc.com/logo.png" class='logo' id='logo'>

 

然后我們通過javaScript來改變它的src:

var img = document.getElementById('logo');
img.src = '//www.new.com/logo.png'

 

這個時候,我們再回去看我們的HTML, img元素的src就已經變了:


3: getAttribute()和setAttribute()
除了上面提到的,可以直接通過property來獲取和設置HTML元素的attribute值,javaScript還提供了額外的兩個方法:getAttribute()和setAttribute()?;故巧廈嫻哪歉鰅mg元素:

<img src="//www.abc.com/logo.png" class='logo' id='logo'>

 

1: 使用getAttribute()獲取attribute值

var img = document.getElementById('logo');
img.getAttribute('class'); //"logo red"

 

2: 使用setAttribute()來設置attribute值

var img = document.getElementById('logo');
img.setAttribute('src', '//www.new-again.com/logo.png');

 


咋看好像這兩個方法跟上面直接用property是一樣的,但是其實它們直接還是有一些差別的:

1: 返回結果類型不一樣
    1: 通過'element.property'這種方式返回的值的類型,跟attribute值的類型一樣??梢允親址?,布爾值得,對象,數字等。
    2: 通過'element.getAttribute()'返回的結果都是字符串類型,不管HTML元素的attribute值是什么類型。
2: 對屬性名名稱的對應規則不一樣
    1: 通過'element.property'這種方式,property的名字和HTML的attribute不一定一摸一樣,有些還要經過轉換之類的,比如:class->className, for->htmlFor
    2: 通過'element.getAttribute()'呢,參數名字和HTML的attribute名字一模一樣,比如:img.getAttribute('class')//參數是‘class’,而不是‘className’
3: getAttribute()可以獲取HTML元素的非標準的attribute值,但是'element.property'卻不能。

 

針對第三點做一個解釋,所以的‘非標準attribute’,就是只你自己給HTML元素加的attribute,比如:

<img src="//www.abc.com/logo.png" class='logo red' id='logo' job='as a logo'>

 

我們給<img>元素添加了一個‘job’ attribute, 然后嘗試用兩種不同的方法獲取它的值:

var img = document.getElementById('logo');
img.job;//undefined
img.getAttribute('job'); //'as a log'
img.setAttribute('job', 'hehe');// img元素的job屬性的值被改變
img.job = 'ff';//img元素的job的值沒有被改變,但是也不會拋錯,并且返回'ff'
來源:itnose

上一篇: 每天一個JS 小demo之通過事件委托實現菜單展開及選中特效。主要知識點:事件

下一篇: code war 天天一練(3)

分享到: 更多
时时彩稳赚刷量的方法 杀3停1输5赢6什么意思 北京pk10倍投能赢吗 长期跟踪稳赚六肖 pt老虎机平台大全 11选5前三胆拖投注表 打鱼游戏是赌博吗 北京pk拾赛车官网 幸运飞艇5码计划免费软件 天津时时助手安卓版 通比牛牛官网 双色球投注技巧18种 看4张牌抢庄斗牛app 后三组六稳赚方法8码 重庆时时彩龙虎和稳盈 怎样玩3d有什么技巧