前端之BOM和DOM
BOM和DOM的概念
我们在之前已经学习了JavaScript的基础语法,但实际上这些语法我们只是在本机上自己与自己做操作,并没有和浏览器进行互动,所以仅仅掌握JavaScript是不够的,我们还需要一些能把JavaScript和网页做交互的工具,也就是BOM和DOM.
BOM(Browser Object Model)是浏览器对象模型,它的主要功能就是可以与浏览器进行对话,在浏览器页面初始化的时候,会在内存创建一个全局对象,用来描述当前窗口的属性和状态,这个全局对象被称为浏览器对象模型.BOM相对于DOM的来说,其缺点是会有兼容性的问题,因为每个浏览器都有自己的BOM实现方法,把自己写的BOM放进去就很有可能会出现兼容性问题,但是DOM的标准是全世界范围都固定的,所以不会有兼容性的问题.
DOM(Document Object Model)是指文档对象模型,通过它,可以访问html文档的所有的元素,进而去操作其内容和格式.
BOM
核心对象window
BOM的核心就是window对象,同时window对象也是BOM的顶级对象,所有的浏览器都支持window对象,这是毫无疑问的.
JavaScript的所有全局对象,方法,和全局变量都会被自动归为window对象的方法和属性,我们在调用这些方法的时候就可以省略window关键字,直接写即可,同时DOM也是window对象的属性.
window.documents.getElementsByClassName("teacher");
documents.getElementsByClassName("teacher");
# 上面两个语句的效果是一样的,完全一样
另外,window对象可以直接返回当前浏览器的高度和宽度,还可以打开新窗口和关闭当前窗口
window.innerHeight
window.innerWidth
# 打开窗口
window.open(url,target,specs,replace)
url 是要打开窗口的路径
target 是打开方法
specs 是规定新窗口的样式
replace 是否在历史列表中替代当前页面
# 关闭当前窗口
window.close()
document
document是整个HTML文档的根节点,即我们可以通过这个对象来点出来页面里的所有内容,另外document还用于描述DOM树的状态和属性,并提供了很多操作DOM的API,
frames
frames通常用来指HTML的子框架,也就是说可以在浏览器里面嵌入的另一个窗口.
history
window.history就是浏览器的历史记录, 这些历史记录是以栈的形式来保存的,就是说页面前进就会入栈,记录历史记录,而页面返回则会出栈.
history的常用方法
history.back() # 跳转到历史记录的前一个链接
history.forward() # 跳转到历史记录的后一个链接
location
location可以让用户获取当前页面地址以及可以重定向到一个新的页面.
location的常用属性为:
location.href # 返回当前页面的地址
location.hostname # 返回当前页面的域名
location.pathname # 返回当前页面的路径和文件名
location.protocol # 返回网页使用的协议
location.port # 返回当前页面的端口
navigator
navigator可以用来描述浏览器本身的信息,包括浏览器的名称,版本等等,但并非那么的准确
navigator.appName # 返回浏览器的名称
navigator.appCodeName # 返回当前浏览器的内核
screen
screen可以显示用户屏幕的亮度,宽高等.
screen.width / screen.height # 显示屏的宽,高
弹出框
JavaScript中的弹出框只有三种,即警告框,确认框,提示框
# 警告框
alert("you see?")
# 确认框
confirm("你确定吗?")
# 提示框
prompt("请输入你的答案")
计时事件
JavaScript里面的计时事件,简单来说就是我们可以在一定时间之后再执行代码,而不是写完立即执行.
# setTimeout,可以设置在多长时间之后执行第一个参数的语句,注意后面的参数单位是毫秒
var t = setTimeout("Js语句",毫秒)
# clearTimeout() 可以取消setTimeout的设置
clearTimeout(t)
# setInterval(),可以设定多长时间的一个周期,来执行第一个参数的js语句,会不停的执行,直到clearInterval被调用或者窗口被关闭
var timer = setInterval("js语句",时间间隔)
# clearInterval(),取消setInterval设置的执行周期
clearInterval(timer)
DOM
DOM是一套对文档的内容进行抽象和概念化的方法,在网页被加载的时候就会被创建.
- 在正式学习DOM之前我们要明白一个事情,对于涉及到DOM操作的JS代码,里面如果涉及到变量,一定要把这些代码的script写在定义变量的后面,否则会报找不到变量的错误.
查找标签
# 直接查找
document.getElementById # 可以根据ID获取一个标签
document.getElementsByClassName # 根据class属性获取标签
document.getElementsByTagName # 根据标签名获取标签合集
# 间接查找
children # 可以查看所有的子标签
firstElementChild # 第一个子标签元素
lastElementChild # 最后一个子标签元素
节点操作
# 对节点的操作无非就是创建,添加,删除,替换等.
# 创建节点
createElement(标签名)
# 追加节点
node.appendChild(newnode); # 在最后添加节点
node.insertBefore(newcode,某个节点); # 把增加的节点放在某个节点的前面
# 删除节点
node.removeChild(要删除的节点);
# 替换节点
node.replaceChild(新节点,要替换掉的节点)
class的操作
className # 获取所有的样式类名
classList.remove(cls) # 删除指定的类
classList.add(cls) # 添加指定的类
classList.contains(cls) # 判定某个类是否存在,返回值为布尔值
classList.toggle(cls) # 如果存在cls类就删除,不存在就添加cls类
事件
HTML有一种特性,就是可以让HTML中的事件来触发浏览器中的动作,具体例子就是用户在点击某个HTML元素的时候会启动一段js代码,下列属性就是可以插入HTML标签来定义事件动作.
onclick # 单击某个对象可以调用的事件
ondblclick # 双击某个对象可以调用的事件
onfocus # 元素获得焦点
onblur # 元素失去焦点
onkeydown # 用于检测键盘某个键被按下
onkeypress # 用于检测键盘某个键按下并松开
onkeyup # 用于检测键盘某个按键松开
onload # 等待一张页面或一幅图完成加载之后,执行下面代码
onmousedown # 鼠标按钮被按下
onmousemove # 鼠标被移动
onmouseout # 鼠标从某元素移开
onmouseover # 鼠标移到某元素之上
onselect # 在文本框里面的文本被选中的时候会发生的事件
onsubmit # 确认按钮被点击时候触发,使用的对象是form