Java学习笔记之JavaScript（2）

一、DOM

**1. 功能：**控制html文档的内容。
2. 获取页面标签（元素）对象：
Element：

• document.getElementById(“id值”)：通过元素的id获取元素对象。

3.操作Element对象：
（1）修改属性值：

• 明确获取的对象是哪一个；
• 查看API文档，找其中有哪些属性可以设置。

（2）修改标签体内容：

• 属性：inneerHTML
• 获取元素对象
• 使用innerHTML属性修改标签体内容。

二、事件

1. 功能：
某些组件被执行了某些操作后，触发某些代码的执行。
2.如何绑定事件
（1）直接在html标签上，指定事件的属性（操作），属性值就是js代码

• 事件：onclick----单击事件

（2）通过js获取元素对象，指定事件属性，设置一个函数。

三、BOM

1. 概念：
Browser object Model 浏览器对象模型

• 将浏览器的各个组成部分封装成对象。

2.组成：

• window：窗口对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象
• History：历史记录对象
• Location：地址栏对象

3.window：窗口对象
方法：
（1）与弹出框有关的方法：
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

• 入股用户点击确定按钮，则方法返回true；
• 如果用户点击取消按钮，则方法返回false；

（2）与打开关闭有关的方法：
close()：关闭浏览器窗口。

• 谁调用我，我关谁
  open()：打开一个新的浏览器窗口
• 返回新的window对象

（3）与定时器有关的方式
setTimeout()：在指定的毫秒数后调用函数或计算表达式。

• 参数：
  js代码或者方法对象
  毫秒值
• 返回值：唯一标识，用于取消定时器

clearTimeout()：取消由setTimeout()方法设置的timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由setInterval()设置的timeout。

属性：
（1）获取其他BOM对象：
history
location
Navigator
Screen
（2）获取DOM对象
document

特点：

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

4. Location：地址栏对象
（1）创建（获取）：
window.location
location
（2）方法：
*reload()：重新加载当前文档。刷新
（3）属性
*href：设置或返回完整的URL。

5. History：历史记录
（1）创建（获取）
*window.history
*history
（2）方法：
*back()：加载history列表中的前一个URL。
*forward()：加载history列表中的下一个URL。
*go（参数）：加载history列表中的某个具体页面。
（3）属性：
*length：返回当前窗口历史列表中的URL数量。

四、DOM

1. 概念：
Document Object Model 文档对象模型。
*将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

2.W3C DOM 标准被分为3个不同的部分：
*核心 DOM - 针对任何结构化文档的标准模型。
*Document：文档对象
*Element：元素对象
*Attribute：属性对象
*Text：文本对象
*Comment：注释对象
*Node：节点对象，其他5个的父对象

*XML DOM - 针对XML文档的标准模型
*HTML DOM - 针对HTML文档的标准模型

3.核心DOM模型
3.1 Document：文档对象
3.1.1创建（获取）：在html dom模型中可以使用window对象来获取。
document
3.1.2 方法：

• 获取Element对象：
  （1）getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
  （2）getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
  （3）getElementsByClassName()：根据class属性值获取元素对象们。返回值是一个数组。
  （4）getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。

• 创建其他DOM对象：
  （1）createAttribute（name）
  （2）createComment()
  （3）createElement()
  （4）createTextNode()

• 属性

3.2 Element：元素对象

• 获取/创建：通过document来获取和创建
• 方法：
  （1）removeAttribute()：删除属性
  （2）setAttribute()：设置属性

3.3 Node：节点对象，其他5个的父对象

• 特点：所有dom对象都可以被认为是一个节点
• 方法：
  *CRUD dom树：
  （1）appendChild()：向节点的子节点列表的结尾添加新的子节点。
  （2）removeChild()：删除（并返回）当前节点的指定子节点。
  （3）replaceChild()：用新节点替换一个子节点。

4. HTML DOM
4.1 标签体的设置和获取：innerHTML
4.2 使用html元素对象的属性
4.3 控制元素样式
*使用元素的style属性来设置
*提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

五、事件监听机制

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）
  （2）
• 表单事件：
  （1）onsubmit 确认按钮被点击。
  （2）onreset 重置按钮被点击。