WebAPI 基础学习01

1、API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了
Web API主要是针对浏览器提供的接口，主要针对浏览器做交互效果

2、DOM：文档对象模型，
通过DOM接口可以改变页网页的内容，结构和样式
我们获取过来的DOM元素是一个对象（obj），所以我们称之为文档对象模型

3、文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素 Element
节点：网页中的所有内容都是节点（标签，属性，文本，注释等）
DOM把以上所有内容都看作对象

一、获取页面元素

1、如何获取页面元素
（1）根据ID获取
document . getElementById ( 'id ') 获取带有ID的元素对象
1、id是大小写敏感的字符串；因此一定要写成字符串的形式
2、返回的是一个元素对象
3、 console.dir(timer) 可以打印我们返回的元素对象，更好的查看里面的属性和方法
注意：因为页面文档从上往下加载，所以先得有标签，所以在学习的时候我们script写到标签的下面

（2）根据标签名获取
document .getElementsByTagName ( ’ 标签名’ ) 方法可以返回带有指定标签名的对象的集合
1、返回的是获取过来元素对象的集合，以伪数组的形式存储的
2、如果想要一次打印里面的元素对象，可以采取遍历的方式
3、可以采取element . getElementsByTagName，可以得到这个元素里面的某些标签

（3）通过HTML5新增的方法获取
document .getElementsByClassName ( ’ 类名’ ) ，根据类名获得某些元素

document . querySelector（’ 选择器’) ；根据指定选择器，返回第一个元素对象
切记括号里面需要加符号：#是表示ID选择器； . 表示class选择器；

document . querySelectorAll（’ 选择器’) ；根据指定选择器返回所有的元素对象，
（4）获取body元素
document . body；
获取HTML元素
document . documentElement

二、事件

1、事件
事件由三部分组成：事件源，事件类型，事件处理程序
事件源：事件被触发的对象 （ 谁被触发？）
事件类型：如何让触发，什么事件，比如鼠标点击触发（onclick），鼠标经过触发或者键盘按下触发 （通过什么被触发？）
事件处理程序：通过一个函数赋值的方式来完成 （做了什么事？）

eg:
唐伯虎

(1)执行事件的步骤
1、获取事件源 (获取了事件源才能进行操作）
2、注册事件（绑定事件）
3、添加事件处理程序（采取函数赋值的形式）

三、操作元素

1、操作元素

（1）改变元素的内容

element . innerText （非标准）
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element . innerHTML （使用最多！！！）
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行，针对普通盒子才使用，对表单不适用

两者的区别：
（1）、element . innerText不识别HTML标签，element . innerHTML要识别HTML标签，
（2）两者都是可读取的，可以获取元素里面的内容,也可以往里面添加内容

注意：我们元素也可以不添加事件（这样就会在页面上一直显示,只要一运行就会显示在页面上）

eg： var p = document.querySelector(‘p’);
p.innerHtml = getTime();
这里就没有添加事件

（2）修改元素的属性

元素 . 属性值=‘要修改的值’
eg: // 获取元素
var ldh = document.getElementById(‘ldh’);
var zxy = document.getElementById(‘zxy’);
var img = document.querySelector(‘img’);
// 注册事假，处理程序
zxy.onclick = function() {
img.src = ‘images/zxy.jpg’;
img.title = ‘张学友’;
}

(3）表单元素的属性操作

表单最常见的属性：type，value，checked，selected，disabled(禁用按钮，鼠标点击了一次后就不能再点了，就变成了灰色的了)

1、表单输入的密码显示可见和不可见
要用flag 来做
eg : var flag = 0;
img.onclick = function() {
// 点击一次后，flag的值一定要发生变化，要不然就只能点一次
if (flag == 0) {
input.type = ‘text’;
img.src = ‘images/open.png’;
flag = 1; // 如果flag一直是0，那么就不会转换了，一次一定要重新赋值flag
} else {
input.type = ‘password’;
img.src = ‘images/close.png’;
flag = 0;
}
}
这里面的 onclick 就相当于循环，你点击一次，里面的函数语句执行一次，再点击一次，又重新执行

（4）样式属性操作

通过JS修改元素的大小，颜色和位置等样式

element . style：行内样式操作 （适用于修改的样式比较少）
他会把在JS中写的样式添加到HTML代码中的行内样式里面去，因此他的权重比CSS权重高

element . className： 类名样式操作 (适用于修改的样式比较多）
className会直接更改元素的类名，覆盖原先的类名
若果想要保留原来的类名可以这样写(多类名选择器）：
element . className=’ 原来的类名 现在的类名 ’
eg:

eg : 精灵图用for循环做的例子
// 获取元素
var lis = document.querySelectorAll(‘li’);
for (var i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = ‘0 -’ + index + ‘px’;
// X坐标和Y坐标之间用空格
}

（5）表单新事件

onfocus：获得焦点
onblur：失去焦点
显示隐藏文本框里面的内容的例子：

 <input type="text" value="手机">
<script>
    // 获取元素
    var text = document.querySelector('input');
    // 注册事件，获得焦点事件
    text.onfocus = function() {
            if (this.value === '手机') {
                this.value = '';
            }
            // 当我们在文本框里面输入文字，里面的文字颜色要加深
            this.style.color = 'black';
        }
        // 注册事件，失去焦点事件
    text.onblur = function() {
        if (this.value === '') {
            this.value = '手机';
        }
        // 当不输入文字的时候，手机这两个字又要变回以前的颜色
        this.style.color = '#ccc';
    }
</script>