js(1) - DOM操作-buukle

1. DOM操作

1.1 定义

document object model 文档（html/xml）对象模型
html文档加载到浏览器的内存中后，我们认为形成了一颗DOM树(家谱树)，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。
我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。

1.2 js的DOM的操作方法

1.2.1 标签元素的操作

1）获得元素对象：

根据id获得一个元素：getElementById(id属性值)
根据标签名称获得多个元素：getElementsByTagName(标签名称)
根据class属性获得多个元素：getElementsByClassName(class的属性值)
根据name属性获得多个元素：getElementsByName(name属性值)

2）创建一个新元素createElement()

3）将元素放到某个父元素的内部appendChild()

4）标签体的获取与设置：innerHTML

1.2.2 属性的操作

获得属性的值：getAtrribute(name)
设置属性的值：setAtrribute(name,value)
删除某个属性：removeAtrribute(name)

2. 内置对象

js的对象也分为自定义对象（通过函数模拟）和内置对象
与java一样，js也内置一些现成的对象供我们使用，js中内置对象有如下几个：

2.1 Array对象

Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。

2.1.1 创建数组对象的方式

创建一个空数组：var arr = new Array();
创建一个指定大的数组：var arr = new Array(size);
创建数组并填充元素：var arr = new Array(element0, element1, ..., elementn);
直接创建元素数组：var arr = [element0, element1, ..., elementn];

2.1.2 数组中元素的获取

跟java一样通过索引的方式获得数组中的元素：
获得数组中的一个元素：arr[0]

// 遍历获得数组中的所有元素
for(var i=0;i<arr.length;i++){
	alert(arr[i]);
}

2.1.3 多维数组操作

// js中的数组跟java中的集合相似，也就是数组中的元素还是以是数组
arr = [
		[1,2,3],
		[4,5,6],
		[7,8,9]                  
	]
// 获取数组中的8数字可以：arr[2][1];

2.2 日期对象

2.2.1 创建方式

创建当前日期时间：var date = new Date();
创建指定日期时间：var date = new Date(毫秒值);
其中毫秒值为1970-01-01至今的时间毫秒值

2.2.2 时间的获取

获得年：getFullYear() 从 Date 对象以四位数字返回年份。
获得月：getMonth() 从 Date 对象返回月份 (0 ~ 11)。
获得星期：getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
获得日：getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
获得毫秒值：getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

2.2.3 Math对象

Math对象是数学对象，是一个工具对象，因此Math对象不用使用new的方式创建，直接使用Math就可以调用对象内部的方法。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。

目录CONTENT

js(1) - DOM操作