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()，能够输出全部属性和方法

 

获取二级标签：

　　

123

　　

456

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是关键字，关键字不能够做为属性名字 

点击换图片案例：

var sss = document.getElementById('sss');
　　bun=document.getElementById('bun');

　　var flag = 1;　　//经过控制flag的数值来实现图片循环切换　　//经过更改属性值来实现点击切换图片　　bun.onclick = function(){

　　　　　　if(flag===1){
                      sss.src="yyy";
　　　　　　　　flag = 2;
　　　　　　　　　　　 }elseif(flag===2){
　　　　　　　　　　　　　　　sss.src="xxx";
　　　　　　　　　　　　　　　flag =1;
　　　　　　　　　　　　　　　　}　　

　　　　　　　　　　　　};　　" _ue_custom_node_="true">

 事件处理函数中的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，超连接就不跳转了

 

 

获取标签集合的时候，须要其中每一个标签触发事件能够用this。this指向事件源，即标签集合中的各个元素而不是标签的集合总体

<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;
    } 
}