WebAPI
API：應用程式程式設計接口，是一些預先定義的函數，由某個軟體開放給開發人員使用的，幫助開發者實作某種功能，開發人員無須通路源碼、無須了解其内部工作機制細節，隻需知道如何使用即可
簡單了解： API 是給程式員提供的一種工具，以便能更輕松的實作想要完成的功能
WebAPI：主要針對浏覽器的API，在JavaScript語言中被封裝成了對象，通過調用對象的屬性和方法就可以使用Web API
簡單了解：Web API 是浏覽器提供的一套操作浏覽器功能和頁面元素的 API ( BOM 和 DOM )
DOM
文檔對象模型，是W3C組織推薦的處理可擴充标記語言(HTML或者XML)的标準程式設計接口
DOM樹
DOM将HTML文檔處理成樹形(倒)結構，将html文檔看作是一棵樹，文檔中的标簽、标簽的屬性、标簽的内容都是數的節點
DOM樹最頂端是document，BOM最頂端是window
文檔(document)一個頁面當成文檔
元素(element)頁面中所有标簽元素
節點(node)網頁中的所有内容，在文檔樹中都是節點(如：元素節點、屬性節點、文本節點、注釋節點等)，每個節點都是對象，都有屬性和方法
DOM擷取元素方式
擷取方式
用法
傳回值
根據Id擷取
document.getElementById(‘id')
傳回指定id的元素對象，未找到傳回null，存在多個id傳回undefined
根據标簽名
document.getElementsByTagName(‘标簽名')
傳回的是指定标簽的動态集合，是一個類數組對象，僞數組，但不是數組。可以通過下标索引通路
根據Name擷取
document.getElementByName(‘name屬性值')
傳回指定name的元素對象集合
根據ClassName擷取(html5新增)
document.getElementByClassName(‘class屬性值')
傳回指定classname的元素對象集合
根據選擇器擷取(新增)
document.querySelector(‘選擇器')
擷取的是給定選擇器元素，隻能傳回給定選擇器第一個元素
根據選擇器擷取(新增)
document.querySelectorAll(‘選擇器')
擷取的是給定選擇器元素，傳回元素的集合
document對象屬性
方法
作用
document.body
傳回文檔的body元素
document.title
傳回文檔的title元素，表示頁面的标題
document.documentElement
傳回文檔的html元素，即HTML頁面的全部資訊(通過此可以将文檔全部元素放進一個字元串，供别人讀取分析
document.froms
傳回對文檔中所有From對象引用，複數形式，可以傳回多個表單
document.images
傳回對文檔中所有的image對象，與上述一樣
事件
事件：使用者進行某種操作(可被JavaScript偵測到的行為)，是一種“觸發-響應”的機制，是實作頁面互動的方式
事件三要素：
事件源：誰觸發了事件事件類型：觸發了什麼事件事件處理程式：事件被觸發後所執行的代碼(函數形式)
事件的使用步驟
單擊
var btn = document.getElementById('btn')// 第1步：擷取事件源
// 第2步：注冊事件btn.onclick
btn.onclick = function () { // 第3步：添加事件處理程式(采取函數指派形式)
alert('彈出')
}
事件名=函數名([參數])
注意：建立按鈕的方式(2種)
按鈕顯示文字
事件的類型
操作元素
操作元素内容
DOM提供的屬性實作對元素内容的操作方法：
innerHTML (W3C)識别html标簽。在使用時會保留編寫的格式以及标簽樣式
innerText(非标準)不識别html标簽。去掉所有格式以及标簽的純文字内容
textContent屬性在去掉标簽後會保留文本格式
The first paragraph...
The second paragraph...
third
var box = document.getElementById('box')
console.log(box.innerHTML)
console.log(box.innerText)
console.log(box.textContent)
操作元素屬性
在DOM中，HTML屬性操作是指使用JavaScript來操作一個元素的HTML屬性
元素中：src、href等
表單中：id、alt、title等
操作元素樣式
①操作style屬性：元素對象.style.樣式屬性名
樣式屬性名對應CSS樣式名，但需要去掉CSS樣式名裡的半字線“-”，并将半字線後面的英文的首字母大寫
var ele = document.querySelector('#box'); // 擷取元素對象
ele.style.backgroundColor= 'red';
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.transform = 'rotate(7deg)';
#box {
background-color: red;
width: 100px;
height: 100px;
transform: rotate(7deg);
}
②操作className屬性：元素對象.className
在開發中，如果樣式修改較多，可以采取操作類名的方式更改元素樣式
通路className屬性的值表示擷取元素的類名，為className屬性指派表示更改元素類名
className會更改元素的類名，會覆寫原先的類名
如果元素有多個類名，在className中以空格分隔
排他思想
如果有同一組元素，要某一個元素實作某種樣式， 需要用到循環的排他思想算法：
所有元素全部清除樣式(幹掉其他人)
給目前元素設定樣式 (留下我自己)
注意順序不能颠倒，首先幹掉其他人，再設定自己
H5自定義屬性
自定義屬性目的： 是為了儲存并使用資料。有些資料可以儲存到頁面中而不用儲存到資料庫中
有些自定義屬性很容易引起歧義，不容易判斷是元素的自帶屬性還是自定義屬性，HTML5新增了自定義屬性的規範，在HTML5中規定通過“data-屬性名”的方式設定自定義屬性
設定屬性值：
①在HTML中設定自定義屬性
data-屬性名=‘值'
// 在div元素上設定data-index屬性
②在JavaScript中設定自定義屬性
element.setAttribute(‘屬性', 值)
element.dataset.屬性名=‘值'
var div = document.querySelector('div');
div.dataset.index = '2';
div.setAttribute('data-name', 'andy');
擷取屬性值：
element.getAttribute()
element.dataset.屬性
element.dataset[‘屬性'] (有相容性問題)
注意： dataset是一個集合，裡面存放了所有以data開頭的自定義屬性，如果自定義屬性裡面包含有多個連字元(-)時，擷取的時候采取駝峰命名法
var div = document.querySelector('div');
console.log(div.getAttribute('data-index')); // 結果為：2
console.log(div.getAttribute('data-list-name')); // 結果為：andy
// HTML5新增的擷取自定義屬性的方法，隻能擷取“data-”開頭的屬性
console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
console.log(div.dataset.index); // 結果為：2
console.log(div.dataset['index']); // 結果為：2
console.log(div.dataset.listName); // 結果為：andy
console.log(div.dataset['listName']); // 結果為：andy
移除屬性值：
element.removeAttribute(‘屬性')
var div = document.querySelector('div');
div.removeAttribute('id'); // 移除div元素的id屬性
div.removeAttribute('class'); // 移除div元素的class屬性
總結
到此這篇關于JavaScript WebAPI、DOM、事件和操作元素的文章就介紹到這了,更多相關js WebAPI、DOM、事件和操作元素内容請搜尋腳本之家以前的文章或繼續浏覽下面的相關文章希望大家以後多多支援腳本之家！