内容预览
1.BOM的概念及简单使用
2.DOM的概念及简单使用
3.事件监听机制的简单了解
一、BOM
BOM的概念及组成
BOM：Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
BOM的组成
- Window：窗口对象
- Navigator：正在使用的浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
BOM对象的基本用法
Window窗口对象
常用方法
1.与弹出框有关的方法
-
alert()：显示带有一段消息和一个确认按钮的警告框。
-
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
-
prompt()：显示可提示用户输入的对话框。
- 返回值：获取用户输入的值
2.与打开关闭有关的方法
- close()：关闭浏览器窗口。
- 谁调用我 ，我关谁
- open()：打开一个新的浏览器窗口
- 返回新的Window对象
3.与定时器有关的方法
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。简单得说就是几秒之后，你把我交给你得任务执行了。执行一次。
- 参数：
- js代码或者方法对象
- 毫秒值
- 返回值：唯一标识，用于取消定时器
- 参数：
- clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。简单的说就是每几秒执行一次，无限执行。
- clearInterval()：取消由 setInterval() 设置的 timeout。
属性
-
获取其他BOM对象：
- location对象
- history对象
- Navigator对象
- Screen对象
-
获取DOM对象
- document
特点
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略。 方法名();
Location地址栏对象
-
创建（获取）Location对象
- window.location
- location
-
方法
- reload()：重新加载当前文档。刷新
-
属性
- href：设置或返回完整的 URL。
History历史记录对象
-
创建（获取）History对象
- window.history
- history
-
方法
- back()：加载 history 列表中的前一个 URL。
- forward()：加载 history 列表中的下一个 URL。
- go(参数)：加载 history 列表中的某个具体页面。
- 参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录
- 参数：
-
属性
- length 返回当前窗口历史列表中的 URL 数量。
二、DOM
DOM概念
DOM： Document Object Model 文档对象模型。
将整个HTML文档看做一棵DOM树，而HTML文档中的内容就是DOM树上的一个个节点，我们通过操作DOM树的节点就能操作HTML文档的所有内容
DOM 操作
注意：
1、在DOM操作中，‘节点’和‘标签’是不同的概念 。
2、节点：包含标签节点、文本节点（空白文本也是一个节点）、注释节点
3、标签：仅包含标签节点。
4、和‘节点’有关的方法通常包含
XXXNode()，如childNodes（） 和‘标签’有关的方法通常包含
XXXElement(),如firstElementChild()
查找标签的方法
① 在整个文档中查找
| 功能 | API | 返回值 |
|---|---|---|
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName("类名") | 元素节点数组 |
② 查找子标签
| 功能 | API | 返回值 |
|---|---|---|
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild 【W3C考虑换行，IE≤8不考虑】 |
标签对象 |
| 查找最后一个子标签 | element.lastElementChild 【W3C考虑换行，IE≤8不考虑】 |
标签对象 |
③ 查找父标签
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
④ 查找兄弟标签
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一个兄弟标签 | node.previousElementSibling 【W3C考虑换行，IE≤8不考虑】 |
标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling 【W3C考虑换行，IE≤8不考虑】 |
标签对象 |
⑤ 根据选择器查找
| 功能 | API | 返回值 |
|---|---|---|
| 根据选择器查找一个标签 | document.querySelector("选择器") | 标签对象 |
| 根据选择器查找多个标签 | document.querySelectorAll("选择器") | 标签数组 |
选择器的表达式可以查看jQuery的API。
常用选择器
操作属性
| 需求 | 操作方式 |
|---|---|
| 读取属性值 | 标签对象.属性名 |
| 修改属性值 | 标签对象.属性名=新的属性值 |
自定义属性操作
| API | 功能 |
|---|---|
| setAttribute() | 设置 DOM 的的属性值 |
| getAttribute() | 得到 DOM 的属性值 |
| removeAttribute() | 移除属性 |
//1.设置 input 元素的 type 属性：
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
//2.获得链接的 target 属性：
document.getElementsByTagName("a")[0].getAttribute("target");
//结果：_blank
//删除 h1 元素的 style 属性：
document.getElementsByTagName("H1")[0].removeAttribute("style");
操作标签体
| 需求 | 操作方式 |
|---|---|
| 获取或者设置标签体的文本内容 | element.innerText |
| 获取或者设置标签体的内容 | element.innerHTML |
// 获取标签体内容
var test = element.innerHTML；
// 设置标签体内容
element.innerHTML = '<h1> 设置标签体内容 >';
DOM增删改操作
| API | 功能 |
|---|---|
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| element.remove() | 删除某个标签 |
事件操作
-
事件监听机制
概念：当事件源 (组件) 上发生了某个事件，则触发执行某个监听器代码。比如，在 “确定” 按钮上发生了“单击事件”，便触发了表单提交的相关代码。
- 事件源：组件。如： 按钮、文本输入框...
- 事件类型：某些操作。如： 单击，双击，键盘按下了，鼠标移动了...
- 事件触发后要执行的函数（监听器）：代码。
- 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
-
常见事件
- 点击事件
1. onclick：单击事件 2. ondblclick：双击事件- 焦点事件
1. onblur：失去焦点 2. onfocus:元素获得焦点。- 加载事件
1. onload：一张页面或一幅图像完成加载。- 鼠标事件
1. onmousedown 鼠标按钮被按下。 2. onmouseup 鼠标按键被松开。 3. onmousemove 鼠标被移动。 4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。- 键盘事件
1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。 3. onkeypress 某个键盘按键被按下并松开。- 表单事件
1. onsubmit 确认按钮被点击。 2. onreset 重置按钮被点击。- 选择和改变
1. onchange 域的内容被改变。 2. onselect 文本被选中。