web api

Web API介紹

API 概念

api (Application Programming Interface, 應用程序編程接口) 是一些預先定義的函數, 目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力, 而又無需訪問源碼, 或理解內部工作機制的細節.

Web API 的概念

瀏覽器提供的一套操作瀏覽器功能和頁面元素的API(包括BOM和DOM)

JavaScript 的組成

ECMAScript - JavaScript 的核心

定義了JavaScript的語法規範
JavaScript的核心, 描述了語言的基本語法和數據類型, ECMAScript是一套標準, 定義了一種語言的標準與具體實現無關

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器窗口, 比如: 彈出框/控制瀏覽器跳轉/獲取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的API
DOM可以把HTML看做是文檔樹, 通過DOM提供的API可以對樹上的節點進行操作
DOM可以把HTML看作是文檔樹, 通過DOM提供的API可以對書上的節點進行操作

DOM

DOM的概念

文檔對象模型(Document Object Model, 簡稱DOM), 是w3c組織推薦的處理可擴展標記語言的標準編程接口.她是一種與平臺和語言無關的應用程序接口(API), 她可以動態地訪問程序和腳本,更新其內容,結構和www文檔的風格(目前, HTML和XML文檔是通過說明部分定義的). 文檔可以進一步被處理, 處理的結果可以加入到當前的頁面. DOM是一種基於樹的API文檔, 她要求在處理過程中整個文檔都表示在存儲器中.

DOM 又稱爲文檔樹模型

• 文檔: 一個網頁可以稱爲文檔
• 節點: 網頁中的所有內容都是節點(標籤/屬性/文本/註釋等)
• 元素: 網頁中的標籤
• 屬性: 標籤的屬性

DOM經常進行的操作

• 獲取元素
• 對元素進行操作(設置其屬性或調用其方法)
• 動態創建元素
• 時間(什麼時機做相應的操作)

以對象的形式打印頁面元素

var box = document.getElementById('box');
console.dir(box)
console.log(box); // 以標籤的形式打印元素

數組/函數/object 都是對象

獲取頁面的元素

	// element表示可以用元素調用該方法
    document.getElementById('id的值')//通過id獲取頁面上的元素  返回對象 ,找不到返回null
    document/element.getElementsByTagName('標籤名') //通過標籤名獲取元素  返回僞數組  找不到返回空的僞數組
    document/element.getElementsByClassName('class屬性的值')//通過類名獲取元素  返回的僞數組  
    document.getElementsByName('name屬性的值')   //通過name屬性獲取元素   返回僞數組
    document/element.querySelector('對應的選擇器')  //傳參:通過類 .類名   通過id  #id名  返回的是對象(所有符合條件的第一個)  找不到 null
    document/element.querySelectorAll('對應的選擇器') // 傳參同上    返回的是僞數組

alert(helloword), helloword是變量, 變量需要定義; 加引號纔是字符串, 纔可以被alert出.

a標籤有利於SEO, 所以經常被使用到, 比如輪播圖的小點點

註冊事件的方法

1. 獲取對象
2. 對象.onclick = function() {
	return false; // 如果事件是註冊給a標籤的, 可以阻止a標籤的跳轉
	}

操作元素的屬性

 var img = document.querySelector('img');
 img.src = './b.jpg'; // 這裏img標籤的src屬性值就變了

innerText和innerHTML用於雙標籤, 不適用於input這樣的單標籤~

flag要在事件外面聲明, 事件裏面修改flag的值纔會在下一次執行該事件的時候有效; 如果寫在裏面, 每次進入事件都一個樣

操作元素的樣式

var div = document.querySelector('div');
div.style.backgrounColor = 'pink'; // 設置了行內樣式

操作元素的類名

var div = document.querySelector('div');
方法一: 把所有的類名都寫上, 不能分開寫, 否則會覆蓋
div.className = 'big  box';
方法二: 在原來類名的基礎上加一個, 注意新加的字符串前面要有個空格
div.className += ' box';
方法三: 替換類名, 把原來的類名'big', 改成'small'
div.className = div.className.replace('big', 'small');

tip: 獲取(找)body ==> document.body

操作自定義屬性

自定義屬性, 是元素本身沒有的, 我們自己給它加的.
加自定義屬性的目的, 可以存儲信息(存儲信息, 也可以直接存到元素對象上, 給元素對象加個鍵值對).
操作自定義屬性, 只能使用attr這三個api, 但是這三個api也可以操作元素本身的屬性.

var div = document.querySelector('div');
div.setAttribute('index', '1'); // 給元素設置自定義屬性和值
console.log(div.getAttribute('index')) // 獲取元素自定義屬性的值
div.removeAttribute(''index); // 刪除元素的自定義屬性