JavaScript----WebAPI,DOM

WebAPI介绍:

API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节

WebAPI,浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM),是针对于浏览器提供的接口,主要针对浏览器做交互效果,里面基本上由输入和输出函数组成

DOM:

什么是DOM:

DOM文档对象模型,是由W3C组织推荐的一种处理可扩展标记语言的标准编程接口

在这里我们要区分一下这三者的区别:

1.HTML:超文本标记语言

2.XML:可扩展标记语言

3.XAML:可扩展应用程序标记语言,用于改善传统的winform界面

DOM中最大的原始对象是文档对象,一个页面就是一个文档,文档对象在DOM中用document表示,DOM的结构其实就是一个HTML的标准文档结构

网页中所有内容,在文档中的所有节点都用node表示

网页中的所有标签,也称作元素节点,元素,用element表示

如何获取页面元素:

这里我们总共有6中获取方法:

1.根据ID获取元素

var a = document.getElementById("元素的ID");

返回值为元素对象或者null

2.根据标签名获取元素

var a = document.getElementsByTagName("元素的标签名");

返回值为元素对象的伪数组,因此我们在使用数组中元素的时候需要进行遍历,而且获取的元素对象的数组还是动态的

3.根据类名获取元素

var a = document.getElementsByClassName("元素的类名");

4.通过选择器进行获取

var a = document.querySelector("元素的选择器");

这里的选择器和我们之前学过的选择器是一样的所学的简单选择器和复合选择器都可以在这里使用

但是这种方法只能找到和选择器匹配的第一个元素

5.通过选择器进行获取

var a = document.querySelectorAll("元素的选择器");

这种方法和上一种的区别是这种方法会找到所有和选择器匹配的元素并返回一个元素列表

6.获取特殊的元素

获取body元素

var a = document.body;

获取html元素

var a = document.documentElement;

事件的使用:

理解了如何获取元素之后,我们就可以给所选的元素添加一系列的事件

事件的概念:

简单的说就是一个元素添加事件,事件需要被触发,触发之后会相应一些工作

JS中帮助我们创建动态页面,或者对页面中的内容起到侦测的行为,基本上每个元素都有一些事件操作,当我们触发了事件的机制,那么就可以进行一些其他操作

事件主要分为:主角(事件源:触发事件的元素),事件类型,事件处理程序

注册事件:

我们常用的注册事件的方式有两种:

1.传统方式

元素对象.on开头的一些事件

这种方法注册的事件具有唯一性,同一个元素的同一个事件只能有一个处理函数

2.监听注册

这种是W3C推荐的一种注册方式

元素对象.addEventListener(三个参数:1.type:事件类型字符串 2.listener:事件发生时调用的函数 3.opsition:可选参数,是一个布尔值,与事件流有关)

这种方法同一个元素对象可以添加多个事件

常用的事件(传统方式):

1.onclick----鼠标点击左键触发

2.onmouseover----鼠标经过时触发

3.onmouseout----当鼠标离开时触发

4.onmousemove----当鼠标移动时触发

5.onmousedown----当鼠标按下时触发

6.onmouseup----当鼠标弹起时触发

7.onfocus----当获取到鼠标焦点时触发

8.onblur----当失去鼠标焦点时触发