web——12.webAPI

API   application Interface  应用接口

webAPI 使用JS完成一些有实际意义的工作——JS运行在浏览器中，可以增删查改浏览器允许其操作的数据。

操作文档（document）：页面上看到的            Document Object Model   DOM

操作窗口浏览器(browser)                                  Browser Object Model      BOM

1.文档对象

window.document 可以省略window document  代表看到的整个对象

1.如何找到某个或某些结点

document.querySelector(...)   参数是CSS中的选择器语法，使用字符串表示

1.元素选择器 p   2.ID选择器  #some-id     3.类选择器 .some-class

document.querySelector("htnl");      //找出html元素,一般找的都是符合条件的第一个

2.关于属性

1.html中的所有属性，全部表现查找出来的JS对象的属性

 <img src='dog.jpg'>

var img = doument.querySelector('img');

img.src   查找或修改

 

   

2.标签的内容文字也是其属性，记作textContent

3.关于class 属性，当然也可以修改。使用classList属性代替

  img.classList.add('一个类')   img.classList.remove('一个类')  img.classList.contains('一个类')

setTimeout(要执行的动作——一个函数，时间——单位ms)    只执行一次

setInterval（要执行的动作——一个函数，时间——单位 ms）每隔some time 执行一次

---

1.如何在文档树中定位结点   document.querySelector()    document.querySelectorAll()

2.修改结点本身的属性

        直接属性、textContent、classList

3.定时器的使用

4.变更树的结构

     通过html修改某个结点的子孙   element.innerHTML =''

 将内容作为普通文本来显示：

body.innerText   或者 body.textContent

 完全按照结点的方式处理：

1.创建一个元素（结点） 文档树之外的结点

 var e = document.createElement('img');

属性可以正常的赋值

e.id = '';   e.classList.add(...);

2.找到树中添加位置的父节点

var parent = document.querySelector('body');

parent.appendChild(e);   //把e作为parent的最后一个孩子添加上去

---

事件驱动

当某事发生时，谁们 应该做些什么

事件源（用户）                     事件               处理对象（按钮）                处理步骤（处理函数）

用onclick给btn赋值多个属性时，最后的属性会覆盖前面的，这时就需要使用addEventListener

事件的冒泡

阻止向上冒泡

---

JS的用法

1.js判等：== 与 === 有什么区别呢？

==会把不同类型转换成相同的类型。如果是不同的类型，使用===就直接返回false了。

var a = '0' ;   var b = 0;

alert(（a == b） + '__' +(a === b) )

最后输出的结果是   true __false

2.JS中的对象（关联数组）——JAVA中对象或者Map<String,Object>

(1)字面量定义：使用大括号    var o = {};

                                                var o ={'name': '小怪','age'：22'}

(2)访问属性（根据key对应value）

key无序，不是按照定义时的顺序

(3)可以随时添加新的Key 

(4)数据类型可以是函数

（5）类似方法的定义和使用

o.自我介绍 = function(）{console.log(   `我叫${this.name},我的性别是${this.gender}` )     }

这里的this不能省略

 （6）Java 中的类和对象封闭——定义时，属性数量、属性名称、方法数量、方法名称已经全部固定死了

JS中的更灵活。类的目标是对对象做限制，JS中不需要限制，所以没有类的概念。

但构造方法（初始化对象的过程是需要的）

---

1.变量没有类型，数据有类型

2.数据类型：数、字符串、布尔值、异常值（undefined、null）、数组（列表）、关联数组（对象）、函数

3.如何定义关联数组（对象）

        （1）字面量——直接使用大括号 {key: value,  key: value,....}

        （2）使用构造方法的方式function Person(){... }  var p = new Person()...

        （3）使用对象中的属性： p.name p['name']

        （4）易错的地方： p = person();    p = new person();  p = person;