JavaScript DOM笔记05

遍历数组

可以使用 for...in... 来快速遍历一个数组。其语法如下：

for (variable in array) {
statements
}

第一次进入循环，变量 variable 将被赋值为数组的第一个元素下标值如 0 ，第二次赋值为后一个元素下标值如 1 ……以此类推直到遍历完数组 array 的所有元素为止。

之所以这么设计是因为还存在着一种关联数组对象，在为数组添加新元素给出下标时使用字符串：

var arr = new Array();
arr["name"] = "hello";
arr["type"] = "Array";
// [name: 'hello', type: 'Array']

这种数组实际上是为对象添加新的属性，因此不推荐使用这种数组，而应该使用通用的对象。

不过这种数组的字符串下标将会在 for...in... 作为下标值返回，因此不管数组如何都可以通过 array[variable] 来遍历数组的每一个成员。

检查对象类型

对于任意对象，都可以使用 typeof 操作符获取获取一个对象的类型名称，得到的结果是一个字符串。例如：

typeof document // 'object'
typeof 2.5      // 'number'
typeof []       // 'object'

还可以使用 instanceof 关键字判断左边的对象是不是右边类型的一个实例，它会返回一个布尔值，例如：

window.onload instanceof Function  // true
"hello" instanceof String          // false
var s = new String();              
s instanceof String;               // true

注意它的判断方式比较复杂，可能会得到预想不到的结果。

数组的一些操作

可以使用数组对象的 .at(index) 来访问某一下标值位置的元素，类似于使用中括号访问。

数组对象的 .indexOf(elem) 方法可以找出某一元素第一次出现位置的索引值，即左起第一个匹配元素的下标。

类似地，.lastIndexOf(elem) 用来找出某一元素最后一次出现位置的索引值，即右起第一个匹配元素的下标。

使用 .slice(start, stop) 可以对数组进行切片，获得两个下标区间内前闭后开的子数组。

使用 .sort() 可以对数组对象进行排序。

以下是示例操作：

var arr = ["hello", 1, 5, 9, false];
arr.at(2)              // 5
arr.indexOf(5)         // 2
arr.lastIndexOf(false) // 4
arr.slice(2, 5)        // [5, 9, false]
arr.sort() 
arr                    // [1, 5, 9, false, 'hello']

CSS-DOM

文档每个元素结点还有一个属性 style ，包含元素的样式，查询该对象将返回一个对象而不是字符串。元素的样式都存放在这个对象的属性里。

可以直接通过它的属性来查询各种样式对应的值，例如：

var para = document.getElementsByTagName("para")[0];
para.style.color      // p { color: ... }
para.style.fontFamily // p { font-family: ... } 

注意样式属性名的连字符全部都转为了驼峰格式。

通过 style 属性获取样式有很大的局限性，因为它只能返回内联样式。

不过可以通过对该属性赋值去设置CSS属性，从而更新样式。

当使用CSS比较难以设置大批量属性时，就可以使用JavaScript。

每一个结点对象都有一个 className 属性，是代表元素类名的字符串。如果元素没有设置类名，它是一个空串。

使用该属性的优点是可以通过 += 操作符拼接字符串从而快速给元素增加一个类名。

一些零碎的语法

文章目录

系列文章

遍历数组

检查对象类型

数组的一些操作

CSS-DOM