网页编程day-42：JS中的对象

一、Array对象

1.数组的声明：

JS中的数组类似Java中的ArrayList，声明时可以不指定长度，长度是可变的，并且元素的类型可以混合存放。

（1）方式一：

var 数组名 = new Array（）；

（2）方式二：

var 数组名 = new Array（长度）；

（3）方式三(推荐)：

var 数组名 =[值1，值2...]；

（4）方式四：

var 数组名 = new Array（值1，值2...）;

2.数组的遍历：

（1）方式一（for）：

For（var i=0；i<arr.length;i++）{

console.log(Arr[i]);

}

（2）方式二（foreach）：

for(var i in arr){//i代表数组的下标

console.log(Arr[i]);

}

3.常用的方法：

1）push():向数组的末尾添加一个或多个元素，并返回新长度；

2）pop（）：删除并返回数组的最后一个元素；

3）unshift（）：移除第一个元素；

4）splice（index，length）：从指定下标开始，删除几个元素；

二、JS中的事件

1.什么是事件？

事件是可以被 JavaScript 侦测到的行为。

2.常用的事件：

1）onclick：鼠标点击某个对象；

2）ondblclik：鼠标双击某个对象；

3）onfocus：元素获得焦点；

4）onblur：元素失去焦点；

5）onchange：用户改变域的内容；

6）onmouseover：鼠标移上；

7）onmouseout：鼠标移出；

8）Onsubmit：提交；

9）onkeydown：键盘按下；

10）onkeyup：键盘被松开；

11）onmousemove：鼠标被移动；

三、BOM对象和DOM对象

1.BOM和DOM的关系：

（1）什么是Bom？

1）BOM是Browser Object Model的简写，即浏览器对象模型。

2）BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法；

3）BOM没有统一的标准(每种客户端都可以自定标准)。

4）BOM的顶层是window对象。

（2）什么是DOM？

1）DOM是Document Object Model的简写，即文档对象模型。

2）DOM用于XHTML、XML文档的应用程序接口(API)。

3）DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

4）DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

5）DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

6）DOM的顶层是document对象。

2.BOM对象Windows：

（1）三种弹框的方式：

1）Alert：只含有确实按钮；

2）Confirm：含有确定按钮和取消按钮的弹框；

3）Prompt：含有输入内容的弹窗；

（2）定时器：

1）SetTimeout：延迟指定的毫秒数调用一次函数，执行1次；

2）SetInterval：每隔指定的毫秒数调用一次函数，执行多次；

3）清除定时器：clearInterval（）/clearTimeout()；

（3）打开和关闭浏览器：

1）open（）：打开指定的页面；

2）close（）：关闭浏览器窗口；

3.location/history/navigator对象：

（1）Location对象：

1）Href：获取当前的URL地址；

2）Port：获取端口号；

3）Hostname：获取主机名称；

4）Host：获取主机加端口号；

5）Reload：刷新网页；

（2）history对象：

1）back（）：后退按钮；

2）forward（）：前进按钮

3）window.history.go(args)：args如果是正数表示前进指定的页面；如果是负数表示后退指定的页面。

（3）Screen对象：

1）Screen.height；Screen.width；获得屏幕分辨率。

（4）Navigator对象：

window.navigator.userAgent：返回由客户机发送服务器的 user-agent 头部的值。

4.DOM结构点类型：

（1）DOM节点分类：

1）元素节点 element node；

2）属性节点 attribute node ；

3）文本节点 text node；

（2）DOM节点的关系：

1）父子关系（parent-child）：<html> 元素作为父级，<head> 和 <body> 元素作为子级；

2）兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系；

（3）DOM操作的内容：

1）查询元素（进行操作元素、或者元素的属性、文本）；

2）操作文本；

3）操作属性；

4）操作CSS样式（一个特殊的属性style）；

5）操作元素；

5.DOM编程获得元素的方式：

（1）方式一（直接获得）：

1）通过id名称获得：

document.getElementById(id名称)；

2）通过name获得节点对象：

document.getElementsByName("name");

3）通过class 的名称获得对象：

ocument.getElementsByClassName("class");

（2）方式二（间接获得）：

1）获得div下的所有的子节点，空白的文本也是一个节点：div.childNodes;

2）Inp.previousElementSibling:获取当前节点的上一个节点不包含空文本；

3）Inp.nextElementSibling:获取当前节点的下一个节点不包含空文本；

6.操作元素属性：

（1）方式一：

1）直接操作修改元素的属性值；

var ty=inp1.type;

var va=inp1.value;

var na=inp1.name;