7_js_dom编程入门1

Objective（本课目标）

• 掌握获取页面元素的常用方法

• 掌握事件触发案例

• 能够区分innerText和innerHTML的区别

• 综合案例训练

1 DOM 介绍

1.1 什么是DOM

• 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

• 文档对象模型 (*DOM)* 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

• DOM 模型用一个逻辑树来表示一个文档：如下

• 文档：就相当于是document对象。

• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

• 节点包含了属性和文本还有子节点。

• 课堂代码：01.获取整个页面的元素.html

1.2 为什么要学习DOM?

• 总结：就是为了使用JavaScript语言操作网页中的元素

1.3. 如何获取网页中的元素

• 获取页面元素的核心方法

getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()
​
返回文档中与指定的选择器匹配的第一个元素节点
Document.querySelector()
返回包含文档中与指定的选择器匹配的所有元素节点的列表
Document.querySelectorAll()

1.3.1. 获取页面元素的方法1

• 课堂代码：02.getElementById方法演示.html

• 课堂代码：03.getElementsByTagName方法演示.html

• 课堂代码：04.getElementsByName方法演示.html

• 课堂代码：05.getElementsByClassName方法演示.html

1.3.2. 获取页面元素的方法2

• 课堂代码：06.querySelector和querySelectorAll.html

1.4. 事件触发

1.4.1. 事件概述

• 当在 HTML 页面中使用 JavaScript 时，JavaScript 可以对这些事件 做出“反应”。

  • 网页中的事件：根据用户的浏览行为做出的响应。

• 课堂代码：07.事件的入门案例.html

1.4.2. 常见的鼠标事件

1.4.3 事件案例训练

• 课堂代码：08.事件案例训练.html

1.5. Js操作元素案例

1.5.1. 修改元素内容

• 课堂代码：09.innerText和innerHTML的区别.html

1.5.2. 图片切换案例

• 课堂代码：10.图片切换案例.html

1.5.3. 操作元素属性

• 课堂代码：11.操作元素属性1.html

• 课堂代码：12.操作元素属性2.html

1.5.4. 隐藏密码案例讲解

• 课堂代码：13.隐藏密码案例讲解.html

1.5.5. 关闭广告案例

• 课堂代码：14.关闭广告案例.html

1.5.6. onblur和onfocus事件讲解

• 课堂代码：15.onblur和onfocus事件.html

  • focus 事件在元素获取焦点时触发

  • blur当一个元素失去焦点的时候 blur 事件被触发

1.5.7. 更改元素的样式操作

• 课堂代码：16.更改元素样式.html

• 课堂代码：17.更改元素样式案例.html

1.5.8. 注册页面加上校验

• 课堂作业：18.作业讲解_注册页面加上校验.html