前言

在第一篇博客《了解JavaScript》中已经介绍了DOM及DOM树里顶端对象window，还有它的一个子对象

document。接下来会介绍它们的一些实用的对象和方法，如：

1、alert()、prompt()和confirm()与用户交互。

2、利用getElementById()选择页面元素。

3、使用innerHTML()访问HTML内容。

4、使用浏览器的history对象。

5、通过navigator对象获得浏览器信息。

6、利用Date对象操作日期和时间。

7、利用Math对象简化计算。

.1 与用户交互

在window对象的方法中，有一些是专门用于处理输入与输出信息时，从而实现页面与用户的交互。

1.1 alert()

alert()在前面的博客中已经出现了很多次了，它主要向用户弹出一个信息对话框，但这种模态对话框只是显示一

些消息和一个”确定“按钮。

注意：术语”模态“意味着脚本暂时停止运行，页面与用户交互也被暂停，直到用户关闭对话框为止。

alert()的用法如下范例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>function showAlert(){alert("Hello JavaScript");}</script>
</head>
<body><input type="button" value="ShowAlert" οnclick="showAlert()"/>
</body>
</html>

效果如下：

1.2 confirm()

与alert()方法相同的是，confirm()也弹出一个模态对话框，向用户显示一些信息。不同的是，confirm()对话框为

用户提供了一个选择，可以点击”确定“或”取消“按钮，而不只是一个”确定“按钮。点击任意一个按钮都会关闭对话框，

让脚本继续执行，但根据哪个按钮被单机，confirm()方法返回不同的值。如以下范例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>function showConfirm(){return confirm("是否继续？");}</script>
</head>
<body><input type="button" value="继续" οnclick="document.write(showConfirm())"/>
</body>
</html>

以上代码通过点击按钮调用showConfirm()方法，返回了点击按钮的状态，点击”确定“返回true，点击”取消“返回

false，并通过document.write()方法写入到页面中去。

效果如下：

1.3 prompt()

prompt()是打开模态对话框的另一种方式，它允许用户输入信息。prompt()对话框的调用方式与confirm()是一样

的。prompt()方法还可以有第二个可选参数，表示默认的输入内容，从而避免用户之间点击”确定“按钮而不输入任何

内容。如以下范例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>function showPrompt(){return prompt("请输入姓名","null");}</script>
</head>
<body><input type="button" value="编辑" οnclick="document.write(showPrompt())"/>
</body>
</html>

效果如下：

.2 根据id选择元素

如果想从HTML页面里选择某个特定id的元素，我们只需要把相应元素的id作为参数来调用document对象的

getElementById()方法，它就会返回特定id的页面元素所对应的DOM对象，如以下范例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>function getInputId(id){var inputId=document.getElementById(id);return inputId.value+"</br>"+inputId.id+"</br>"+inputId.type+"</br>";}</script>
</head>
<body><input id="button_1" type="button" value="编辑" οnclick="document.write(getInputId('button_1'))"/>
</body>
</html>

以上代码通过document对象的getElementById()方法获取id为"button_1"的input对象，并通过自定义函数

getInputId(id)获取input对象的value、id、type属性。（</br>是换行的意思）

效果如下：

innerHTML属性

innerHTML属性对于很多DOM对象来说都是一个很好用的属性，可以读取或设置特定页面元素内部的HTML内

容，如以下范例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>function setInnerHTML(id){document.getElementById(id).innerHTML="<p>改变了内容</p>";}function getInnerHTML(id){var inputInner=document.getElementById(id).innerHTML;return inputInner;}</script>
</head>
<body><div id="div_id"><p>DIV元素:是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。</p><h5>DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。</h5></div><input id="button_1" type="button" value="编辑" οnclick="setInnerHTML('div_id')"/><input id="button_2" type="button" value="显示" οnclick="document.write(getInnerHTML('div_id'))"/>
</body>
</html>

以上程序，我们设置了两个按钮，分别是”编辑“和”显示“。

1、通过点击”编辑“按钮，调用setInnerHTML('div_id')方法，通过：

document.getElementById(id).innerHTML="<p>改变了内容</p>";

通过documen.getElementById(id)方法获取id为‘div_id’的div对象，再通过innerHTML设置选定元素的内容。

2、通过点击“显示”按钮，调用getInnerHTML('div_id')方法，通过innerHTML获取<div>元素里的HTML内容。

效果如下：

-------------------------------------------------------------------------------------------------------------------------------------------------------

转载请注明出处：http://blog.csdn.net/hai_qing_xu_kong/article/details/48210607情绪控

DOM对象和内置对象（上）相关推荐

【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象
01 复习函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了函数作用:代码重用函数的参数: 1.形参:函数定义的时候,函数名字后面的小括号里的变量 2.实参:函数调 ...
JavaScript中本地对象、内置对象和宿主对象
http://www.jianshu.com/p/a52e6e183427 http://blog.csdn.net/weiyastory/article/details/52837466 http: ...
JavaScript内置对象（内置对象、查文档（MDN）、Math对象、日期对象、数组对象、字符串对象）
目录 JavaScript内置对象内置对象查文档 MDN Math对象 Math概述案例一:封装自己的对象随机数方法 random() 案例一:猜数字游戏日期对象 Date 概述 Date( ...
JS基础 -- 大复习(阶段六:对象和内置对象及预解析)
1.概念现实生活:对象就是东西,是一个具体的事物.万物皆对象程序角度: 对象是一组无序的数据的集合.包含属性与方法 2.对象的创建方式1:字面量 var person = { name ...
JavaScript 的自定义对象、内置对象、浏览器对象(window对象以及子对象)、Dom对象
JS 中的 Object从本质上看,Object 是一个构造函数,用于创建对象. console.dir(Object); //ƒ Object() var obj = new Object(1); ...
javascript对象分类（原生对象，内置对象）
<!-- javascript对象分类 javascript的对象大致可以分为以下几种: --原生对象:又名本地对象.native object.独立于宿主环境的ECMAScript实现提供的对 ...
JavaScript对象与内置对象——内置对象（二）
内置对象 JavaScript中的对象分为3种:自定义对象.内置对象,浏览器对象前两种对象是js基础内容,属于ECMAScript;的三个浏览器对象属于我们JS独有的. JavaScript提供多个 ...
JS的对象与内置对象详细介绍
感谢内容提供者:金牛区吴迪软件开发工作室文章目录前言一.基本对象Object: 二.内置对象之Array: 三.内置对象之Math: 四.内置对象之Number: 五.内置对象之String: ...
对象、内置对象、数组对象、字符串对象的使用
概念:无序的相关属性和方法的集合组成:属性.方法属性:特征方法:行为创建对象三种方式: 1.利用对象字面量创建对象{} var obj={};//创建一个空对象 var obj ={ unam ...
DOM对象和内置对象（中）
前言在第一篇博客<了解JavaScript>中已经介绍了DOM及DOM树里顶端对象window,还有它的一个子对象 document.接下来会介绍它们的一些实用的对象和方法,如: 1.a ...

DOM对象和内置对象（上）

前言

.1 与用户交互

1.1 alert()

1.2 confirm()

1.3 prompt()

.2 根据id选择元素

innerHTML属性

DOM对象和内置对象（上）相关推荐

最新文章

热门文章