属性
HTML 元素由一个标签和一组属性组成。
HTML 属性作为 Element 的属性
表示 HTML 文档元素的 HTMLElement 对象定义了读/写属性,它们映射了元素的 HTML 属性。HTMLElement 定义了通用的 HTML 属性(id、class等)以及事件处理函数属性(onclick等)。我们可以基于属性 API 来获取和设置属性值:
var image = document.getElementById("myimage");
var imgurl = image.src;
image.class = "image";
有些属性在 JavaScript 中是保留字,对于这些属性,一般的规则是为属性名加前缀「html」,例如,HTML 的 for
属性在 JavaScript 中变为 htmlFor
属性,而 class
属性则是个例外,在 JavaScript 中是 className
。
HTML 的属性值通常是字符串,但也有例外,当属性为布尔值或数值时,属性值也是布尔值或数值,如checked
、selected
,事件处理程序属性值总是 Function
对象或 null
,任何 HTML 元素的 style
属性值都是 CSSStyleDeclaration
对象。
选取和设置非标准 HTML 属性
HTMLElement 和其子类型定义了一些属性,它们对应于元素的标准 HTML 属性。Element 类还定义了 getAttribute()
和 setAttribute()
方法来查询和设置非标准的 HTML 属性:
var image = document.images[0];
var width = parseInt(image.getAttribute("width"));
image.setAttribute("class", "thumbnail");
此外,Element 类还定义两个相关的方法:hasAttribute()
和 removeAttribute()
方法,分别用于检测命名属性是否存在和完全删除指定属性。
数据集属性
在 HTML 5 文档中,任意以「data-」为前缀的小写的属性名字都是合法的,这些「数据集属性」将不会对其元素的表现产生影响,它们定义了一种标准的、附加额外数据的方法,并不是在文档合法性上做出让步。
HTML 5 还在 Element 对象上定义了 dataset
属性,该属性指代一个对象,该对象的各个属性对应去掉「data-」前缀的属性,因此 dataset.x
应该对应 data-x
属性的值,带连字符的属性对应于驼峰命名法属性名,比如 data-jquery-test
属性对应 dataset.jqueryTest
属性。
看一个具体的例子:
<span class="sparkline" data-ymin="0" data-ymax="10">
1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1
</span>
为了生成火花线(sparkline),可以编写如下代码实现:
var sparklines = document.getElementsByClassName("sparkline");
for (var i = 0; i < sparklines.length; i++) {
var dataset = sparklines[i].dataset;
var ymin = parseFloat(dataset.ymin);
var ymax = parseFloat(dataset.ymax);
var data = sparklines[i].textContent.split(" ").map(parseFloat);
drawSparkline(sparklines[i], ymin, ymax, data); // 该方法暂未实现,留到以后通过 <canvas> 元素实现
}
作为 Attr 节点的属性
还有一种使用 Element 属性的方法,Node 类型定义了 attributes
属性。针对非 Element 对象,该属性为 null,对于 Element 对象,该属性是只读的类数组对象,它代表元素的所有属性,使用方式如下:
document.body.attributes[0] // 第一个属性
document.body.attributes.bgColor // bgColor属性
document.body.attributes["onload"] // onload属性
以上索引返回的都是 Attr 对象,Attr 对象是一类特殊的 Node,但不会像 Node 一样去用,Attr 的 name
和 value
属性返回该属性的名字和值。
No Comments