w3c dom模型
1、什么是dom?
document object model(文档对象模型)。
将一个结构化的文档(xml,html)转换成一棵树，并提供
对树的操作(包括遍历、查找、修改、删除等)相关的属性
或者方法。
2、w3c dom模型
1)w3c dom模型的基本结构(了解)
Node
Document
HTMLDocument
HTMLBodyElement
Element
HTMLElement
HTMLFormElement
HTMLInputElement
HTMLSelectElement
HTMLOptionElement
HTMLDivElement
HTMLTableElement
HTMLTableCaptionElement
HTMLTableRowElement
HTMLTableCellElement
2)dom操作
a,查找
第一种方式：依据id查找。
var obj = document.getElementById(id);
innerHTML属性：可以访问或者设置
节点的html内容。
value属性：可以获取或者设置节点的
value属性值。
第二种方式：
var arr = node.getElementsByTagName(tagName);
第三种方式:
使用遍历的方式。
parentNode
previousSibling
nextSibling
childNodes
firstChild
lastChild
遍历的方式因为有浏览器兼容性问题，尽量少用。
b,创建
var obj = document.createElement(tagName);
c,添加
node.appendChild(obj):作为最后一个孩子添加进来。
node.insertBefore(obj,refNode):添加到refNode之前。
node.replaceChild(obj,refNode):替换refNode。
d,删除
node.removeChild(obj);
e,样式
第一种方式:修改节点的className属性。
比如: var obj = document.getElementById(id);
obj.className = 's1';
第二种方式:修改节点的style属性。要注意两点：
第一点：必须是内联样式。
第二点：如果要修改的样式属性名包括"-",比如
background-color，则要按照如下方式修改:
node.style.backgroundColor = 'red';
html dom模型
w3c dom模型(规范)出现之前,各个浏览器自己
支持的一些dom操作。
Select对象:
属性:
selectedIndex: 用户选择的选项的下标(从0开始)
length:获取或者设置选项的长度。
options:Option对象数组
Option对象
属性:
text: 选项的描述
value:选项的值
selected:当值为true，表示该选项被选中。
可以按如下方式创建Option对象。
var obj = new Option(text,value);
案例：
级联下拉列表
Table对象
属性:
tHead:返回tHead对象
tFoot:返回tFoot对象
tBody:返回tBody对象数组。
rows:返回表格所有的行，TableRow数组。
方法:
var obj = insertRow(index):在index处插
入一行,返回的obj是TableRow对象。index
下标从0开始。
deleteRow(index)：删除index处的一行。
TableRow对象
属性:
cells: 所有单元格(TableCell对象)
方法:
var obj = insertCell(index):在index处
插入一个单元格，返回的obj是TableCell
对象。
deleteCell(index):删除一个单元格。
TableCell对象
BOM模型:
brower object model(浏览器对象模型),通过
浏览器内置的一些对象，可以操作浏览器本身。
BOM模型没有规范，但是大部分浏览器都支持如下
如下几个对象：
Window对象:表示整个窗口。
open方法
打开一个新的窗口，例如：
window.open
('1.html', 'new',
'height=100, width=200, top=0, left=0,
toolbar=no, menubar=no,
scrollbars=no, resizable=no, location=no, status=no')；
'1.html' 弹出窗口的文件名；
'new' 弹出窗口的名字；如果该参数指定了一个已经存在的窗口，则 open() 方法不再创建一个新窗口，而只是返回对指定窗口的句柄。
height=100 窗口高度；
width=200 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar 是否显示菜单栏。
scrollbars 是否显示滚动栏。
resizable=no 是否允许改变窗口大小，yes为是 。
location=no 是否显示地址栏，yes为是。
status=no 是否显示状态栏内的信息。
close方法
关闭窗口
返回值为窗口对象句柄
status 属性
设置或返回窗口状态栏中的文本。
document属性
获得Document对象
location属性
获得Location对象
alert方法
弹出一个警告对话框
alert(string);
confirm方法
var flag = confirm(string);
弹出一个选择对话框，返回用户是否确认。
prompt方法
弹出一个供用户输入信息的对话框，
返回用户输入信息。
var info = prompt(string);
setTimeout方法
setTimeout(fn,毫秒):在指定的毫秒之后，执行fn。
setInterval方法
var taskId = setInterval(fn,毫秒):
在指定的时间间隔到达之后，执行fn。
clearInterval方法
clearInterval(taskId):取消setInterval指定
的任务。
Document对象:代表整个文档的根。
getElementById(id);
createElement(tagName);
write(string):在指定的位置输出相关信息。
Location对象：封装了浏览器地址栏的相关信息。
href属性:指定要加载的页面。
reload方法：重新加载当前页面。
History对象:封装了浏览器已经访问过的页面的
相关信息。
back():后退
forward():前进
go(-1):正数表示前进，负数后退
Navigator对象:封装了浏览器的相关信息(比如
类型、版本等等)
Screen对象：浏览器所在的屏幕相关信息。
XmlHttpRequest对象(在讲ajax时再讲)
