第五章 浏览器中的javascript
1.<script>标签
该标签通常放在<head>中。如果声明了src属性,则<script>标签中的代码可能无效(由浏览器决定),若没声明,则可以写任何代码
2.内嵌代码和外部文件
一般认为,大量的js代码不应内嵌入html中
理由是:安全性,代码维护,缓存
3.建议在<body>中,只使用事件注册函数
4.在开始载入页面时,js就开始运行了。<head>和<body>均属于window下作用域,但细分不同。<head>标签中无法访问<body>标签中的函数,同名函数两个作用域也互不影响。
5.js代码隐藏。若支持js,则忽略//--> 执行<script>标签; 而不支持js,则
<script type="text/javascript"><!--
function(){
alert("a");
}
</script>
6.BOM
window对象是整个BOM的核心,所有对象和集合都以某种方式回接到window对象。
7.window对象
window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,对着对它产生其他影响
window对象有两个实例,top和parent,top始终指向浏览器的顶层窗口,及浏览器自身。而parent对象与
1.窗口操作
moveBy(dx,dy) moveTo(dx,dy) resizeBy(dw,dh) resizeTo(w,h) 直接传number就可以,浏览器窗口碰边就不在移动
2.浏览器窗口位置
IE中 window.screenLeft和window.screenTop来判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小(显示HTML页的区域),但他们不是标准属性
Mozilla和Opera中 window.screenX和window.screenY来判断窗口的位置。window.innerWidth和window.innerHeight来判断视口大小
3.系统对话框 (模态)
alert()
confirm() 返回boolean,判断用户点击确定还是取消
4.状态栏 貌似IE 火狐都不支持这个属性
defaultStatus和status两个属性
defaultStatus 永久改变
status 改变一下
5.时间间隔和暂停
js支持暂停和时间间隔,这可有效的告诉浏览器应该何时执行某行代码
window对象的setTimeout()方法设置暂停。该方法接受两个参数,要执行的代码和在执行它之前要等待的毫秒数
要取消还未执行的暂停,可调用clearTimeout()方法,并将暂停ID传递给它
window对象的setInternal()方法设置间隔
clearInternal()清除
6.历史 history属性
可以访问浏览器窗口的历史个数,但是不能访问URL,处于安全考虑
go()方法只有一个参数,前进或后退的页面数。window.history.go(1) window.history.go(-1)
back() forward()方法
7.document对象 唯一一个既属于BOM又属于DOM的对象。在BOM角度看,document对象由一系列集合构成,这些集合可以提供页面自身的信息。由于BOM没有可以知道实现的标准,所以各个浏览器的document对象都稍有不同
document对象实际上是window对象的属性。
document.lastModified 最后修改页面的日期,是字符串
document.referrer 浏览器历史中后悔一个位置的URL
document.title 浏览器历史中后退一个位置的URL
document.URL 当前载入的页面的URL
document.anchors 页面所有锚的集合
document.applets 页面中所有applet的集合
document.forms 页面中所有表单的集合
document.images 页面中所有图像的集合
document.links 页面中所有链接的集合
document对象最常用的方法
write() writeln() 这两个方法都接受一个参数,将字符串插入到调用它们的位置。这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串
注意:要插入内容属性,必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的,他将抹去页面的内容,显示指定的内容。
当你想显示无需返回服务器的页面时,document.open和document.close非常有效
8.location对象 号称BOM中最有用的对象之一
3个方法
assign() 相当于location.href 会在浏览器中留下历史
replace() 也是跳转页面,但不会再浏览器中留下历史
reload() 重新加载页面,可以指定从缓存加载还是服务器加载。必要时一定放在代码的最后一行
注意:document.location 和 window.location 指的是一个东西
8.navigator
navigator对象时最早实现的BOM对象之一,包含大量有关web浏览器的信息,它也是window的属性之一
9.screen对象
第六章 DOM基础
1.xml
xml的主要目的是使用文本以结构化的方式来表示数据
DOM是针对XML的基于树的API,虽然慢,但使用简单
注意:DOM是语言无关API,意味着它的实现并不与java,javascript或者其他语言绑定
2.对DOM的支持上,火狐最好,oper和safari其次,IE最差
5.处理特性
只有Element节点才有attributes
<p id="id" sytyle="color:red">asd</p>
假设op是指向这一标签的引用,则可以这样获取id的值
op.attributes.getNamedItem("id").nodeValue。
太累赘, 于是又了setAttribute()和getAttribute()以及removeAttribute()方法
6.访问指定节点
1.getElementById() IE6中,如果给定的id匹配某个元素的name值,也会返回该值。
2.getElementsByTagName 返回一个包含所有的tagName特性等于指定值得元素的NodeList
getElementByTagName("*") 返回指定NodeList的所有元素 (在IE6中,要使用document.all)
3.getElementsByName()
7.创建和操作节点
1.创建新节点
注意:在页面完全下载到客户端机器之前,是无法完全构建dom树。因为这个原因,必须使用window.onload事件句柄来执行所有的代码
2.常用方法
createElement() createNodeText() appendchild()
replaceChild() removeChild() insertBefore()
createDocumentFragment() 一次性添加大量文档改动
8.HTML DOM特征功能
核心DOM的特性和方法是通用的,是为了在各种情况下操作有所XML文档而设计的
而HTML DOM的特性和方法是在专门针对HTML的同时也让一些DOM操作更加简便
1.让特性像属性一样
例如<img src="1.jpg" alt="hehe"/>
若想改变img,可以用setAttribute() 也可以用img.src 或 img.alt
IE对setAttribute支持并不尽如人意,推荐使用属性
============以下是DOM L2的东西,了解即可============================
2.NodeIterator,可以对DOM树进行深度优先遍历
3.TreeWalker 有NodeIterator所有的功能,并且添加了一些遍历方法
9.测试与DOM标准的一致性
implementation对象是DOM文档的一个特性,唯一的方法是hasFeature()
例如,像检查对XML DOM Level1的支持,可以这样调用
var bXmlLevel1=document.implementation.hasFeature("xml","1.0") 支持则返回true