14.2 DOM模型和HTML文档
14.3 访问HTML元素
(1)根据ID/Name/TagName访问HTML元素(document.getElementById(id)/document.getElementsByName(name)/document.getElementsByTagName(tagname))
(2)根据节点关系访问HTML元素(node.parentNode,node.childNodes[index],node.firstChild,node.lastChild,node.previousSibling,node.nextSibling)
(3)访问表单控件(form_node.elements[index],form_node.elements[name或id],form_node.elements.name或id)
(4)访问列表项(select_node.options[index])
(5)访问表格元素(table_node.caption/table_node.rows[row_index]/table_node.rows[row_].cells[cell_index])
14.4 修改HTML元素
编辑表格之单元格的值(table_node.rows.item(row_index).cells.item(cell_index).innerHTML=...)
14.5 增加HTML元素
(1) 创建元素(document.createElement('TagName')) 出错(TagName出错)
(2) 克隆节点(node.cloneNode(false|true))
(3) 插入节点(appendChild/insertBefore/replaceChild)
(4) 添加选项(createElement("select"),createElement("option"),appendChild)
(5) 添加选项2(createElement("select"),new Option,appendChild)
(6) 添加表格(createElement("table"),createCaption(),insertRow,insertCell,appendChild)
14.6 删除HTML元素
(1) 动态增加、删除子节点(appendChild,removeChild)
(2) 动态增加、删除选项(remove)
(3) 动态增加、删除选项2(.options[index] = null;)
(4) 删除表格的行或单元格(deleteRow,deleteCell)
14.7 传统的DHTML对象模型
| 属性 | 方法 | ||
|---|---|---|---|
| document | Document对象 | alert("警告消息") | 带确认按钮的警告对话框 |
| location | Location对象 | confirm("确认消息") | 带确认(true)和取消(false)按钮的确认对话框 |
| history | History对象 | prompt("提示消息","默认值") | 带提示消息、默认值的输入对话框 |
| navigator | Navigator对象 | open(URL,name,features,replace) | |
| screen | Screen对象 | close() | 关闭浏览器窗口 |
| frames[] | frame数组 | moveTo() | 把窗口左上角移动到指定坐标 |
| name | 窗口名称 | resizeTo() | 调整窗口大小到指定宽度和高度 |
| length | 窗口中框架(frame)数量 | setTimeout() | 指定毫秒后调用函数 |
| opener | 创建此窗口的窗口的引用 | clearTimeout() | 取消由setTimeout()设置的timeout |
| parent | 父窗口 | setInterval() | 指定周期(毫秒)调用函数 |
| selt | clearInterval() | 取消由setInterval()设置的timeout。 | |
| top | print() | 打印当前窗口内容 | |
| innerWidth | blur() | ||
| innerHeight | focus() | ||
| screenLeft | |||
| screenTop | |||
_self 表示当前窗口 _blank 表示新窗口 _parent 表示父窗口 _top 表示顶层窗口
| 常用属性 | 常用方法 | ||
|---|---|---|---|
| URL | 当前文档的URL | getElementById(id) | 返回指定id的第一个对象 |
| title | 当前文档的标题 | getElementsByName(name) | 返回指定名称的对象集合 |
| referrer | 载入当前文档的URL | getElementsByTagName(tagname) | 返回指定标签名的对象集合 |
| cookie | 设置或得到与当前文档有关的所有cookie | write() | 向文档写文本、HTML表达式、JS代码 |
| lastModified | 文档被最后修改的日期和时间 | writeln() | |
| forms[] | 文档中所有Form对象引用的数组 | open() | |
| images[] | 文档中所有Image对象引用的数组 | close() | |
| anchors[] | 文档中所有Anchor对象引用的数组 | ||
| links[] | 文档中所有Area和Link对象引用的数组 | ||
| Location对象 | Navigator对象 | History对象属性 | |||
|---|---|---|---|---|---|
| href | *完整的UR | appName | 浏览器名称 | length | 历史列表中的网址数 |
| protocol | *URL协议 | appVersion | 浏览器版本 | back() | 前一个URL |
| hostname | *URL主机名 | appCodeName | 浏览器的代码名 | forward() | 下一个URL |
| port | *端口号 | platform | 操作系统平台 | go() | 某个具体页面 |
| pathname | *URL路径名 | userAgent | HTTP请求的用户代理头的值 | Screen对象属性 | |
| search | *URL的查询部分 | cookieEnabled | 是否启用cookie | width | 屏幕总宽度 |
| reload() | 重新载入当前文档 | javaEnabled() | 是否启用Java applet | height | 屏幕总高度 |
| replace(newURL) | 取代 | availWidth | 屏幕有效宽度 | ||
| reload(URL) | 载入一个新的文档 | availHeight | 屏幕有效高度 | ||
在DHTML模型里，window对象代表整个窗口，该窗口可以是浏览器窗口，也可以是浏览器页面内的一个Frame。 DHTML虽然没有提供一种完备的树形结构，却也提供了一种简单的方法来访问页面中各种子元素，即借助于DHTML的包含关系来实现。
(1) DHTML模型(a, img,)14.8 使用window对象
(1) window的属性变量(window属性变量a==全局变量a)
(2) 打开|关闭新窗口(open(),close())
(3) 警告、确认、输入对话框(window.alert(),window.confirm(),window.prompt())
(9) 定时器(setInterval,clearInterval)
(10) 定时器(setTimeout)
14.9 navigator和地理位置
(1)可拖动(a, img, )
(2) 拖动div
14.10 使用document对象
(1) Cookie(document.cookie)
(2) 弹出窗口(window.open)
14.11 HTML 5新增的浏览器分析
(1) 页面导航类型(performance.navigation.type)
(2) 页面加载时间(new Date().getTime())
(3) 页面加载时间(performance.timing.navigationStart)