【博学谷学习记录】超强总结，用心分享｜WebAPI编程(一)

目录

WebAPIs

DOM

获取元素

事件基础

事件三要素

常见的鼠标事件

操作元素

改变元素内容（获取或设置）

常见元素的属性操作

表单元素的属性操作

样式属性操作

---

WebAPIs

API

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调动使用即可。

Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。因为Web API很多，所以我们将这个阶段称为Web APIs，此处的Web API特指浏览器提供的一系列API，即操作网页的一系列工具，例如操作HTML标签，操作页面地址的方法。

API&Web API

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。

2.Web API主要是针对浏览器提供的接口，主要针对于浏览器做交互效果。

3.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）。

DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

获取元素

1.根据ID获取

语法：Document.getElementById(id)

作用：根据ID获取元素对象

参数：ID值，区分大小写的字符串

返回值：元素对象或null

2019-9-9

2.根据标签名获取元素

语法：document.getElementByTagName('标签名')

作用：根据标签名获取元素对象

参数：标签名

返回值：元素对象集合

    
知否知否，应是绿肥红瘦
    
知否知否，应是绿肥红瘦
    
知否知否，应是绿肥红瘦
    
知否知否，应是绿肥红瘦

3.H5新增获取元素对象

1.document.getElementsByClassName（'类名'）

获取类名返回元素对象集合

2.document.querySelector

根据指定选择器返回第一个元素对象

3.document.querySelectorAll

根据指定选择器返回

盒子1
盒子2

    

        
列表1
        
列表2
    

4.获取特殊元素

1.document.body

获取body元素对象

2.document.documentElement

获取html元素对象

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript的事件。

事件三要素

1.事件源（谁）：触发事件的元素

2.事件类型（什么事件）：例如click点击事件

3.事件处理程序（做啥）：事件触发后要执行的代码

执行时间的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

点我

常见的鼠标事件

鼠标事件	触发事件
onclick	鼠标点击左键出发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获取鼠标焦点出发
onblur	失去鼠标焦点出发
onmousemove	鼠标移动出发
onmouseup	鼠标弹起出发
onmousedown	鼠标按下触发

操作元素

JavaScript的DOM操作可以改变网页内容结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素内容（获取或设置）

1.element.innerText

从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会去掉

2.element.innerHTML

起始位置到终止位置，全部内容包括HTML标签，同时保留空格和换行

    我是文字
    123

常见元素的属性操作

1.innerText、innerHTML

2.src、href

3.id、alt、title

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名=值

刘德华
张学友 

表单元素的属性操作

利用DOM操作如下表单元素的属性。

type、value、checked、selected、disabled

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名=值

按钮

样式属性操作

1.element.style

行内样式操作

2.element.className

类名样式操作

文本