JavaScript的DOM操作

DOM的基本概念
DOM是文档对象模型，这种模型为树型模型；文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西。
Windows 对象操作
属性和方法
属性（值或者子对象）
Opener：打开当前窗口的源窗口，如果当前窗口是首次启动浏览器打开的，则opener是null。
dialogArgument:对话框返回值；
子对象：history,location,document, status, menubar, toolbar等。
方法（函数）：事件（事先设置好的程序，被触发）。
Window.open(“第一部分”,”第二部分”,”第三部分”,”第四部分”)
Window.open的特征参数：
第一部分：写页面地址；
第二部分：_blank //打开的方式，_blank在新窗口打开，_self在自身窗口打开。
第三部分：控制打开的窗口格式，可以写多个，用空格隔开，如下
Toolbar = no；新打开的窗口无工具条。
menubar = no；无菜单栏
status = no；无状态栏
100； heigth:100；宽度、高度
left = 100；打开的窗口离左边多少距离
resizable = no；窗口大小不可调
scrollbars = yes; 出现滚动条
location = yes; 有地址栏

Window.open也有返回值，它的返回值是新打开的窗口对象，例如
最简单的打开窗口：window.open(“Untitled-6html”);
打开一个窗口并保存在变量中：var w = window.open();
可以将打开的多个窗口保存在数组w里：
Function openw()
{
w[i++]=window.open();
}
4、window.close(); 关闭当前窗口

w.close(); 关闭保存在变量w中的那个窗口

关闭多个子窗口，先将打开的窗口存入数组内，利用循环将其挨个关闭。

Window.opener.close(); 关闭打开当前窗口的源窗口

5、间隔与延迟
Window.setInterval(“要执行的代码”，间隔的毫秒数)
Window.clearInterval(间隔的ID)；清除间隔执行，循环一次之后用来清除间隔执行的代码；
Window.SetTimeout(“要执行的代码”,延迟的毫秒数)；延迟一段时间执行某一段代码（函数）；
Window.clearTimeout(延迟的ID)；清除延迟；
Window.setTimeout(延迟的ID)；清除

6、调整页面
Window.navigate(“url”) 跳转至目标页面，在谷歌浏览器下有bug；
Window.moveTo(x,y) 移动页面至某一位置，位置由x，y决定；
Window.resizeTo(宽，高) 调整页面的宽度和高度
Window.scrollTo(x，y) 滚动页面至哪里，y代表纵向滚动。

7、模态对话框和非模态对话框
模态对话框（Modal Dialogue Box），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭，它和非模态对话框都是永远置顶的，它们的区别在于当对话框打开时，是否允许用户进行其他对象的操作。

打开模态对话：Window.showModalDialog(“url”,”向目标对话框传的值”,”窗口特征参数”)；
特征参数：用分号隔开，像素大小用px。dialogHeight, dialogWidth, center.
打开非模态对话框：window.showModallessDialog(“url”,”向目标对话框传的值”,”窗口特征参数”)

Var a = window.dialogArgument; 可以用一个参数获取模态或非模态对话框传递的值。

windows.history对象
window.history.back(); 页面进行后退
window.history.forward(); 页面前进
window.history.go(n;) n如果是正数则代表前进n表页面；n如果是负数则代表后退n表页面，一般常用这一种。

window.location 对象
location 地址栏
var s= window.location.href; 获取当前页面的地址
window.location.href=http://www.baidu.com; 修改页面地址，会跳转页面
window.location.hostname:主机名，域名，网址名；可用变量接受。
Window.location.pathname:路径名；可用变量接收

window.status对象
status 状态栏，可以给状态栏添加要显示的文字
window.status=”要在状态栏显示的内容”；设置状态栏文字，例如：
function s()
{
Window.status = “向前走，就这么走”；
}

window.document 对象
找到元素
document.getElementById(“id”); 根据id找，最多找到一个
var a = document.getElementById(“id”); 将找到的元素放在变量中
document.getElementByName(“name”; ) 根据name找，找出来的是数组
document.getElementByTagName(“name”; ) 根据标签名找，找出来的是数组
document.getElementByClassName(“name”; ) 根据classname找，找出来的是数组

操作内容
非表单元素：
获取内容
Alert(a.innerHTML); 标签里的html代码和文字豆获取了，如：
body中有这么一个div:
<div id=”me”><b>试试吧</b></div>
在script中用innerHTML获取div中的内容：
Var a=document.getElementById(“me”;
Alert(a.innerHTM);
Alert(a.innerText); 只取里面的文字
Alert(a.outHTML); 包括标签本身的内容（简单了解就行）
设置内容
innerHTML = “<font color= red>hello world</font>
如果用设置内容代码结果如下，div中的内容被替换了；”

innerText 会将赋的东西原样呈现
清空内容，赋值个空字符串。
表单元素
获取内容，有两种获取方式：
Var t = document.fl.tl; form表单ID为fl里面的ID为tl的input.
Var t = document.getElementById(“id”); 直接用id获取。

Alert(t.value); 获取input中的value值；
Alert(t.innerHTML); 获取<textarea>这里的值</textarea>;

2)设置内容：t.value=”内容改变”。

小知识点
<a href=www.baidu.comonclick =”return flase”>转向百度</a>;j加了return flase则不会跳转，默认是return true会跳转。按钮也一样，如果按钮中设置return flase则不会提交，利用这个可以对提交跳转进行控制。
操作属性
首先利用元素的ID 找到该元素，存于一个变量中：
Var a = document.getElementById(“id”)；
然后可以对该元素的属性进行操作：
a.setAtrribute(“属性名”,”属性值”)；设置一个属性，添加或更改都可以；
a.getAtrribute(“属性名”)；获取属性的值；
a.removeAttribute(“属性名”)；移除一个属性。
④操作样式
首先利用元素的ID钟爱到该元素，存于一个变量中：
Var a = document.get.ElementById(“id”);
然后可以对该元素的属性进行操作：
a.style.样式=””; 操作此ID样式的属性；
样式为CSS中的样式，所有的样式都可以用代码进行操作。