JavaScript:
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。
BOM:主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。
-
BOM是Browser Object Model的缩写,即浏览器对象模型。
-
BOM没有相关标准。
-
BOM的最根本对象是window。
这些javascript的扩展包括:出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口大小 提供 Web 浏览器详细信息的定位对象 提供用户屏幕分辨率详细信息的屏幕对象 对 cookie 的支持 IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象。
从第1点可以看出来:BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口、打开新选项卡(标签页)、关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM。
从第2点可以看出来:由于没有标准,不同的浏览器实现同一功能,可以会有不同的实现方式。对于上面说的功能,不同的浏览器的实现功能所需要的JavaScript代码可能不相同。
例如加入收藏夹这么一个功能:
IE浏览器: window.external.AddFavorite(url,title);
FireFox浏览器: window.sidebar.addPanel(title, url, “”);
所以在写这一块的JavaScript代码时,就要考虑浏览器兼容性了。
虽然BOM没有一套标准,但是各个浏览器的常用功能的JavaScript代码还是大同小异的,对于常用的功能实际上已经有默认的标准了。所以不用过于担心浏览器兼容问题,不是每个浏览器都有自己的BOM,也不需要为每个浏览器都学习一套BOM,只是个别浏览器会有新增的功能会在BOM上体现出来。
DOM:是 HTML 和 XML 的应用程序接口(API)。
- DOM是Document Object Model的缩写,即文档对象模型。
- DOM是W3C的标准。[所有浏览器公共遵守的标准]
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] - DOM最根本对象是document(实际上是window.document)。
从第1点可以看出来:DOM和文档有关,这里的文档指的是网页,也就是HTML文档。网页是由服务器发送给客户端浏览器的,无论用什么浏览器,接收到的HTML都是一样的,所以DOM和浏览器无关,它关注的是网页本身的内容。由于和浏览器关系不大,所以标准就好定了。
那么JavaScript的DOM是干什么的呢?
我们知道HTML是由标签组成的,标签套标签。JavaScript可以通过DOM获取到底有哪些标签,标签里面的属性是什么,内容是什么等等…
BOM和DOM的关系:
BOM描述了与浏览器进行交互的方法和接口,DOM描述了处理网页内容的方法和接口。下面大致说一下JavaScript修改浏览器的过程:
javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,并且window对象又含有document属性,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。又因为document对象是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档,可能有点乱但下面会给出BOM和DOM关系的思维导图。
其中BOM包含Window对象
Window对象包含属性:document、location、navigator、screen、history、frames Document根节点包含子节点:forms、location、anchors、images、links
从window.document已然可以看出,DOM的最根本的对象是BOM的window对象的子对象。
关系的思维导图:
- window: 窗口对象, window对象中的属性称为全局属性,方法称为全局方法,调用时可以省略window。 window中常见的全局方法包括:
alert() 弹出提示框
comfirm() 弹出确认框
prompt() 弹出文本框
parseInt/Float()
isNaN() 判断变量是否是数 - window中常见的全局属性包括:
- location:位置
location.href 可以获取和修改浏览器的访问地址
location.reload(); 刷新页面 - history 历史
history.length 历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n正值前进 负值后退 - screen 屏幕
screen.width/height 屏幕宽高
screen.availWidth/availHeight 屏幕可用宽高 - navigator 导航/帮助
navigator.userAgent 获取浏览器的版本信息 - document 文档 DOM
###window里面常用的事件
6. 点击事件: onclick 当点击窗口页面内部任何区域触发
7. 页面加载完成事件: onload 当页面加载完成时触发
8. 页面获取焦点事件:onfocus 当用户返回页面时触发
9. 页面失去焦点事件:onblur 当用户离开页面时触发
window对象方法图:
BOM思维导向图:
window对象思维导图:
认识DOM:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>DOM</title>
</head>
<body>
h2>
<a href="http://www.baidu.com">javascript DOM</a>
</h2>
<p>对HTML元素进行操作,可添加、改变或移除css样式等</p>
<ul>
<li>Javascript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
将上述代码分解成DOM层次图:
HTML文档可以说由节点构成的集合,DOM节点有:** 1. 元素节点:上图中、、
等都是元素节点,即标签。 2. 文本节点:向用户展示的内容,如
- …
- 中的JavaScript、DOM、CSS等文本。 3. 属性节点:元素属性,如
标签的链接属性href=“http://www.baidu.com”。
节点属性节点属性nodeName返回一个字符串,其内容是节点的名字nodeType返回一个整数,这个数值代表给定节点的类型nodeValue返回给定节点的当前值
遍历节点树遍历节点树childNodes返回一个数组,这个数组由给定元素的子节点构成firstChild返回第一个子节点lastChild返回最后一个子节点parentNode返回一个给定节点的父节点nextSibling返回给定节点的下一个子节点previousSibling返回给定节点的上一个子节点
DOM操作DOM操作creatElement(element)创建一个新的元素节点creatTextNode()创建一个包含给定文本的新文本节点appendChild()指定节点的最后一个节点列表后添加一个新的子节insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面removeChild()从一个给定元素中删除子节点replaceChild()把一个给定父元素里的一个子节点替换为另外一个节点
DOM通过创建树来表示文档,描述了处理网页内容的方法和接口,从而使开发者对文档的内容和结构具有空前的控制力,用DOM API可以轻松地删除、添加和替换节点。
DOM基本操作思维图:
其实只要会用window的事件和DOM的方法就可以了