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

JavaScript---DOM技术、BOM模型演示、window对象

2017-05-06 21:23 453 查看

什么是DOM技术。。

DOM—Document Object Model 文档对象模型

dom技术: 把标记文档变成对象树，通过对这棵树中的对象进行操作(增删改查)，实现对文档内容的操作。

对dom对象树进行增删改查，产生的效果就是对页面内容进行增删改查!

文档:html页面，xml文档(文件)

简单的说就是帮整个网页（HTML或XML)封装成一个树，再通过对这个树进行操作。达到对整个文档内容进行增删改查的目的。

DOM树中的几个名词：

结点(节点)：dom树中的标签、文本和属性等都称为结点(节点).

元素：dom树中的标签。

子节点父节点(元素) 兄弟

父结点

主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象

既然都封装成了对象，那么就可以通过这些对象很方便地操作这些文档内容，达到操作页面内容–页面显示。

那么是怎么样把网页转化为树的呢—以下面代码为例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>湖南城院</title>
</head>
<body>
<div>div区域</div>
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>Jack</td>
<td>20</td>
</tr>

</table>
<form action="/abc">
name:
<input type="text">
</form>
<a href="1.html">查看</a>

</body>
</html>

页面中的标签,在DOM树中可以父亲节点，属性内容等只能当子节点。

DHTM:动态html技术，它不是一门语言，而是一项综合技术: html+css+js+dom

技术边界:

html: 提供标签，对数据进行封装。—-目的是便于对该标签中的数据进行操作

css: 提供样式属性，对标签中的数据进行样式定义

dom: 把标记文档解析成对象树，并且提供一些对树中对象进行操作的变量和函数

js: 提供程序设计语言，对页面中的对象进行逻辑操作 (if,for,…)

bom模型: browse object model 浏览器对象模型

dom模型针对的是页面内容，bom模型针对的是浏览器

dom: document对象代表的是整个文档页面

bom: window对象就是代表整个浏览器本身

BOM模型演示

window 对象：浏览器中的窗口。

navigator 对象

包含关于 Web 浏览器的信息。

属性— 描述

cookies— 是储存在客户端计算机上的。

cpuClass— 获取指示 CPU 等级的字符串。

onLine —获取表明系统是否处于全局脱机模式的值。

platform —获取用户的操作系统名称。

systemLanguage— 获取操作系统适用的默认语言。

userAgent —获取等同于 HTTP 用户代理请求头的字符串。

userLanguage —获取操作系统的自然语言设置

appCodeName— 获取浏览器的代码名称。

appMinorVersion— 获取应用程序的次版本值。

appName —获取浏览器的名称。

appVersion —获取浏览器运行的平台和版本。

browserLanguage —获取浏览器的当前语言。

cookieEnabled— 获取客户端的永久 cookie 是否在浏览器中启用。永久

。

部分代码代码演示

println 和 print 是out.js写的函数

function print(str){
document.write(str);
}

function println(str){
document.write(str+"<br/>");
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM模型演示</title>
</head>
<body>
<!-- 要进行bom编程，必须首先从window对象开始，该对象代表整个浏览器，在js编程时该对象存在而且在调用时还可以省略 -->
<input type="button" value="演示window中的对象" onclick=" demo();">
<script type="text/javascript">
function println(str){
document.write(str+"<br/>");  //window.document.write(str+"<br/>");
}
function demo(){
var appName = window.navigator.appName;
println(appName);
var browserLanguage = window.navigator.browserLanguage;
println(browserLanguage);
}
</script>
<br/><br/>
<input type="button" value="演示window中的对象2" onclick=" demo2();">
<script type="text/javascript">
function demo2(){
var href = window.location.href;
println(href);
println( window.location.port );
println( window.location.protocol );
println("11111");
println("22222");
}
</script>
<br/><br/>
<input type="button" value="演示window中的对象3" onclick=" demo3();">
<script type="text/javascript">
function demo3(){
//window.location.href ="http://www.sina.com.cn";
location.href ="http://www.sina.com.cn"; //在bom编程时，“window.”都是可以省略的
}
</script>

</body>
</html>

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

标签： 对象 xml html 文档

相关文章推荐

新的分享

章节导航