1、DOM概述
DOM简介，以及BOM对window对象初步操作，相应的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!--
DOM:document object model——文档对象模型
用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签，文本，属性等）都封装成对象。
封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。
文档对象模型
文档：标记型文档。标记型文档包含标签，属性，标签中封装的数据（主要是文本）
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。
只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档：html,xml
DOM这种技术是如何对标记型文档机型操作的呢？
要操作标记型文档必须对其进行解析。
DOM技术的解析方式（35-33-1-11.20分析）：按照标签的层次关系对标签进行解析。
树中的标签以及文本甚至属性称为节点，也将节点称为对象。标签通常也称为页面中的元素。
注意：
这个DOM解析方式的好处：可以对树中的节点进行任意操作，比如：增删改查。
弊端：这种解析需要将整个标记型文档加载进内存。意味着如果标记型文档的体积很大，较为浪费内存空间。
简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准。
SAX解析的方式：基于事件驱动的解析。（35-33-3-4.18分析）
获取数据的速度很快，但是不能对标记进行增删改（可以查）
-->
<!--
DoM模型有三种：
DoM leve1 1：将html文档封装成对象。
DoM level 2：在level 1基础上加入了新功能，比如解析命名空间。
何为命名空间？当标签名相同时，我们必须通过xmlns定义命名空间来区分，一般使用域名作为命名空间（域名不重复）。可以在需要区分的标签上设置命名空间，也可以在这些标签的父标签设置命名空间。
<html xmlns="http://www.aina.com.cn">
<table></table>
</html>
<html xmlns=luhttp://wwnw.huyount.cons
<table></table>
</html></body>
DoM 1evel3：将xml文档封装成了对象。
-->
<!--
DHTML:动态的HTML。不是一门语言：是多项技术综合体的简称。
其中包含了HTML,CSS,DOM,Javascript。
这四个技术在动态html页面效果定义时，都处于什么样角色呢？负责什么样的职责呢？
HTML:负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
简单说：用标签封装数据。
CSS:负责提供样式属性，对标签中的数据进行样式的定义。
简单说：对数据进行样式定义
DOM:负责将标签型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作。
简单说：将文档和标签以及其他内容变成对象。
JS:负责提供程序设计语言，对页面中的对象进行逻辑操作。
简单说：负责页面的行为定义。就是页面的动态效果。
所以javascript是动态效果的主力编程语言。
DHTML+XMLhttpRequest = AJAX
-->
<!--（35-33-5开始分析）
我们HTML语言被浏览器解析后，其文档内容显示在浏览器上，而DOM技术可以将包含这些内容的文档封装为对象。
但是浏览器除了显示解析HTml的内容，还有其他的部分，我们想对浏览器的其他部分进行操作，使其具有动态。
这就需要使用另一个模型——BOM
BOM:Browser Object Model 浏览器对象模型。
这个模型方便于操作浏览器。（DOM方便于操作标记型文档）
浏览器对应的对象就是window对象，也就是说，我们的BOM技术主要就是对这个window对象进行操作。另外，要对这些对象进行操作，必须使用javascript技术（javascript技术本身提供了一些对象对标签和属性进行操作，但是这些对象想要处理整个页面还是不够，因此DOM与BOM技术为JS提供了更多的对象，方便于JS操作整个页面。）
window对象：代表浏览器中一个打开的窗口。（35-33-5-4.05解析）
关于window对象具体查阅dhtml文档，BOM操作的就是window对象！
-->
<script type="text/javascript" src="out.js"></script>
<!--演示BOM对浏览器对象window的操作
为了演示方便，定义一个事件源，通过对事件源的触发，获取想要的结果。
比如让用户通过点击按钮就可以知道浏览器的一些信息，要定义按钮 onclick事件的处理方式。
如果用户想在页面中获取浏览器的信息，就必须通过window对象来操作浏览器
这里是将浏览器窗口封装成为对象window（BOM技术），然后使用JS对对象进行操作
-->
<script type="text/javascript">
//演示navigator对象：包含关于 Web 浏览器的信息。
function windowObjDemo()
{
var name = window.navigator.appName;//注意APPName是属性而不是方法
var version = navigator.appVersion;//这里window对象可以省略，因为一旦窗体存在，window对象也就存在
println(name+"-----"+version);
//Netscape-----5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
}
//windowObjDemo();
//演示location：包含关于当前 URL 的信息。
function windowObjDemo2()
{
//var pro = location.protocol;
//var URLtext = location.href;
//println(pro+"---"+URLtext);
//给location的href属性设置一个值。改变了地址栏的值，并对其值进行了解析如果是http，还进行连接访问。
location.href = "http://www.sina.com.cn";//会跳转到相应的网址。
}
//windowObjDemo2();
//file:---file:///G:/JS%E6%BC%94%E7%A4%BA/dom_demo.html——我们最开始访问的是一个文件
</script>
<!--
上面是JS语言——功能只能通过JS的函数来定义。
下面使用HTML语言的表单，定义事件源，注册事件关联的动作
-->
<form>
<!--
这里将按钮动作设置为JS函数windowObjDemo2的内容，需要注意onclick设置的格式——"引用的JS函数名"
-->
<input type="button" value="演示window中的对象" onclick="windowObjDemo2()" />
<!--
出现一个"演示window中的对象"按钮，点击跳转到新浪
onclick里面的值是事件处理方式。我们使用input标签的onclick属性设置按钮的动作，而这个动作我们使用javascript的函数来定义。为了使得浏览器窗口能随着按钮做动作，我们在javascript的函数中使用BOM技术的window对象的属性与方法，这样就可以通过BOM的window对象操作浏览器窗口。
-->
</form>
<!--
JS的标签放在哪里？（35-33-6-10.20解析）
如果JS标签中的内容只为了处理页面中的某一个（几个）组件的话，将其放在该组件周围就可以。
如果JS标签中的内容处理的是页面中很多的标签，最好将其放在head中，这样才可以先加载
-->
</body>
</html>
2、window浏览器对象的常见方法
浏览器操作对象是window对象，使用的是BOM技术，它的常见方法及代码实例如下：
----------------------------------window_method.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!--首先是JS代码-->
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
var timeid;//定义一个全局变量，这样windowMethodDemo与stopTime方法都可以用到
function windowMethodDemo()
{
//confirm方法：显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。返回值是Boolean
//var b = window.confirm("确定要点击吗？");//同样，在由于页面创建就有window存在，因此window对象可以省略
//println("b:"+b);
//出现按钮“确定要点击吗？”，确定则打印true，取消则打印false
//setTimeout：经过指定毫秒值后计算一个表达式。
//window.setTimeout("alert('time out run')",4000);
//经过4秒后弹出窗体“time out run”
//setInterval：每经过指定毫秒值后计算一个表达式。
//注意，这样带返回值也会执行setInterval，同时会将其返回值赋予timeid，效果与不将返回值赋予某个变量的情形是一样的
timeid = window.setInterval("alert('interval run')",4000);
//每经过4秒弹出窗体“interval run”
}
function stopTime()
{
//clearInterval：使用 setInterval 方法取消先前开始的间隔事件。
//既将setInterval设置的连续事件停止下来，参数是setInterval的返回值。
window.clearInterval(timeid);
//在按下停止按钮之前，每隔4秒就会弹出一个窗口，按下停止后窗口不再弹出
}
//窗口移动
function windowMove()
{
//IE浏览器才有效果，而Chrome浏览器没有效果
//window.moveBy(10,10);//窗口分别向右边和下面移动10
//moveTo(80,40);//窗口移动到横坐标80纵坐标40的位置
for(var x=0; x<1000 ;x++)
{
moveBy(20,0);
最低0.47元/天 解锁文章
2003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
