Java笔记--Web前端知识汇总之二 DHTML

一.DHTML



1.DHTML概述



DHTML: Dynamic HTML 动态的HTML
DHTML并不是一门新的技术, 而是将已有的技术(HTML, CSS, JavaScript)进行了整合, 从而可以实现利用js来操作页面中的内容和用户进行交互

将html页面中所有的元素都用一个个js对象来表示 用对象来表示元素, 用对象与对象之间的引用关系来表示元素与元素之间的层级关系

可以用一颗文档结构树来表示整个html文档

对象上可以设计属性和方法, 通过操作对象上的属性和方法从而操作页面中的元素

利用这种方式, 将js和html, css整合在一起, 形成了DHTML技术

BOM: Browser Object Model 浏览器对象模型
DOM: Document Object Model 文档对象模型

二.BOM
1.window对象
(1)属性/事件/方法
closed属性 -- 代表当前引用窗口是否关闭
onblur事件 -- 窗口失去焦点时触发
onfocus事件 -- 窗口获得焦点时触发
onload事件 -- 当页面加载完成后立即触发
close方法 -- 关闭当前引用窗口
alert方法 -- 消息对话框
confirm方法 -- 确认对话框
setInterval -- 循环定时器
setTimeout -- 一次性定时器
(2)子对象
history对象
length -- 代表当前窗口浏览立即记录的长度
back() -- 后退
forward() -- 前进
go() -- 跳转

location对象
href -- 获取或设置当前地址栏url

三.DOM
1.获取元素
document.getElementById() -- 通过id来获取指定的元素
getElementsByName() -- 通过name属性值来获取指定的元素组成集合
getElementsByTagName() -- 通过TagName来获取指定名称的元素组成的集合

innerHTML -- 获取或设置标签内的html内容(包括子孙标签和文本)
innerText -- 获取或设置标签内的文本

2.增删改元素
document.createElement() -- 创建一个指定名称的元素
appendChild() -- 添加一个子元素到最后面
insertBefore() -- 在指定元素前插入一个子元素

removeChild() -- 删除指定的子元素
replaceChild() -- 用指定元素来替换子元素
cloneNode() -- 克隆节点

parentNode -- 获取父节点
className -- 获取或设置元素的class属性
display -- 设置或获取元素是否以及如何显示
checkedd -- 设置或获取单选或复选框是否被选中

!!!重要练习
#3, #4, #13, #6, #8,#12,#11