首页 > 代码库 > DHtml
DHtml
一.DHTML
1.DHTML概述
将html文档中所有的元素都用js对象来进行表示, 用对象来表示元素, 用对象之间的引用关系来表示元素之间的层级关系
用一颗文档结构树来表示整个html文档
对象上可以设计属性和方法, 可以通过操作对象上的属性和方法来改变元素的属性和行为
利用这种方式, 将js和html整合在一起, 形成了DHTML技术.
DHTML可以被分为BOM和DOM两部分内容:
BOM: Browser Object Model 浏览器对象模型
DOM: Document Object Model 文档对象模型
2.BOM
window对象:
重要属性:
closed -- 表示引用窗口是否关闭 true/false
重要事件:
onblur -- 当对象失去焦点时触发
onfocus -- 当对象获取焦点时触发
onload -- 在页面加载完成后触发
重要方法:
alert -- 消息对话框
confirm -- 确认对话框
setInterval -- 重复定时器
setTimeout -- 一次性定时器
子对象:
history
location
navigator
document(后面讲)
history:(!)
重要属性: length -- 获取窗口浏览的历史信息的个数
重要方法:
back() -- 后退
forward() -- 前进
go() -- 跳转
location:(!!!)
重要属性: href -- 获取或设置url地址
3.DOM
(1)获取元素
getElementById() -- 通过id来获取指定元素
getElementsByName() -- 通过name来获取指定元素
getElementsByTagName() -- 通过标签名来获取指定元素
obj.value -- 获取或设置输入控件的value属性的值
obj.innerHTML -- 获取或设置元素内部的html
//IE10以下的浏览器中, 不支持Select和table上的innerHTML属性
obj.innerText -- 获取或设置元素内部的文本
(2)增删改文档中的元素
document.createElement() -- 创建节点
appendChild()-- 添加子节点
insertBefore() -- 插入节点
removeChild() -- 删除子节点
removeNode()-- 删除节点本身(有兼容性问题)
replaceChild() -- 替换子节点
replaceNode() -- 替换节点(有兼容性问题)
cloneNode() -- 克隆节点
parentNode属性 -- 获取父节点
className -- 设置或获取对象的类。
display -- 设置或获取对象是否显示。
checked -- 设置或获取复选框或单选钮的状态
DHtml