Bom和Dom对象
BOM-JavaScript是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互,这些对象主要包括window、document、location、navigator和screen等。通常称为浏览器对象模型(Brower Object Model)
Window对象是整个JavaScript脚本运行的顶层对象,它的常用属性如下:
|
document |
返回该窗口内装载的HTML文档 |
|
location |
返回该窗口装载的HTML文档的URL |
|
navigator |
返回浏览当前页面的浏览器,包含了一系列的浏览器属性,包括名称、版本号和平台等。 |
|
screen |
返回当前浏览者屏幕对象 |
|
history |
返回该浏览窗口的历史 |
提示:这些属性都是属于window对象的子对象,每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。
window对象的常用方法:
|
alert()、confirm()、prompt() |
分别用于弹出警告窗口、确认对话框和提示输入对话框。 |
|
close() |
关闭窗口 |
|
scrollBy()、scrollTo() |
滚动当前窗口的HTML文档 |
|
setInterval()、clearInterval() |
设置、删除定时器 |
DOM是文档对象模型(Document Object Model)的简称。当网页加载时,可以将结构化文档在内存中转换成对象的树。以下是HTML DOM树:

小结:简单的说DOM并不是一种技术,而是一种访问结构化文档的一种思想。借助DOM模型,我们可以对DOM树进行修改、删除、新增等操作,让结构化文档动态化。
DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点:
- 元素节点:各种标签就是这些元素节点的名称,例如<p>、<ul>等
- 文本节点:文本节点总是被包含在元素节点的内部
- 属性节点:一般用来修饰元素节点就称之为属性节点。
为了动态地修改HTML元素,须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素:
- 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
2.利用节点关系访问HTML元素。常用的属性和方法如下:
|
parentNode |
返回当前节点的父节点 |
|
previousSibling |
返回当前节点的前一个兄弟节点 |
|
nextSibling |
返回当前节点的后一个兄弟节点 |
|
childNodes |
返回当前节点的所有子节点 |
|
firstChild |
返回当前节点的第一个子节点 |
|
lastChild |
返回当前节点的最后一个子节点 |
|
getElementsByTagName(tagName) |
返回当前节点的具有指定标签名的所有子节点 |
Bom和Dom对象的更多相关文章
- javascript的BOM,DOM对象
BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
- 百万年薪python之路 -- JS的BOM与DOM对象
BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...
- 细看JS中的BOM、DOM对象
DOM对象模型 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...
- 014、BOM与DOM对象的应用
Screen屏幕对象 Width:屏幕的宽度 Height:屏幕的高度 availWidth:屏幕的有效宽度(不含任务栏) availHeight:屏幕的有效高度(不含任务栏) colorDepth: ...
- css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...
css部分代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 56、jsのBOM对象与DOM对象
javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 一.BOM对象 1.window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个windo ...
- 8、jsのBOM对象与DOM对象
javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 本篇导航: BOM对象 DOM对象 DOM Event(事件) 实例练习 一.BOM对象 1.window对象 所有浏览 ...
- 【Python之路】特别篇--ECMA对象、DOM对象、BOM对象
ECMA对象 从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词. ECMAScript 定义了“对象定义”,逻辑上等价 ...
- JavaScript 参考手册——javascript本地和内置对象、BOM、DOM
本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript 对象参考手册 本参考手册描述 ...
随机推荐
- JAVA基础篇 之 类的初始化
类中属性的隐式初始化,代码如下,我们看下不同类型默认的初始值是什么 创建一个Demo类如下: class Demo { int a; byte b; short c; long d; boolean ...
- python学习之if条件句的使用
if循环 if 条件: 代码块 运行 if else的用法 if elseif else用法 if 条件1: elif 条件2: elif条件3: else:
- 【Scala】什么是隐式转换?它又能用来干嘛?该怎么用
文章目录 定义 隐式参数 隐式转换 隐式值:给方法提供参数 隐式视图 将Int和Double类型转换为String 狗狗学技能(使用别的类中的方法) 使用规则 定义 隐式参数 隐式参数指在函数或者方法 ...
- matlab读取csv文件并显示
传统的方式可以通过读取文件,然后处理字符串的方式对csv文件进行解析,在matlab中可以通过csvread函数读取csv文件,然后通过plot对数据进行显示,也可以对里面的函数进行分析: csv文件 ...
- Windows 10 IoT Core用PWM控制器控制树莓派LED灯亮度
我接到一个需求,需要调节LED灯的亮度,且是从上位机进行控制,我了解到树莓派也有PWM,就准备通过PWM来控制灯的亮度. PWM又叫脉宽调制,是用微处理器的数字输出来对模拟电路进行控制,对模拟信号电平 ...
- 01python基础入门
一.了解python 1.总结一句话:简单易用,相对于java易学,容易上手.如果你不知道学什么语言或者先入门的话,这个是首选, 毕竟小学生也开始学了.对你有用或者是你的爱好就坚定的开始学吧! 2.下 ...
- spring junit--基础配置
spring官方文档总提示要进行SpringJunit测试必须先配置两个信息: 1.使用Spring IOC功能配置 2.配置正确的JDBC或ORM框架连接数据库 下面进行spring3和hibern ...
- 容器技术之LXC
什么是容器?在生活中我们常见的容器有各种瓶瓶罐罐.各种能够容纳其它物料的东西叫容器:容器的特点就是有着很好的隔离作用,使得不同的物料互相隔离:除此之外容器还方便运输.方便储存:这是生活中所说的容器,以 ...
- python实现摇骰子猜大小函数升级没把加注及三大运行商短信验证过滤
摇骰子游戏升级 此次更改增加下注功能,启动资金1000元,每次赔率都是一倍,钱输光退出. 源码: #!/user/bin/env python #-*-coding:utf-8 -*- #Author ...
- Django之forms.Form
django中的form组件提供了普通表单提交及验证数据的主要功能: 1. 生成页面可用的HTML标签 2. 对用户提交的数据进行验证 3. 可保留用户上次提交的数据 django中 ...