DOM对象和内置对象

前端三剑客系列笔记

HTML

CSS

JavaScript

与用户交互与创建简单脚本
DOM对象和内置对象

---

---

前言

这篇笔记会介绍一些对象以及简单的方法。

---

一、与用户交互

主要有alert（）、confirm（）、prompt（）这三种方法。

alert（）
跳出一个包含一些信息和一个“OK”按钮的模态对话框。

alert（“This is my message");

confirm（）
跳出一个包含一些信息、一个“OK”按钮和一个“Cancel”按钮的模态对话框。confirm（）对话框会返回一个布尔值。可以把返回值赋给变量。

var answer=confirm（“Are you happy to continue?");

prompt（）
跳出一个包含一些信息、一个“OK”按钮、一个“Cancel”按钮和输入框的模态对话框。

var answer=prompt("What is your full name?");

prompt()还可以有第二个参数，表示默认的输入内容，从而避免用户直接点"OK"按钮而什么都不输入。

var answer=prompt("What is your full name?"，"John Doe");

如果用户输入了信息，再按"OK"按钮或回车键，返回值就是字符串；没输入就按“OK”按钮，就返回默认（如果有的话）；如果直接关闭或者“Cancel”的话，返回null。

二、根据id选择元素

1.getElementById( )方法

代码如下（示例）：
比如说有一个 < div >元素，通过下面的代码

var myDiv=document.getElementById("div1");

2.innerHTML属性

可以通过innerHTML属性进行元素内容的访问和修改。假设HTML页面包括如下元素

<div id="div1>
		<p>Here is some original text.</p>
</div>

则可以利用该元素进行修改。

document.getElementById("div1").innerHTML="<p>Here is some new text instead!</p>";

这样div中的HTML内容就是

<p>Here is some new text instead!</p>

三、访问浏览器历史记录

history对象
history对象有一个属性，就是它的长度，代表用户访问过的页面的数量。history有三个方法

history.forward();
history.backword();
history.go(2);

go方法也可以接收字符串

history.go(example.com");//到达历史记录列表里第一个包含“example.com”的URL

四、使用location对象

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

方法	说明
assign( )	载入一个新的页面
reload( )	重新载入当前页面
replace( )	用新的文档替换当前页面

可使用location对象导航，有两种方法。一种是直接设置href属性。这种方法会将原始页面保留在浏览器的历史记录里，用户可以利用浏览器的“Back”按钮方便地返回到之前的页面。还有一种方法是使用replace()方法。

location.href='www.newpage.com'；

五、navigator对象

Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

这个属性的作用有feature detection上位代替了，一般不怎么用了。

六、日期和时间

太多了，吐了
Date对象的属性和方法
设置Date对象的方法

七、Math对象

没有最多只有更多……
Math对象的属性和方法
使用Math对象的方法