BOM及DOM

DOM（The Browser Object Model）浏览器对象模型

•    Window
• frames
• history
• location
• navigator
• screen
• document
• anchors
• forms
• images
• links
• location

windows对象的主要方法：

1. moveBy(dx,dy) 移动偏移量
2. moveTo(x,y) 移动到指定坐标
3. resizeBy(dw,dh)窗口大小改变
4. resize(w,h) 窗口大小改变

function test(){
    window.resizeTo(400,400);
    window.moveTo(300,300);
}

• 获得在屏幕上的位置
• IE:screenLeft, 获得窗口所在X坐标的位置, screenTop,获得窗口Y坐标值
  
• Mozilla: screenX, screenY
• 弹出窗口
• window.open()方法, 第一个参数是要打开的url，可以是相对路径；第二个参数是打开窗口的目标，除了自定义名称以外，还包括_self,_parent,_top,及_blank几个特殊值；第三个参数是字符串，用于描述打开窗口的特性，比如大小，是否有工具栏等。实例：window.open("","topFrame","")

window.open("","cdwindow", "height=150,width=300,top=10, left=10, resizable=yes");

    var win = window.open("","_blank", "height=150,width=300,top=10, left=10, resizable=yes");
    win.moveTo(100,100);
    alert(win.opener == window);

• 关闭窗口
• window.colse();
• self.close();

var win = window.open("","Google", "");
win.close();

• 时间函数

window.setTimeout("alert(123);", 3000);

function sayHello(){
  alert("popup alert window after 3 seconds");
}

window.setTimout(sayHello, 3000);

window.setInterval(sayHello, 3000); //每隔3秒钟执行一次

function testStopInerval(){
  window.clearInterval(t); //t是setInterval返回的定时器
  window.clearTimout(t); //t是setInterval返回的定时器
}

• history对象
• history.go(index)函数，在浏览器历史记录中跳转，正数为前跳，负数为后跳。
• history.back()函数，后跳
• history.forward()函数，前跳
• history.length属性，获得历史记录的长度；

<a href="javascript:history.go(-1)">Back to the previous page</a>

• document(DOM)对象的普通属性
• 访问document属性，alert(document.title)
• lastModified - 网页最后修改时间
• referrer - 打开该网页的上一个页面
• title - 文档的标题
• URL - 文档的URL
• alinkColor - 鼠标移到链接标签的颜色，body中alink属性的值
• bgColor - 背景颜色，body标签中bgcolor属性的值
• linkColor - 链接标签颜色，body中link属性的值
• fgColor - 文本颜色，body中text属性的值
• vlinkColor - 访问链接的颜色，body中vlink的值
• document对象的集合属性
• 访问集合元素：document.links[0]或者document.links["a1"]
• anchors - 文档中的所有书签
• applets - 获得文档中的所有applets对象
• embeds - 获得文档中所有embeds对象
• forms - 获得文档中所有forms对象
• images - 获得文档中所有images对象
• links - 获得文档中所有link对象 aaa
  

• document对象的方法
• write()及writeln()，用于在文档中输出内容；
• open()方法，用于打开文档，准备输出内容；
• close()方法，关闭文档输出；
• console.dir(document) 查看所有document 的其它方法
  
• addEventListener 添加事件监听器
• appendChild 添加节点
• createElement 创建节点
• getElementById 获得指定id的dom节点
• getElementsByName 获得指定名称的节点集合
• getElementsByTagName 获得指定标签的节点集合
• remoeChild 删除子节点
• replaceChild 替换子节点
• insertBefore 在指定节点位置插入节点
  

版权 从2005 到<script>document.write(new Date().getFullYear())</script>

function writerTest(){
    var win = window.open("about:blank","newwindow","height=150,width=300,resizable=yes");
    win.document.open();
    win.document.write("New Window");
    win.document.close();
}

function getElementsTest(){
    var n = document.getElementById("test");
    n.innerHTML = "Modified content of id=test div!"
}

• location对象, location,window.location, document.location等均代表location对象
  
• href 获得rul
• port / protocol 端口及协议
• search 地址中? 后的字符串
• host/hostname 主机或主机名称
• hash 地址中#及后面的内容
• reload(cache) 用于重新加载文档的内容，参数nocache表示是否允许从cache中加载
• assign() 用于导向指定的链接
• replace() 用于发射指定的链接，不会打开的文档信息记录到历史记录中
  

• navigator对象
• navigator对象用于获得浏览器相关的信息；使用console.dir(navigator)查看成员信息。
• appCodeName 产品名称
• appName 应用名称
• appVersion 版本号
• cookieEnabled 是否允许使用cookie
• language 语言
• oscpu 操作系用名称
• platform 操作系统平台
• product 产品代号或名称， 比如Gecko
• productSub 产品发布日期20100701
• userAgent 客户端纤细信息， 比如：Mozilla/5.0/Windows; U; Windows NT 5.1; ..
  

• screen对象，代表客户端屏幕信息，属于顶级对象，直接访问即可console.dir(screen);
• availHeight 可用高度
• availWidth 可用宽度
• height 实际高度
• width 实际宽度
• colorDepth 颜色深度
  

segfseef
dsf