您的位置：首页 > Web前端 > HTML

（1）DOM概述、DHTML概述、window对象常用对象

2017-08-04 19:31 260 查看

一、DOM概述

DOM:Document Object Model(文档对象模型)

用于将标记文档封装成对象，并将标记型文档中的所有的内容（标签、文本、属性等）都封装成对象。

1）封装成对象的目的：为了更方便的操作这些文档以及文档中的所有内容

因为对象的出现就可以有属性和行为被调用

2）文档对象模型含义

文档：标记型文档

对象：封装了属性和行为的实例，可以被直接调用

模型：所有标记型文档都具备一些共型特征的体现

标记型文档（标签、属性、标签中的封装的数据）

3）只要是标记型文档，DOM这个技术都可以对其进行操作。常见的标记型文档：html、xml

DOM这种技术是如何对标记型文档进行操作的？

要操作标记型文档必须对其进行解析

4）DOM树

DOM技术的解析方式：将标记型文档解析一颗DOM数，并将书中的内容都封装成节点

将页面看成文档document

DOM解析方式的好处：可以将书中的节点进行任意操作，比如：增删改查

弊端：这种解析需要将整个标记型文档加载进内存，意味着如果标记型文档的内容的体积很大，较为浪费内存空间

DOM是W3C解析的标准

二、DOM3种模型

DOM level 1:将html文档封装成对象

DOM level 2：在level 1基础上加入了新功能，比如解析名称空间

名称空间：《html xmlns=”http://www.w3.org/1999/xhtml”》避免不同网页的标签冲突，http://www.w3.org/1999/xhtml是个域名，域名是唯一的，不会导致命名冲突

DOM level 3：将xml文档封装成对象

三、DHTML:

动态的HTML，不是语言，是多种语言综合体的简称：HTML、CSS、DOM、JavaScript

这四个技术在动态html页面效果定义时，都处于什么样的效果？负责什么样的职责？

①HTML:负责提供标签，对数据进行封装，目的是便于对该标签进行操作

简单说：用便签封装数据

②CSS:负责提供样式属性，对标签中的数据进行样式的定义

简单说：对数据新型样式定义

③DOM:负责将标记型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象的操作

简单说：将文档和标签以及其他内容变成对象

④JS:负责提供程序设计语言，对页面中的对象进行逻辑操作。

简单说：负责页面的行为定义，就是页面的动态效果

JavaScript是动态效果的主力编程语言

三、BOM：Browser Object Model

①window.navigator对象:包含关于Web浏览器的信息

<body>
<script type="text/javascript">
function windowDemo()
{
document.write("浏览器语言:"+window.navigator.browserLanguage+"<br/>");
document.write("浏览器版本:"+window.navigator.appVersion);
}
</script>

<!--定义事件源，并注册关联的事件-->
<input type="button" value="点击" onclick="windowDemo()" />
</body>

②window.location对象

//功能：点击按钮实现跳转网页，就是把域名给修改了，事件源仍然是按钮
<script type="text/java
ac86
script">
function windowDemo2()
{
// var pro=window.location.protocol;
//  var text=location.href;
//  println(pro);//因为不是网页，是个文件，所以协议是file
//  println(text);//获取的是URL：协议+文件绝对地址

//可以设置URL
location.href="http://www.sina.com.cn";
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航