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