4.DOM 操作
- 在一个html页面中，会使用很多标签来规划制作页面。
- 每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找
到这个标签元素
- 如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一
片叶子，应该怎么做？
- “顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一
片叶子都不是难事了
- 叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”，
- 文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节
点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
- 在节点树中，顶端节点就是根节点（root）
- 每个节点都有父节点（除了根节点）
- 任何一个节点都可以拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
从上面的 HTML 中：
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
并且：
- <html> 节点拥有两个子节点：<head> 和 <body>
- <head> 节点拥有两个子节点：<meta> 与 <title> 节点
- <title> 节点也拥有一个子节点：文本节点 "DOM 教程"<h1> 和 <p> 节点是同胞节点，同时也是
<body> 的子节点
并且：
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
js为我们提供了很多种方法来实现在页面找查找某个元素节点
4.1 DOM访问
- getElementById：通过id属性获得元素节点对象
- 案例：当帐号为空时，阻止表单提交
- getElementsByName：通过name属性获得元素节点对象集
- 案例：购物车全选效果
- getElementsByTagName：通过标签名称获得元素节点对象集
- 案例：表格隔行变色
4.2 DOM修改
- 修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
1. 改变一个 <h2> 元素的 HTML 内容 :
2. 改变一个<h2>的 HTML 样式
4.2.1 添加节点
- 点击按钮，在页面中创建一张图片
4.2.2 删除节点
点击按钮，把上面刚创建的图片从页面上删除
4.2.3 替换节点
点击按钮，把上面刚创建的图片替换成另一张
4.3 事件
js捕获某个动作而做出的反馈
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
4.3.1 窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
- onload 当文档被载入时执行脚本
4.3.2 表单元素事件 (Form Element Events)
仅在表单元素中有效。
- onblur 当元素失去焦点时执行脚本
- onfocus 当元素获得焦点时执行脚本
4.3.3 鼠标事件 (Mouse Events)
- onclick 当鼠标被单击时执行脚本
- ondblclick 当鼠标被双击时执行脚本
- onmouseout 当鼠标指针移出某元素时执行脚本
- onmouseover 当鼠标指针悬停于某元素之上时执行脚本
4.3.4 键盘事件
- onkeydown 按下去
- onkeyup 弹上来
4.3.5 事件冒泡
创建两个div，一个大一些，一个小一些
先子，后父。事件的触发顺序*自内向外*，这就是事件冒泡；
4.3.6 事件捕获
- 还是刚才创建两个div，一个大一些，一个小一些
先父,后子。事件触发顺序变更为*自外向内*，这就是事件捕获；
4.4 面向对象OOP
- 使用Object创建通用对象
- 使用构造函数
- 使用直接量
4.5 JSON
- 大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜
好不一样）
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 易于人阅读和编写，同时也易于机器解析和生成
{
属性1：值1，
属性2：值2，
。。。。
}
浙公网安备 33010602011771号