JavaScript学习(二)

内容预览

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()：在指定的毫秒数后调用函数或计算表达式。简单得说就是几秒之后，你把我交给你得任务执行了。执行一次。
  • 参数：
    1. js代码或者方法对象
    2. 毫秒值
  • 返回值：唯一标识，用于取消定时器
• clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
• setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。简单的说就是每几秒执行一次，无限执行。
• clearInterval()：取消由 setInterval() 设置的 timeout。

属性

1. 获取其他BOM对象：

   • location对象
   • history对象
   • Navigator对象
   • Screen对象

2. 获取DOM对象

   • document

特点

• Window对象不需要创建可以直接使用 window使用。 window.方法名();
• window引用可以省略。 方法名();

Location地址栏对象

1. 创建（获取）Location对象

   • window.location
   • location

2. 方法

   • reload()：重新加载当前文档。刷新

3. 属性

   • href：设置或返回完整的 URL。

History历史记录对象

1. 创建（获取）History对象

   • window.history
   • history

2. 方法

   • back()：加载 history 列表中的前一个 URL。
   • forward()：加载 history 列表中的下一个 URL。
   • go(参数)：加载 history 列表中的某个具体页面。
     • 参数：
       1. 正数：前进几个历史记录
       2. 负数：后退几个历史记录

3. 属性

   • 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. 事件监听机制

   概念：当事件源 (组件) 上发生了某个事件，则触发执行某个监听器代码。比如，在 “确定” 按钮上发生了“单击事件”，便触发了表单提交的相关代码。

• 事件源：组件。如： 按钮、文本输入框...
• 事件类型：某些操作。如： 单击，双击，键盘按下了，鼠标移动了...
• 事件触发后要执行的函数（监听器）：代码。
• 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

2. 常见事件

   • 点击事件

     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	文本被选中。