JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

程序员文章站 2024-03-23 10:14:10

...

一，对话框

一，对话框的分类

警告框 alert, 常用。
询问框返回提示框中的值。
确认框返回true/false.

1，警告框

alert(‘警告的内容’);

2，询问框

JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

 var name = prompt("您没有登录，请输入用户名：");
  alert("your name: " + name);

3，确认框

1.               var isLogin = confirm("您确认登录吗？");
2.                if (isLogin) {
3.                    alert("您同意登录");
4.                }
5.                else {
6.                    alert("您不同意登录");
7.                   // alert("您不同意登录2");
8.                }

JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

二，DOM对象

HTML DOM 树
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

简单的说，就是文档内部的一些”对话“

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

一，DOM Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

1，事件句柄　(Event Handlers) 也就是事件触发源

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）
2，鼠标 / 键盘属性

3，IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：【基本不怎么用，IE是个奇葩】
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）
4，相关实例

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
  {
  alert("您点击了鼠标右键！")
  }
else if(btnNum==0)
  {
  alert("您点击了鼠标左键！")
  }
else if(btnNum==1)
  {
  alert("您点击了鼠标中键！");
  }
else
  {
  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
  }
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
</html>

得到客户端的坐标

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>

得到键盘的事件

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>

得到屏幕的坐标

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>
</body>
</html>

二，DOM Document 对象【window.document.】

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示: Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象集合
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）
Document 对象属性

Document 对象方法

Document 对象描述

HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。

write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。

注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。

以上说明的使用方法是document.xxxx 或者 window.document.xxx

三，DOM Element 对象【元素对象】

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

四，DOM Attribute 对象【访问元素中的属性，先得到元素，再根据元素去访问属性】

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点

所有 HTML 元素是元素节点

所有 HTML 属性是属性节点

HTML 元素内的文本是文本节点

注释是注释节点cookie

注意，要访问属性必须是document文档加载完成才能访问，也就是script代码必须写到body之后

属性
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

document.getElementsByTagName(“button”)[0].attributes[0].name;

三，BOM对象

前言

定义：浏览器对象模型（Browser Object Model）尚无正式标准。
作用：浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

以下是所有的BOM对象

Window【掌握】
Screen【掌握】
Location【掌握】
History【掌握】
Navigator
PopupAlert
Timing
Cookies【熟悉】

一，Window

注意：Window 和window不是同一个东西

1.window.name=1;  
2.console.log(Window.name);//Window  
3.console.log(window.name);//1  
4.console.log(window instanceof  Window);//true

从上面的代码可以看出来Window并不等于window 通过instanceof进行判断window是Window的实例

1，所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById(“header”);

与下面的代码相同：

document.getElementById(“header”);

2，Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

1.<!DOCTYPE html>
2.<html>
3.<body>
4.
5.<p id="demo"></p>
6.
7.<script>
8.var w=window.innerWidth
9.|| document.documentElement.clientWidth
10.|| document.body.clientWidth;
11.
12.var h=window.innerHeight
13.|| document.documentElement.clientHeight
14.|| document.body.clientHeight;
15.
16.x=document.getElementById("demo");
17.x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
18.</script>
19.
20.</body>
21.</html>

其他 Window 方法

一些其他方法：

window.open(‘http://www.baidu.com’) - 打开新窗口

window.close() - 关闭当前窗口只能关闭使用window.open的窗口

window.moveTo(x,y) - 移动当前窗口

window.resizeTo(width,height) - 调整当前窗口的尺寸

window.setInterval(code,millisec[,“lang”])

1.<html>
2.<body>
3.
4.<input type="text" id="clock" size="35" />
5.<script language=javascript>
6.var int=self.setInterval("clock()",50)
7.function clock()
8.  {
9.  var t=new Date()
10.  document.getElementById("clock").value=t
11.  }
12.</script>
13.<button onclick="int=window.clearInterval(int)">Stop interval</button>
14.
15.</body>
16.</html>

window.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

一个时钟

1.<!DOCTYPE html>
2.<html>
3.    <head>
4.        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5.        <title>Untitled Document</title>
6.        <script>
7.            function showtime(){
8.                var d=new Date();
9.                var year=d.getFullYear();
10.                var month=d.getMonth();
11.                var day=d.getDay();
12.                var hours=d.getHours();
13.                var min=d.getMinutes();
14.                var sec=d.getSeconds();
15.                var misec=d.getMilliseconds();
16.                var str=year+"-"+month+"-"+day+" "+hours+":"+min+":"+sec+":"+misec;
17.                var mytime=window.document.getElementById("mytime");
18.                mytime.innerHTML=str;
19.                window.setTimeout('showtime()',1000);
20.            }
21.        </script>
22.    </head>
23.    <body onload="showtime()">
24.       	<div id="mytime" style="border: 2px solid; border-color: green;color: red;">
25.       	</div>
26.    </body>
27.
28.</html>

JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

二，Screen

window.screen 对象包含有关用户屏幕的信息。

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

可以宽度 screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

可用高度 screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

<script>
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

三，Location

window.location 对象在编写时可不使用 window 这个前缀。

对象属性
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）
对象方法

window.location.replace(“http://www.w3school.com.cn”)

window.location.assign(“http://www.w3school.com.cn”)

四，History

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）
例子

下面一行代码执行的操作与单击后退按钮执行的操作一样：

history.back()

下面一行代码执行的操作与单击两次后退按钮执行的操作一样：

history.go(-2)

五，Cookies【熟悉】

1，创建Cookie

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie=“username=Leijh”;

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：document.cookie=“username=Leijh; expires=Thu, 18 Dec 2017 12:00:00 GMT”;

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie=“username=Leijh; expires=Thu, 18 Dec 2017 12:00:00 GMT; path=/”;

2,读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

注意：document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

3，修改 Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie=“username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/”;

旧的 cookie 将被覆盖。

4，删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

注意，当您删除时不必指定 cookie 的值。

5，完整实例

1.<!DOCTYPE html>
2.<html>
3.<head>
4.<meta charset="utf-8">
5.<title>Cookies的使用</title>
6.</head>
7.<head>
8.<script>
9.function setCookie(cname,cvalue,exdays){
10.	var d = new Date();
11.	d.setTime(d.getTime()+(exdays*24*60*60*1000));
12.	var expires = "expires="+d.toGMTString();
13.	document.cookie = cname+"="+cvalue+"; "+expires;
14.}
15.function getCookie(cname){
16.	var name = cname + "=";
17.	var ca = document.cookie.split(';');
18.	for(var i=0; i<ca.length; i++) {
19.		var c = ca[i].trim();
20.		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
21.	}
22.	return "";
23.}
24.function checkCookie(){
25.	var user=getCookie("username");
26.	if (user!=""){
27.		alert("Welcome again " + user);
28.	}
29.	else {
30.		user = prompt("Please enter your name:","");
31.  		if (user!="" && user!=null){
32.    		setCookie("username",user,30);
33.    	}
34.	}
35.}
36.</script>
37.</head>
38.	
39.<body onload="checkCookie()"></body>
40.	
41.</html>

四，JavaScript对象

一，Date

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

二，Math

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

三，自定义对象

1.<script type="text/javascript">  
2.    function Person(name,age){  
3.        this.name=name;  
4.        this.age=age;  
5.    }  
6.    Person.prototype.sayHello=function(){  
7.        alert("使用原型得到Name："+this.name);  
8.    }  
9.    var per=new Person("马小倩",21);  
10.    per.sayHello(); //输出：使用原型得到Name:马小倩  
11.
12.      
13.    function Student(){}  
14.    Student.prototype=new Person("洪如彤",21);  
15.    var stu=new Student();  
16.    Student.prototype.grade=5;  
17.    Student.prototype.intr=function(){  
18.        alert(this.grade);  
19.    }  
20.    stu.sayHello();//输出：使用原型得到Name:洪如彤  
21.    stu.intr();//输出：5  
22.</script>

JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

文章目录

一，对话框

一，对话框的分类

1，警告框

2，询问框

3，确认框

二，DOM对象

一，DOM Event 对象

二，DOM Document 对象【window.document.】

三，DOM Element 对象【元素对象】

四，DOM Attribute 对象【访问元素中的属性，先得到元素，再根据元素去访问属性】

三，BOM对象

一，Window

二，Screen

三，Location

四，History

五，Cookies【熟悉】

四，JavaScript对象

一，Date

二，Math

三，自定义对象

JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

JavaScript 内容总结(DOM和BOM)(二)DOM事件高级

jquery对象和javascript对象即DOM对相互转换

javascript动态创建dom元素完整代码和使用详解

Javascript创建类和对象详解

实现JavaScript的组成----BOM和DOM详解

Javascript之BOM(window对象)详解

理解JavaScript中BOM和DOM的关系

JavaScript使用原型和原型链实现对象继承的方法详解

实现JavaScript的组成----BOM和DOM详解