我们来谈谈JS中的BOM和DOM
1.BOM
1.事件
事件就是用户或者浏览器自身执行的某种动作.事情可能是用户在某些内容上的点击;鼠标经过某个特定元素或按下键盘上的某个按键.事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口的大小.通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应.
JavaScript可以处理的事件类型为:鼠标事件,键盘事件,HTML事件
1.常见的事件
- load:当页面或图像加载完后立即触发
- blur:元素失去焦点
- focus:元素获得焦点
- click:鼠标点击某个对象
- change:用户改变域的内容
- mouseover:鼠标移动到某个元素上
- mouseout:鼠标从某个元素上离开
- keyup:某个键盘的键被松开
- keydown:某个键盘的键被按下
2.事件处理程序
响应某个事件的函数就是事件处理程序(或事件侦听器).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,为事件指定处理程序的方式有好几种
2.BOM对象方法
这里主要说一下系统对话框:
浏览器通过(实际是window对象的方法) alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息
-
消息框:alert,常用.
<1>alert()方法用于显示带有一条指定消息和一个OK按钮的警告框.
-
输入框:prompt,返回提示框中的值.
<1>prompt()方法用于显示可提示用户进行输入的对话框.
<2>参数(可选):
i.第一参数:要在对话框中显示的纯文本. i.第二参数:默认的输入文本. -
确认框:confirm,返回true/false. <1>confirm()方法用于显示一个带有指定消息和OK及取消按钮的对话框.
3.BOM对象
1.history
history对象是历史对象.包含用户(在浏览器窗口中)访问过的URL.history对象是window对象的一部分,可通过window.history属性对其进行访问.
history对象的属性:length,返回浏览器历史列表中的URL数量.
history对象的方法:
1.back():加载history列表中的前一个URL.
2.forward():加载历史列表中的下一个URL.当页面第一次访问时,还没有下一个url.
3.go(number|URL):URL参数使用的是要访问的URL.而number参数使用的是要访问的URL在history的URL列表中的相对位置.go(-1),到上一个页面.
2.location
location对象是window对象之一,提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.也可通过window.location属性来访问.
- location 对象的属性href:设置或返回完整的 URL
- location对象的方法 <1>reload():重新加载当前文档 <2>replace():用新的文档替代当前文档
3.document
2.DOM
DOM:Document Object Model 文档对象模型
要实现页面的动态交互效果,bom操作远远不够,需要操作html才是核心.如何操作html,就是DOM
简单的说,dom提供了用程序动态控制html接口.DOM即文档对象模型描绘了一层次化的节点树,运行开发人员的添加,移除和修改页面的某一部分.dom处于javascript的核心地位上.
每个载入浏览器的HTML文档都会成为Document对象.Document对象使我们可以从脚本中对于HTML页面中的所有元素进行访问.Document对象是window对象的一部分,可通过window.document属性对其进行访问.
1.节点
| 节点类型 | HTML类型 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档document |
| 元素节点 | 所有的HTML元素 | < a >< p >< div > |
| 属性节点 | HTML元素内的属性 | id,href,name,class |
| 文本节点 | 元素内的文本 | hello |
| 注释节点 | HTML中的注释 | < !---- > |
2.获取节点
获取节点的四种方法:
- getElementByld()--通过id属性值获取元素对象
- getElementByName()--通过name属性值获取元素对象数组
- getElementByClass()--通过class属性值获取元素对象数组
- getElementByTagName()--通过元素名/标签名获取元素对象数组
- 后三个获取的是数组,所以需要通过数组下标取值
- 注意:操作dom节点是在等节点初始化完毕后,才会执行
- <1>处理方式: 把script标签移到html末尾即可 使用onload事件来处理JS,等待html加载完毕再加载onload事件里的JS
3.创建节点与插入节点
