JavaScript 屬性的操作

目錄

HTML元素包括標(biāo)簽名和若干個(gè)鍵值對(duì)，這個(gè)鍵值對(duì)就稱為“屬性”（attribute）。

<a id="test" href="http://www.example.com">
  鏈接
</a>

上面代碼中，a元素包括兩個(gè)屬性：id屬性和href屬性。

在DOM中，屬性本身是一個(gè)對(duì)象（Attr對(duì)象），但是實(shí)際上，這個(gè)對(duì)象極少使用。一般都是通過(guò)元素節(jié)點(diǎn)對(duì)象（HTMlElement對(duì)象）來(lái)操作屬性。本節(jié)介紹如何操作這些屬性。

HTML元素對(duì)象有一個(gè)attributes屬性，返回一個(gè)類似數(shù)組的動(dòng)態(tài)對(duì)象，成員是該元素標(biāo)簽的所有屬性節(jié)點(diǎn)對(duì)象，屬性的實(shí)時(shí)變化都會(huì)反映在這個(gè)節(jié)點(diǎn)對(duì)象上。其他類型的節(jié)點(diǎn)對(duì)象，雖然也有attributes屬性，但是返回的都是null，因此可以把這個(gè)屬性視為元素對(duì)象獨(dú)有的。

document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes['ONLOAD']

注意，上面代碼中，第一行attributes[0]返回的是屬性節(jié)點(diǎn)對(duì)象，后兩行都返回屬性值。

屬性節(jié)點(diǎn)對(duì)象有name和value屬性，對(duì)應(yīng)該屬性的屬性名和屬性值，等同于nodeName屬性和nodeValue屬性。

// HTML代碼為
// <div id="mydiv">
var n = document.getElementById('mydiv');

n.attributes[0].name // "id"
n.attributes[0].nodeName // "id"

n.attributes[0].value // "mydiv"
n.attributes[0].nodeValue // "mydiv"

下面代碼可以遍歷一個(gè)元素節(jié)點(diǎn)的所有屬性。

var para = document.getElementsByTagName('p')[0];

if (para.hasAttributes()) {
  var attrs = para.attributes;
  var output = '';
  for(var i = attrs.length - 1; i >= 0; i--) {
    output += attrs[i].name + '->' + attrs[i].value;
  }
  result.value = output;
} else {
  result.value = 'No attributes to show';
}

HTML元素節(jié)點(diǎn)的標(biāo)準(zhǔn)屬性（即在標(biāo)準(zhǔn)中定義的屬性），會(huì)自動(dòng)成為元素節(jié)點(diǎn)對(duì)象的屬性。

var a = document.getElementById('test');
a.id // "test"
a.href // "http://www.example.com/"

上面代碼中，a元素標(biāo)簽的屬性id和href，自動(dòng)成為節(jié)點(diǎn)對(duì)象的屬性。

這些屬性都是可寫(xiě)的。

var img = document.getElementById('myImage');
img.src = 'http://www.example.com/image.jpg';

上面的寫(xiě)法，會(huì)立刻替換掉img對(duì)象的src屬性，即會(huì)顯示另外一張圖片。

這樣修改HTML屬性，常常用于添加表單的屬性。

var f = document.forms[0];
f.action = 'submit.php';
f.method = 'POST';

上面代碼為表單添加提交網(wǎng)址和提交方法。

注意，這種用法雖然可以讀寫(xiě)HTML屬性，但是無(wú)法刪除屬性，delete運(yùn)算符在這里不會(huì)生效。

HTML元素的屬性名是大小寫(xiě)不敏感的，但是JavaScript對(duì)象的屬性名是大小寫(xiě)敏感的。轉(zhuǎn)換規(guī)則是，轉(zhuǎn)為JavaScript屬性名時(shí)，一律采用小寫(xiě)。如果屬性名包括多個(gè)單詞，則采用駱駝拼寫(xiě)法，即從第二個(gè)單詞開(kāi)始，每個(gè)單詞的首字母采用大寫(xiě)，比如onClick。

有些HTML屬性名是JavaScript的保留字，轉(zhuǎn)為JavaScript屬性時(shí)，必須改名。主要是以下兩個(gè)。

• for屬性改為htmlFor
• class屬性改為className

另外，HTML屬性值一般都是字符串，但是JavaScript屬性會(huì)自動(dòng)轉(zhuǎn)換類型。比如，將字符串true轉(zhuǎn)為布爾值，將onClick的值轉(zhuǎn)為一個(gè)函數(shù)，將style屬性的值轉(zhuǎn)為一個(gè)CSSStyleDeclaration對(duì)象。

概述

元素節(jié)點(diǎn)提供四個(gè)方法，用來(lái)操作屬性。

• getAttribute()
• setAttribute()
• hasAttribute()
• removeAttribute()

其中，前兩個(gè)讀寫(xiě)屬性的方法，與前一部分HTML標(biāo)簽對(duì)象的屬性讀寫(xiě)，有三點(diǎn)差異。

（1）適用性

getAttribute()和setAttribute()對(duì)所有屬性（包括用戶自定義的屬性）都適用；HTML標(biāo)簽對(duì)象的屬性，只適用于標(biāo)準(zhǔn)屬性。

（2）返回值

getAttribute()只返回字符串，不會(huì)返回其他類型的值。HTML標(biāo)簽對(duì)象的屬性會(huì)返回各種類型的值，包括字符串、數(shù)值、布爾值或?qū)ο蟆?/p>

（3）屬性名

這些方法只接受屬性的標(biāo)準(zhǔn)名稱，不用改寫(xiě)保留字，比如for和class都可以直接使用。另外，這些方法對(duì)于屬性名是大小寫(xiě)不敏感的。

var image = document.images[0];
image.setAttribute('class', 'myImage');

上面代碼中，setAttribute方法直接使用class作為屬性名，不用寫(xiě)成className。

Element.getAttribute()

Element.getAttribute方法返回當(dāng)前元素節(jié)點(diǎn)的指定屬性。如果指定屬性不存在，則返回null。

// HTML代碼為
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"

Element.setAttribute()

Element.setAttribute方法用于為當(dāng)前元素節(jié)點(diǎn)新增屬性。如果同名屬性已存在，則相當(dāng)于編輯已存在的屬性。

var d = document.getElementById('d1');
d.setAttribute('align', 'center');

下面是對(duì)img元素的src屬性賦值的例子。

var myImage = document.querySelector('img');
myImage.setAttribute('src', 'path/to/example.png');

Element.hasAttribute()

Element.hasAttribute方法返回一個(gè)布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否包含指定屬性。

var d = document.getElementById('div1');

if (d.hasAttribute('align')) {
  d.setAttribute('align', 'center');
}

上面代碼檢查div節(jié)點(diǎn)是否含有align屬性。如果有，則設(shè)置為“居中對(duì)齊”。

Element.removeAttribute()

Element.removeAttribute方法用于從當(dāng)前元素節(jié)點(diǎn)移除屬性。

// HTML代碼為
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
// 現(xiàn)在的HTML代碼為
// <div id="div1" width="200px">

有時(shí)，需要在HTML元素上附加數(shù)據(jù)，供JavaScript腳本使用。一種解決方法是自定義屬性。

<div id="mydiv" foo="bar">

上面代碼為div元素自定義了foo屬性，然后可以用getAttribute()和setAttribute()讀寫(xiě)這個(gè)屬性。

var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')

這種方法雖然可以達(dá)到目的，但是會(huì)使得HTML元素的屬性不符合標(biāo)準(zhǔn)，導(dǎo)致網(wǎng)頁(yè)的HTML代碼通不過(guò)校驗(yàn)。

更好的解決方法是，使用標(biāo)準(zhǔn)提供的data-*屬性。

<div id="mydiv" data-foo="bar">

然后，使用元素節(jié)點(diǎn)對(duì)象的dataset屬性，它指向一個(gè)對(duì)象，可以用來(lái)操作HTML元素標(biāo)簽的data-*屬性。

var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'

上面代碼中，通過(guò)dataset.foo讀寫(xiě)data-foo屬性。

刪除一個(gè)data-*屬性，可以直接使用delete命令。

delete document.getElementById('myDiv').dataset.foo;

除了dataset屬性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*屬性。

注意，data-后面的屬性名有限制，只能包含字母、數(shù)字、連詞線（-）、點(diǎn)（.）、冒號(hào)（:）和下劃線（_)。而且，屬性名不應(yīng)該使用A到Z的大寫(xiě)字母，比如不能有data-helloWorld這樣的屬性名，而要寫(xiě)成data-hello-world。

轉(zhuǎn)成dataset的鍵名時(shí)，連詞線后面如果跟著一個(gè)小寫(xiě)字母，那么連詞線會(huì)被移除，該小寫(xiě)字母轉(zhuǎn)為大寫(xiě)字母，其他字符不變。反過(guò)來(lái)，dataset的鍵名轉(zhuǎn)成屬性名時(shí)，所有大寫(xiě)字母都會(huì)被轉(zhuǎn)成連詞線+該字母的小寫(xiě)形式，其他字符不變。比如，dataset.helloWorld會(huì)轉(zhuǎn)成data-hello-world。