第三章 对象模型DOM和BOMWord格式文档下载.docx
- 文档编号:17375932
- 上传时间:2022-12-01
- 格式:DOCX
- 页数:8
- 大小:18.43KB
第三章 对象模型DOM和BOMWord格式文档下载.docx
《第三章 对象模型DOM和BOMWord格式文档下载.docx》由会员分享,可在线阅读,更多相关《第三章 对象模型DOM和BOMWord格式文档下载.docx(8页珍藏版)》请在冰豆网上搜索。
除了文档节点之外的每个节点都有父节点;
每个元素节点都有子节点;
当节点分享同一个父节点时,他们就是同辈(同级节点);
节点也可以拥有后代,后代指某个节点的多有子节点,或者这些子节点的子节点,以此类推;
节点也可以拥有先辈,先辈是某个节点的父节点,或者是父节点的父节点,,以此类推。
③根节点
有两种特殊的文档属性可以来访问根节点html节点
document.documentElement可返回存在于html文档中的文档根节点
document.body对html页面的特殊扩展,可以直接访问body标记
案例:
3-1根节点.html
④parentNode、firstChild、以及lastChild
遵循文档结构,在文档中进行“短距离的旅行”
3-1parentNode.html
⑤document.getElementById()方法:
通过指定ID来返回元素
查找整个html文档中的任何html元素。
该方法会忽略文档的结构而返回正确的元素,不论它被隐藏在文档中的任何位置。
3-1getElementById方法.html
⑥document.getElementByTagName()方法:
返回控件列表,要对列表中具体的控件访问的时候还需要使用循环来逐个访问
语法:
document.getElementByTagName("
标记名称"
)
或document.getElementById('
id名称'
).getElementByTagName("
3-1getElementByTagName.html
⑦getElementByName()方法:
依靠名字name属性作为特征来获取同名的控件列表
1-2、操作练习
实现全选、全不选功能。
核心代码:
<
scriptlanguage="
javascript"
>
functiontj()
{
vargroup=document.getElementsByName("
check"
);
//获取所有名为check的控件
vartotalprice=0;
//定义初始价格
for(vari=0;
i<
group.length;
i++)//循环check控件的个数
{
if(group[i].checked)//ique被选中的控件
totalprice+=parseFloat(group[i].value);
//累加值
}
alert("
您的购物总价为"
+totalprice+"
元"
}
functioncheckAll()
varflag=document.getElementById("
checkshop"
).checked;
//全选控件
i++)//一旦用户点击全选,则遍历所有check控件
group[i].checked=flag;
//group[i].checked=checked
/script>
2、DOM的document对象
使用漂浮层
用document.getelementById()获得层
获得网页元素的坐标
window.onscroll事件
①document对象编程
表3-1Document对象常用属性
属性
说明
bgColor
设置或检索document对象的背景色
title
设置文档标题,等价于HTML的<
title>
标记
fgColor
设置前景色(文本颜色)
linkColor
未单击过的链接颜色
alinkColor
激活链接(焦点在此链接上)的颜色
vlinkColor
已单击过的链接颜色
表3-2document对象的常用方法
方法
getElementById()
根据HTML元素指定的ID,获得唯一的HTML元素,如访问div层对象、图片Img对象
getElementsByName()
根据HTML元素指定的name,获得相同名称的一组元素,如访问表单元素(全选功能)
createElement(Tag)
创建一个html标记对象
body.appendChild(oTag)
在元素内添加新元素
1)document对象的引用
●通过集合引用
Document.images//对应页面上的<
img>
Document.images.length//对应页面上的<
标记的个数
Document.images[0]//第1个<
Document.images[i]//第i+1个<
●通过name属性直接引用
imgname=”oImage”>
Document.images.oImage//Document.images.name属性
②常见页面坐标介绍
表3-3常见的页面坐标
top
指定元素的上边界位置
pixelTop
设置或返回元素的上边界
pixelLeft
指定元素的左边界位置
scrollTop
页面滚动的高度
例:
获得元素X的上边界和左边界的像素值,X.style.pixelTopX.style.pixelLeft
3.2.3操作练习:
悬浮广告
3.2.4操作练习:
图片切换特效
3.2.4-2:
添加记录
3.2.4-3:
自动测试HTML文档的特效
3、BOM的window对象
浏览器对象概念
Window对象基本概念
resizeTo()方法
resizeBy()方法
setTimeout()方法
获得屏幕大小
①BOM是什么
BrowserObjectModel即浏览器对象模型,它允许访问和操控浏览器窗口。
研发者通过使用BOM,可移动窗口、更改状态栏文本或执行其它不与页面内容发生直接联系的操作。
浏览器特有的JavaScript扩展都被认为是BOM的一部分。
②浏览器对象
浏览器对象是一个分层结构
BOM模型见书62页
③:
window对象编程
1)表3-4window对象常用属性
status
指定浏览器状态栏中显示的临时信息
screen
有关客户端的屏幕和显示性能的信息
history
有关客户访问过的URL的信息
location
有关当前URL的信息
document
表示浏览器窗口中的HTM文档
parent
表示当前窗口的父窗口
self
当前window对象的代名词
2)表3-5window对象常用方法
Alert(“提示信息”)
显示一个带有提示信息和“确定”按钮的对话框
Confirm(“提示信息”)
显示一个带有提示信息以及确定和“取消”按钮的对话框
Prompt(“提示信息”)
显示可提示用户输入的对话框
Open(“url”,“name”)
打开具有指定名称的新窗口,并加载给定url所指定的文档,如果没有提供url,则打开一个空白文档
Close()
关闭当前窗口
resizeTo(height,width)
设定窗口的大小
moveTo(X,Y)
设置窗口的左上角位置
resizeBy(w,h)
窗口宽增大w,高增大h
ShowModalDialog()
在一个模式窗口中显示指定的HTML文档
setTimeout(“函数”,毫秒)
设置定时器:
经过指定毫秒值后执行某个函数
Scroll()
窗口滚动
3)表3-6Window对象常用事件
事件
onload
当在窗口或框架完成文档加载时触发
onresize
当对象的大小将要改变时触发
onscroll
当用户滚动对象的滚动条时触发
3.3.1广告窗口
3.3.2定时打开新的窗口
3.3.3点开一个逐渐变大的新网页
3.3.4单击图片时图片跳动
3.3.5自动滚动的页面
4、BOM的history和location对象
实现由返回、前进、刷新功能的页面
History对象
Location对象
①history对象
1)表3-7History常用方法
Back()
加载history列表中的上一个URL
Forwad()
加载history列表中的下一个url
Go(“url”ornumber)
加载列表中的一个url,或者要求浏览器移动指定的页面数
Back()方法相当于“后退按钮”;
Forwad()方法相当于“前进”按钮
Go
(1)代表前进一页,等价于forwad方法,go(-1)代表后退一页,等价于back()方法
2)Location对象
表3-8location常用属性
host
设置或检索位置或url的主机名和端口号
hostname
设置或检索位置或url的主机名部分
href
设置或检索完整的url字符
表3-9Location常用方法
Assign(“url”)
加载url指定的新的HTML文档
Reload()
重新加载当前页
Replace(“url”)
通过加载url指定的文档来替换当前文档
案例3.4.1列表菜单
3.4.2实现图片轮流变大onload事件
3.4.3实现弹窗模式窗口
3.4.4页面左边随滚动条滚动的带有关闭按钮的漂浮广告(学生做)
3.4.5全需要和全部需要的特效
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第三章 对象模型DOM和BOM 第三 对象 模型 DOM BOM