javascript 09 web API DOM

API应用程序编程接口，是一些预先定义的函数，或方法。

任何开发语言都有自己的API

API的特征是输入和输出（I/O ）

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

DOM经常进行的操作：

获取元素

对元素进行操作（设置属性或方法）

动态创建元素

事件

获取网页上的元素，返回一个对象：document.getElementById()，doucemnt.getElementsByTagName(' ')　　//id唯一，所以element不是复数，而Tag Name标签名可能很多不唯一，所以是复数

　　document.getElementById()　　返回一个对象

　　doucemnt.getElementsByTagName(' ')　　返回一个集合对象(动态集合，无关html执行顺序，都可以获取到)，有索引，也可遍历

　　定义一个变量接受标签的id属性(一般和id名称一致) var main= doucument.getElementById('id名')　　//get 获取，element 元素，by 根据，id 表标示  

　　main= doucument.getElementById('id名')，main是一个对象。输出对象用console.dir()，可以输出所有属性和方法

获取二级标签：

var name = document.getElementById('name');

var divs = name.getElementsByTagName('div');　　//利用返回的name对象的属性，主要：id只能通过document对象来调用

其他获取元素的方法：有兼容问题，查文档

　　选择器获取：document.querySelector()　　id选择器可以获取一 个，类选择器只能获取到第一个

　　　　　　　　document.querySelectorAll()　　//获取所有

事件：当什么时候做什么事　　触发-响应 。事件都是on开头，是 当……的时候 的意思。例如onclick，当点击的时候。事件名称不是onclick，是click

 　　//制作一个按钮

bun=document.getElementById('bun');

bun.onclick = function(){alert('don't touch me!')}　　//设置事件处理函数

获取的元素一般和对应的标签有相同的属性：　　//注意，DOM对象的对应标签的class属性名字叫做className，因为class是关键字，关键字不可以作为属性名字 

点击换图片案例：

 事件处理函数中的this：指向事件源，即调用该事件的对象

js控制css样式：object.style.display = 'none';　　//开发的时候css可能是别人写的，在不改变代码的前提下修改css就需要自己再写一个样式，通过class或者id来改变

取消的默认行为(跳转)：

<a id = "qwe" href="xxxxx">百度a>
qwe = document.getElementById('qwe');
qwe.onclick = function(){return false;}    //在事件中return false，超链接就不跳转了

<div id="kuai">
    <a href="">
        <img src="">
    a>
    <a href="">
        <img src="">
    a>
    <a href="">
        <img src="">
    a>
    <a href="">
        <img src="">
    a>
div>
var kuai = document.getElementById('kuai');
//jihes 是a标签的集合
var jihes = kuai.getElementsByTagName('a');
for (var i = 0; i < jihes.length; i++) {
    var jihe = jihes[i];
    jihe.onclick = function(){
        var image = document.getElementById('image');
        image.src = this.src;    //此处只能用this不能用jihe。因为事件是在浏览器执行完代码之后触发的。用jihe.src的话只能找到最后一个遍历值。而this指向事件源，即遍历的元素中触发了事件的对象
        return false;
    } 
}