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()，可以輸出所有屬性和方法

獲取二級標簽：

</div>

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

var divs = name.getElementsByTagName('div');　　//利用回傳的name物件的屬性，主要：id只能通過document物件來呼叫

其他獲取元素的方法：有兼容問題，查檔案

　　選擇器獲取：document.querySelector()　　id選擇器可以獲取一個，類選擇器只能獲取到第一個

　　　　　　　　document.querySelectorAll()　　//獲取所有

事件：當什么時候做什么事　　觸發-回應，事件都是on開頭，是當……的時候的意思，例如onclick，當點擊的時候，事件名稱不是onclick，是click

<input type="button" id='bun' value='https://www.cnblogs.com/xiaoyuheng/archive/2021/06/04/點我'>　　//制作一個按鈕

bun=document.getElementById('bun');

bun.onclick = function(){alert('don't touch me!')}　　//設定事件處理函式

獲取的元素一般和對應的標簽有相同的屬性：　　//注意，DOM物件的對應標簽的class屬性名字叫做className，因為class是關鍵字，關鍵字不可以作為屬性名字

點擊換圖片案例：

<img src = "https://www.cnblogs.com/xiaoyuheng/archive/2021/06/04/xxx" id='sss'>

<input type="button" id='bun' value='https://www.cnblogs.com/xiaoyuheng/archive/2021/06/04/點我'>

<script>

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

　　　　　　　　　　　　};　　
</script>

事件處理函式中的this：指向事件源，即呼叫該事件的物件

js控制css樣式：object.style.display = 'none';　　//開發的時候css可能是別人寫的，在不改變代碼的前提下修改css就需要自己再寫一個樣式，通過class或者id來改變

取消<a>的默認行為(跳轉)：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285949.html

標籤：其他

上一篇：JQuery總結

下一篇：JavaScript 10 DOM