一、事件

1.1 事件介绍

事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等

1.2 事件绑定方式

事件要想发生,就得将事件和标签先绑定

一个完整的事件有三部分

• 事件源(标签)

• 什么事(事件)

• 响应(动作效果)

事件绑定,其实就是事件和标签绑定

• 方式1: 事件源,事件,响应在一起

• 方式2: 事件源,事件在一起,响应抽取函数

• 方式3: 事件和响应全部抽取

方式1: 事件源,事件,响应在一起

   按钮

方式2: 事件源,事件在一起,响应抽取函数

  
按钮

方式3【重要】: 事件和响应全部抽取

  再点一下试试

练习：div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句 计算,点击次数

1.3 不同事件的演示

这些事件,都是html中标签的属性,都是以onxxx开头

1.3.1 鼠标事件

1.3.2 键盘事件

1.3.3 表单事件【重点】

是指表单中能用上的一系列事件

• onblur 失去焦点

• onfocus 获得焦点

• onchange 内容改变

• onsubmit 表单提交

 
/*1) 表单事件是表单form的事件,所以这个事件要绑定在form上2) 函数要返回true/false3) onsubmit中也要写return*/
河南河北北京河南1河北1北京1

1.3.4 加载事件【重点】

浏览器加载页面,是瀑布式加载,即从上之下依次加载执行.

如果JS代码在上方，就有可能出现有部分下方HTML代码加载不到导致js操作出错

  点我一下

二、DOM操作

2.1 概述

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

• 有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式

• JavaScript 能够改变页面中的所有 HTML 元素。

• JavaScript 能够改变页面中的所有 HTML 属性。

• JavaScript 能够改变页面中的所有 CSS 样式。

• JavaScript 能够对页面中的所有事件做出反应。

2.2 查找元素

查找元素(标签)有很多方式

• 通过id查找元素

• document.getElementById("id属性值");

• 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

• 如果未找到该元素，则 x 将包含 null。

• 通过标签名查找元素

• 方法：getElementsByTagName("合法的元素名");

• 如果找到,返回的是数组

• 通过class查找元素

• 方法：getElementsByClassName("class属性的值")

• 如果找到,返回的是数组

  按钮
貂蝉
西施
王昭君
杨玉环
黎姿
利智
张曼玉
朱茵

2.3 元素内容的查找和设置

元素内容,是指标签开闭之间的内容.

查找和设置使用的是相同的属性

• innerHTML 获得或设置标签的内容

• innerText 获得或设置标签的内容

这是p标签内的内容
点击获得HTML点击获得Text点击设置HTML点击设置Text

2.4 元素属性的查找和设置

元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如

• domObj.id

• domObj.name

• domObj.value

• ...

 获得属性值
设置属性值

2.5 元素CSS样式的查找和设置

元素css样式的查找和设置,是指标签中style的属性值的获得和设置

• 获得属性值

• 元素对象.style.属性

• 设置属性值

• 元素对象.style.属性 = ""