Web APIs 基础笔记

js基础和Web APIs两个阶段的关联性

1.js基础：ECMAScript

2.Web API是：DOM和BOM

3.Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果

API 和 Web API

API（应用程序编程接口）是一些预先定义的函数，提供应用程序与开发人员，基于某软件或硬件，得以访问一组例程的能力，而又无需访问源码。

API : 接口，工具，方法/属性

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

DOM简介

1.文档对象模型 DOM，是 W3C 组织推荐的，处理可扩展标记语言（HTML或者XML）的标准编程接口。

2.文档：一个页面就是一个文档，DOM 中使用 document 表示

3.元素：页面中的所有标签都是元素，DOM 中使用 element 表示

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

总结：

DOM: 将html文档，转换为了一个document对象，并且封装了各种各样的属性和方法。

          我们通过这些属性和方法来操作html文档（改变网页内容，结构和样式）

DOM操作HTML文档，主要就是操作元素。首先我们先来学习如何获取元素。

DOM获取页面元素的方式：

1.根据 ID 获取

2.根据标签名获取

3.通过 HTML5 新增的方法获取

4.特殊元素获取

document.getElementById('id');获取带有 ID 元素的对象。

        document.getElementById('time');   // id='time'

document.getElementsByTagName('标签名'); 获取某类标签元素，返回对象集合。

var lis = document.getElementsByTagName('li'); //标签选择器

        console.log(lis); //元素对象的集合；伪数组

        console.log(lis[0]);

遍历里面的元素对象

        for (var i = 0; i < lis.length; i++) {

            console.log(lis[i]);

        }

变量名.getElementsByTagName()  可以得到这个元素里面的某些标签

var nav = document.getElementById('nav'); // 这个获得nav 元素

        var navLis = nav.getElementsByTagName('li');

        console.log(navLis);

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

    var boxs = document.getElementsByClassName('box'); //所有 类名class="box"

使用 console.dir() 以目录结构形式打印返回的元素对象，更好的查看对象的属性和方法。

总结：  DOM提供的获取元素的方法，都是父亲获取后代（子元素/孙元素）

document: html文档顶级对象，html所有标签对象的祖宗；

DOM提供的获取元素的方法，不仅可以通过document调用，也可以通过普通元素对象调用

H5新增获取元素方式：

document.querySelector('选择器');    // 根据指定选择器返回第一个元素对象

var firstBox = document.querySelector('.box');  //类名是.box的第一个元素

    var nav = document.querySelector('#nav');   //id选择器

var li = document.querySelector('li');  //标签选择器 第一个标签

document.querySelectorAll('选择器');    // 返回指定选择器，所有元素对象集合

    var allBox = document.querySelectorAll('.box');  //所有的  类名 class="box"

    var lis = document.querySelectorAll('li');  //所有的li

获取body和html元素

var  bodyele = doucumnet.body；  // 返回body元素对象

var  htmlele = document.documentElement；  // 返回html元素对象

事件三要素：

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

事件三要素：

1. 事件源 （谁，事件被触发的对象）

2. 事件类型 （如何触发 什么事件 鼠标点击 还是经过）

3. 事件处理程序 （做啥 通过一个函数赋值的方式完成）

    执行事件步骤：

1. 获取事件源

2. 绑定事件：btn.onclick

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

    唐伯虎

    

onclick 是一个方法，事件：On：当；

当什么情况发生时，执行什么逻辑；当鼠标点击事件发生时，执行匿名函数调用。

常见的鼠标事件：

1. onclick 鼠标点击左键触发

2. onmouseover 鼠标经过触发

3. onmouseout 鼠标离开触发

4. onfocus 获得鼠标焦点触发

5. onblur 失去鼠标焦点触发

6. onmousemove 鼠标移动触发

7. onmouseup 鼠标弹起触发

8. onmousedown 鼠标按下触发

显示当前系统时间案例：

修改元素内容

元素innerText ：内部文本

元素.innerHTML ：内部标签+文本  

元素对象的属性、方法，都支持获取，修改

innerText和innerHTML的区别

innerText 去除空格和换行  不识别html标签 非标准  

innerHTML 保留空格和换行的  识别html标签 W3C标准

var div = document.querySelector('div');

div.innerHTML = '今天是： 2019';   //今天是：2019 

操作、修改表单属性：

type、value、checked、selected、disabled

html标签中的属性值 ， 如果是可用，不可用，两种可选状态: checked、selected、disabled

元素对象中的属性值，boolean，true，false。

btn.disabled = true；

在对象的方法中 使用this：this 指向的是，事件函数的调用者 btn    

样式属性：

元素.style 行内样式操作；JS修改style样式操作，产生的是行内样式，CSS权重比较高

元素.className  类名样式操作 //只要是css里的style属性都可以跟？？？

Style里面的属性（大小、颜色、位置），采取驼峰命名法：fontSize、 backgroundColor

var div = document.querySelector('div');

//getElementsByTagName返回的是集合，只有id和querySelector是一个？？？

    div.onclick = function() {        

       this.style.backgroundColor = 'purple';

       this.style.width = '250px';

    }