BOM 与 DOM
BOM :Browser Object Model 浏览器对象模型,
提供操作浏览器的相关方法
核心对象 window ,浏览器窗口对象,是JS的顶层对象
DOM :Document Object Model 文档对象模型,
提供操作文档的相关方法
核心对象 document ,操作文档
注意 :
window -> document //window顶层对象包含document
document.write();
window.document.write();
BOM(window对象)
1. 作用 :浏览器窗口对象
全局变量和全局函数,都是window对象的属性和方法
window在使用时可以省略
et :
var a = 10;
window.b = 10;
console.log(a,window.b);
function sum(a,b){
}
window.sum = function (){};
sum();
window.sum();
2. 对话框
1. alert("");
警告框 window.alert();
2. prompt("");
输入框 window.prompt();
3. confirm("是否确定");
确认框 返回布尔值,只有当用户点击“确定”时,
才返回true,其他都返回False
3. 定时器方法
作用 :按照指定的周期或者时间间隔,来调用函数或者计算表达式
1. 周期性定时器 / 间歇调用
1. 特点 :每隔一段时间就执行一遍代码
2. 语法 :
var timer = setInterval(fun,duration);
window.setInterval();
参数 :
fun : 表示要执行的操作,可以是函数,
也可以直接使用匿名函数
duration :时间间隔,
隔多少时间执行一次代码
单位是 ms (毫秒)
返回值 :
timer : 表示当前定时器的ID ,就是一个整数,
可以区分不同的定时器,
清除定时器时使用
3. 清除定时器
clearInterval(timer);
参数 :定时器的ID
2. 一次性定时器 / 超时调用
(1) 特点 :在指定的时间间隔之后,执行一次操作
(2)语法 :
var timer = setTimeout(fun,delay);
参数 :
fun : 要执行的操作
delay : 时间间隔,隔多久再执行相应操作
返回值 :
timer :定时器ID,在清除定时器时使用
(3)清除定时器 :
clearTimeout(timer);
4. window中的属性
window中的属性,本身又是一个对象
1. screen对象
访问屏幕对象 :console.log(screen);
console.log(window.screen);
作用 :获取客户端显示器相关的信息
属性 :
1. width /height 获取屏幕的宽高
2. availWidth /availHeight
获取屏幕实际可用的宽高(减去任务栏之后的值)
2. history 对象
作用 : 包含当前窗口访问过的所有URL
属性&方法 :
1. length 属性 :获取当前窗口访问过的url
的数量
2. 方法 :
1. back() 后退
2. forward() 前进
3. go(num) 跳转几步
num 取值为整数,可正可负
在当前网页的基础上前进/后退几步
3. location 对象
作用 :location 保存的是浏览器地址栏的信息
属性 :
href : 获取当前窗口正在浏览的网页url
如果给href属性赋值,就相当于页面跳转
方法 :
reload() 重载,相当于刷新
reload(true) : 忽略缓存,从服务器端加载
reload(false) : 从缓存中加载(默认)
4. navigator 对象
作用 :保存浏览器相关的信息
属性 :
userAgent :显示信息
DOM (ducument对象)
1. 介绍 :
document对象,是DOM中的顶层对象,封装了所有的HTML元素
相关的属性,方法以及事件
2. 节点(对象)
网页在加载过程中,会自动生成一颗节点树(DOM树),DOM树会封装网页上所有的内容。网页中的每一个元素每一段文本,甚至注释,都会被封装成DOM树中单独的一个节点
1. 节点分类
1. 元素节点 - 网页中的一个元素(标签)
2. 属性节点 - 标签中的一个标签属性
3. 文本节点 - 表示标签中的文本内容
-------------------------------
4. 注释节点 - 网页中的注释
5. 文档节点 - 表示整个文档
2. 节点操作
1. 获取节点
2. 读取节点
3. 修改节点
4. 删除节点
5. 创建节点
3. 获取元素节点
1. document.getElementsByTagName('a');
通过制定的标签名获取元素节点,返回
节点列表(数组),可以根据下标获取具体的
元素节点对象
2. document.getElementsByClassName('');
根据元素class属性值查找,返回节点列表
3. document.getElementsByName('');
根据元素name属性值查找,返回节点列表
一般用于查找表单元素
4. document.getElementById('');
根据元素id属性值查找,返回具体的元素节点对象
注意 :
脚本标签的书写位置,要放在body之后
DOM 属性:
1. innerHTML :
修改/获取元素节点中的HTML文本,可识别标签
2. innerText :
修改/获取元素节点中的普通文本,不能识别标签
3. value :
该属性只针对表单控件,允许获取或修改表单控件的值
3.DOM节点操作
1. 增加节点
1. 创建元素节点和文本节点
语法 :
元素节点 : var div = document.createElement('div');
文本节点 : var text = document.createTextNode('');
注意 :
属性节点可以通过元素节点的点语法直接访问和设置
2. 添加节点
DOM中对节点的插入 删除 追加操作,都由父元素执行
1. 在父元素中动态追加子节点
语法 :
父节点.appendChild(子节点);
et :
var div = document.createElement('div');
//将div追加到body中
document.body.appendChild(div);
div.parentNode.append(div);
注意 :文本节点也是元素的子节点
et :
var text = document.createTextNode('hello');
//追加到div中显示
div.appendChild(text);
2. 在文档的指定位置插入节点
语法 :
parentNode.insertBefore(newElem,oldElem);
将newElem节点插入到oldElem节点之前
et:
var h1 = document.createElement('h1');
//将h1插入在div之前
document.body.insertBefore(h1,div);
3. 删除节点
1. 如果是删除body的子元素
document.body.removeChild(elem);
2. 如果元素层级结构较多,就需要通过父节点parentNode
执行删除操作
parentNode.removeChild(elem);