一、API 和 Web API

1.API

2.Web API

3.API 和 Web API總結

二、DOM 介紹

1. DOM樹

三、獲取元素方法

1.getElementById()

2.getElementsByTagName

2.1element.getElementsByTagName()

3.HTML5 新增的方法獲取

3.1 document.getElementsByClassName('類名')

3.2 document.querySelector('選擇器')

3.3 document.querySelectorAll('選擇器')

4.獲取 body 、html 元素

四、事件和樣式操作

1.事件概述

2.執行事件的步驟

2.1 常見的滑鼠事件

3. 操作元素

3.1 改變元素內容

3.2 修改元素屬性

3.3 修改表單元素的屬性

3.4 修改樣式屬性

一、API 和 Web API

1.API

API( Application Programming Interface,應用程式編程介面)
是一些預先定義的函式,目的是提供應用程式
與開發人員基于某軟體或硬體得以訪問一組例程的能力,而又無需訪問原始碼,或理解內部作業機制的細節，
簡單理解: API是給程式員提供的一種工具,以便能更輕松的實作想要完成的功能

2.Web API

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

比如我們想要瀏覽器彈出一個警示框,直接使用alert( '彈出')；

3.API 和 Web API總結

1. API是為我們程式員提供的一個介面,幫助我們實作某種功能，我們會使用就可以，不必糾結內部如何實作
2. Web API主要是針對于瀏覽器提供的介面，主要針對于瀏覽器做互動效果
3. Web API 一般都有輸入和輸出(函式的傳參和回傳值) ，Web API很多都是方法(函式)
4.學習Web API可以結合學習內置物件方法的思路學習

二、DOM 介紹

檔案物件模型( Document Object
Model ,簡稱DOM) ,是W3C組織推薦的處理可擴展標記語言( HTML或者XML )的標準編程介面
W3C已經定義了一系列的DOM介面，通過這些DOM介面可以改變網頁的內容、結構和樣式

1. DOM樹

檔案：一個頁面就是一個檔案，DOM中使用 document表示
元素：頁面中的所有標簽都是元素，DOM中使用 element表示
節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），DOM中使用 node表示

DOM把以上內容都看作是物件

三、獲取元素方法

1.getElementById()

使用 getElementById( ) 方法可以獲取帶有ID的元素物件

<div id="time" >2019-9-9 </div>
<script>
var timer = document.getElementById('time');
console.dir(timer);
</script>

//回傳結果為<div id= "time">2019-9-9</div>這一整個標簽

注意:
1.因為我們檔案頁面從上往下加載，先得有標簽所以我們script 寫到標簽的下面
2. get 獲得element 元素 by 通過駝峰命名法
3.引數 id 是大小寫敏感的字串
4.回傳的是一個元素的物件
5. console.dir 列印我們回傳的元素物件更好的查看里面的屬性和方法

2.getElementsByTagName

使用getElementsByTagName()方法可以回傳帶有指定標簽名的物件的集合
document.getElementsByTagName('標簽名');

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
    </script>

1. 回傳的是獲取過來元素物件的集合以偽陣列的形式存盤的

2. 我們想要依次列印里面的元素物件我們可以采取遍歷的方式
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}

3. 得到元素物件是動態的，標簽里面的內容變了，得到的內容就變了.

2.1element.getElementsByTagName()

element.getElementsByTagName() 可以得到這個元素里面的某些標簽

    <ul id = "nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var nav = document.getElementById('nav');
        var navLis = nav.getElementsByTagName('li');
    </script>

3.HTML5 新增的方法獲取

3.1 document.getElementsByClassName('類名')

根據類名回傳元素物件集合

 <div class="box" >123</div>
<script>
var boxs = document.getElementsByClassName('box');
</script>

3.2 document.querySelector('選擇器')

根據指定選擇器回傳第一個元素物件
注意:里面的選擇器需要加符號類選擇器：.box id選擇器： #box

var firstBox = document.querySelector('.box');

var nav = document.querySelector('#nav');

var firstBox = document.querySelector('li');

3.3 document.querySelectorAll('選擇器')

回傳指定選擇器的所有元素物件集合

var allBox = document.querySelectorAll('.box');

//回傳所有 class 名為 box 的標簽

4.獲取 body 、html 元素

var body = document.body ;
// 回傳 body 元素物件

var htmlEle = document.documentElement;
// 回傳 html 元素物件

四、事件和樣式操作

1.事件概述

JavaScript 使我們有能力創建動態頁面,而事件是可以被JavaScript偵測到的行為

簡單理解:觸發---回應機制

網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件,例如,我們可以在用戶點擊某按鈕時產生一個事件,然后去執行某些操作

事件是有三部分組成事件源事件型別事件處理程式

事件源事件被觸發的物件比如按鈕
事件型別如何觸發比如滑鼠點擊觸發
事件處理程式通過一個函式賦值的方式完成

2.執行事件的步驟

1. 獲取事件源

2. 注冊事件（系結事件）

3. 添加事件處理程式（采用函式賦值形式）

2.1 常見的滑鼠事件

滑鼠事件	觸發條件
onclick	滑鼠點擊左鍵觸發
onmouseover	滑鼠經過觸發
onmouseout	滑鼠離開觸發
onfocus	獲取滑鼠焦點觸發
onblur	失去滑鼠焦點觸發
onmousemove	滑鼠移動觸發
onmouseup	滑鼠彈起觸發
onmousedown	滑鼠按下觸發

3. 操作元素

JS的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等，注意一下都是屬性

3.1 改變元素內容

① element.innerText

可用于獲取標簽中的內容，此時獲取的是從起始位置到終止位置的內容，但它去除 html 標簽，同時空格和換行也會去掉

獲取到 p 標簽再列印 p 標簽中的內容
var p = document.querySelector('p');
console.log(p.innerText);

② element.innerHTML

獲取內容時，獲取的是起始位置到終止位置的全部內容，包括 html 標簽，同時保留空格和換行

獲取到 p 標簽再列印 p 標簽中的內容
var p = document.querySelector('p');
console.log(p.innerHTML);

普通標簽使用，表單不能用

3.2 修改元素屬性

src 、href、id 、 alt 、title

案例：點擊不同按鈕顯示不同圖片

    <title>Document</title>
    <style>
        img {
            width: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <button id="but1">按鈕1</button>
    <button id="but2">按鈕2</button>
    <br>
    <img src="../images/objpic07.jpg" alt="" title="圖片1">
    <script>
        var item1 = document.getElementById('but1');
        var item2 = document.getElementById('but2');
        var img = document.querySelector('img');
        item1.onclick = function() {
            img.src = '../images/objpic07.jpg';
            img.title = '圖片1';
        }
        item2.onclick = function() {
            img.src = '../images/objpic08.jpg';
            img.title = '圖片2';
        }
    </script>
</body>

3.3 修改表單元素的屬性

可操作的表單元素的屬性： type 、value、 checked、 selected、 disabled

按下按鈕修改表單框里面的內容，通過修改 value
input.value 等于 this.value 因為 this指向的是事件函式的呼叫者

案例：仿京東顯示隱藏密碼

 <title>Document</title>
    <style>
      .box {
          position: relative;
          width: 400px;
          border-bottom: 1px solid #ccc;
          margin: 100px auto;
      }
      .box input {
          width: 370px;
          height: 30px;
          border: 0;
          outline: none;
      }
      .box img {
          position: absolute;
          top: 2px;
          right: 2px;
          width: 24px;
      }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="../images/close.png" alt="" id="pic">
        </label>
        <input type="password" id="item">
    </div>
    <script>
          var item = document.getElementById('item');
          var pic = document.getElementById('pic');
          var flag = 0;
          pic.onclick = function() {
            if(flag == 0) {
                item.type = 'text';
                this.src = '../images/open.png';
                flag = 1;
            } else {
                item.type = 'password';
                this.src = '../images/close.png';
                flag = 0;
            }
          }
    </script>
</body>

3.4 修改樣式屬性

① element.style 行內樣式操作

② element.className 類名樣式操作

行內樣式案例：顯示與隱藏文本操作（當Input獲取焦點，文本框初始內容消失，失去焦點，內容出現）

 <title>Document</title>
    <style>
        input {
            color: #999;
            outline: none;
            height: 24px;
        }
    </style>
</head>
<body>
    <input type="text" value="手機">
    <script>
        var item = document.querySelector('input');
        item.onfocus = function() {
            if(this.value == '手機') {
                this.value = '';
            }
            this.style.color = '#333';
            this.style.border = '1px solid pink';
        }
        item.onblur = function() {
            if(this.value == '') {
                this.value = '手機';
            }
            this.style.color = '#999';
            this.style.border = '1px solid black';
        }
    </script>
</body>

類名樣式案例：密碼框驗證資訊（提示輸入6~16位密碼，不滿或超出提示錯誤，正確則提示正確）

 <title>Document</title>
    <style>
        .box {
            width: 400px;
            margin: 100px auto;
        }
        input {
            outline: none;
        }
        .pic {
            height: 15px;
            display: inline-block;
            line-height: 15px;
            text-indent: 18px;
            font-size: 13px;
            color:blue;
            background: url(../images/mess.png) no-repeat;
        }
        .wrong {
            background: url(../images/wrong.png) no-repeat;
            color: red;
        }

        .right {
            background: url(../images/right.png) no-repeat;
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="password" class="ipt">
        <p class="pic">請輸入6~16位的密碼</p>
    </div>
    <script>
        var item = document.querySelector('.ipt');
        var item2 = document.querySelector('.pic');
        item.onblur = function() {
            if(this.value.length < 6 || this.value.length > 16) {
                item2.className = 'pic wrong';
                item2.innerHTML = '您輸入的位數不對要求6~16位';
            } else {
                item2.className = 'pic right';
                item2.innerHTML = '您輸入的正確！';
            }
        }
    </script>
</body>

今天的分享到這里就結束啦~對你有幫助的話點個贊喲~~

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

標籤：其他

上一篇：前端面試題 Vuex 的基礎和應用方法

下一篇：寫大事件專案的get,post型別的介面

Web API介紹及DOM物件（一）

一、API 和 Web API

1.API

2.Web API

3.API 和 Web API總結

二、DOM 介紹

1. DOM樹

三、獲取元素方法

1.getElementById()

2.getElementsByTagName

2.1element.getElementsByTagName()

3.HTML5 新增的方法獲取

3.1 document.getElementsByClassName('類名')

3.2 document.querySelector('選擇器')

3.3 document.querySelectorAll('選擇器')

4.獲取 body 、html 元素

四、事件和樣式操作

1.事件概述

2.執行事件的步驟

2.1 常見的滑鼠事件

3. 操作元素

3.1 改變元素內容

3.2 修改元素屬性

3.3 修改表單元素的屬性

3.4 修改樣式屬性