web api

web api 第一天笔记

1.获取元素

想要操作页面上的某部分（显示，隐藏，动画）需要先获取到该部分对应的元素，在对其进行操作

2.获取元素的方法

2.1.根据ID获取

 语法：document.getElementById(‘id’)
 作用：根据id获取元素对象
 参数：id值，区分大小写的字符串
 返回值：元素对象 或 null
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201130213840640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1p5aDQ5OQ==,size_16,color_FFFFFF,t_70#pic_center)

2.2根据标签名获取元素

 语法：document.getElementsByTagName('标签名') 
 或者  element.getElementsByTagName('标签名')
  作用：根据标签名获取元素对象
  参数：标签名
  返回值：元素对象集合（伪数组，数组元素是元素对象）![在这里插入图片描述](https://img-blog.csdnimg.cn/20201130213942683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1p5aDQ5OQ==,size_16,color_FFFFFF,t_70#pic_center)

2.3根据类名返回元素对象集合

       语法：document.getElementsByclassName('类名')         
       作用：根据类名获取元素对象
       参数：类名
       返回值：元素对象集合（伪数组，数组元素是元素对象）

2.4根据选择器返回元素

注意：选择器返回元素时参数需要加符号
（1）document.queryselector(‘选择器’)；
返回值：返回第一个元素对象
（2）document.queryselectorAll(‘选择器’)
返回值：元素对象集合（伪数组，数组元素是元素对象）

2.5获取特殊元素

（1）获取body元素 ：document.body
(2) 获取html元素 ：document.documentElement

3事件

3.1. 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

​ 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

3.2. 事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

案例代码

4鼠标事件

5操作元素文本内容

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

5.1.

element.innerText
从起始位置到终止位置的内容，但他去除html标签，同时空格和换行也会去掉

5.2

element.innerHTML
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
innerText和innerHTML的区别

• 获取内容时的区别：

​ innerText会去除空格和换行，而innerHTML会保留空格和换行

• 设置内容时的区别：

​ innerText不会识别html，而innerHTML会识别

.5.3. 常用元素的属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

.5.4. 表单元素的属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

.5.6. 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

方式1：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

方式2：通过操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className。