JS的DOM操作1--獲取元素與修改元素(附帶動圖案例)

本文轉載自查看原文 2021-10-12 22:12 92 前端筆記/ 前端

1.1. Web API介紹

1.1.1 API的概念

API（Application Programming Interface，應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，無需理解其內部工作機制細節，只需直接調用使用即可。

舉例解釋什么是API。

例如，

C語言中有一個函數 fopen()可以打開硬盤上的文件，這個函數對於我們來說，就是一個C語言提供的打開文件的工具。

javascript中有一個函數alert()可以在頁面彈一個提示框，這個函數就是js提供的一個彈框工具。

這些工具（函數）由編程語言提供，內部的實現已經封裝好了，我們只要學會靈活的使用這些工具即可。

1.1.2 Web API的概念

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

現階段我們主要針對於瀏覽器講解常用的 API , 主要針對瀏覽器做交互效果。比如我們想要瀏覽器彈出一個警示框，直接使用 alert(‘彈出’)

MDN 詳細 API : https://developer.mozilla.org/zh-CN/docs/Web/API

因為 Web API 很多，所以我們將這個階段稱為 Web APIs。

此處的 Web API 特指瀏覽器提供的一系列API(很多函數或對象方法)，即操作網頁的一系列工具。例如：操作html標簽、操作頁面地址的方法。

1.1.3 API 和 Web API 總結

API 是為我們程序員提供的一個接口，幫助我們實現某種功能，我們會使用就可以了，不必糾結內部如何實現
Web API 主要是針對於瀏覽器提供的接口，主要針對於瀏覽器做交互效果。
Web API 一般都有輸入和輸出（函數的傳參和返回值），Web API 很多都是方法（函數）
學習 Web API 可以結合前面學習內置對象方法的思路學習

1.2. DOM 介紹

1.2.1 什么是DOM

文檔對象模型（Document Object Model，簡稱DOM），是 W3C 組織推薦的處理可擴展標記語言（html或者xhtml）的標准編程接口。

W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。

DOM是W3C組織制定的一套處理 html和xml文檔的規范，所有的瀏覽器都遵循了這套標准。

1.2.2. DOM樹

在這里插入圖片描述

DOM樹又稱為文檔樹模型，把文檔映射成樹形結構，通過節點對象對其處理，處理的結果可以加入到當前的頁面。

文檔：一個頁面就是一個文檔，DOM中使用document表示
節點：網頁中的所有內容，在文檔樹中都是節點（標簽、屬性、文本、注釋等），使用node表示
標簽節點：網頁中的所有標簽，通常稱為元素節點，又簡稱為“元素”，使用element表示

1.3. 獲取元素

為什么要獲取頁面元素？

例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，再對其進行操作。

1.3.1. 根據ID獲取

語法：document.getElementById(id)
作用：根據ID獲取元素對象
參數：id值，區分大小寫的字符串
返回值：元素對象 或 null

1.3.2. 根據標簽名獲取元素

語法：document.getElementsByTagName('標簽名') 或者 element.getElementsByTagName('標簽名') 
作用：根據標簽名獲取元素對象
參數：標簽名
返回值：元素對象集合（偽數組，數組元素是元素對象）

案例代碼

<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
    <ul id="nav">
        <li>啦啦啦啦</li>
        <li>啦啦啦啦</li>
        <li>啦啦啦啦</li>
        <li>啦啦啦啦</li>
        <li>啦啦啦啦</li>
    </ul>
    <script>
        // 1.返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到這個元素里面的某些標簽
        var nav = document.getElementById('nav'); // 這個獲得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意：getElementsByTagName()獲取到是動態集合，即：當頁面增加了標簽，這個集合中也就增加了元素。

1.3.3. H5新增獲取元素方式

在這里插入圖片描述

案例代碼

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首頁</li>
            <li>產品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根據類名獲得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定選擇器的第一個元素對象  切記 里面的選擇器需要加符號 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定選擇器的所有元素對象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

1.3.4 獲取特殊元素（body，html）

獲取body對象

document.body //返回body元素對象

獲取html對象

document.documentElement //獲取HTML元素對象

1.4. 事件基礎

1.4.1. 事件概述

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

簡單理解： 觸發--- 響應機制。

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

1.4.2. 事件三要素

事件源（誰）：觸發事件的元素
事件類型（什么事件）：例如 click 點擊事件
事件處理程序（做啥）：事件觸發后要執行的代碼(函數形式)，事件處理函數

案例代碼

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 點擊一個按鈕，彈出對話框
        // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱為事件三要素
        //(1) 事件源 事件被觸發的對象   誰  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件類型  如何觸發 什么事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
        //(3) 事件處理程序  通過一個函數賦值的方式 完成
        btn.onclick = function() {
            alert('點秋香');
        }
    </script>
</body>

1.4.3. 執行事件的步驟

在這里插入圖片描述

案例代碼

<body>
    <div>123</div>
    <script>
        // 執行事件步驟
        // 點擊div 控制台輸出 我被選中了
        // 1. 獲取事件源
        var div = document.querySelector('div');
        // 2.綁定事件 注冊事件
        // div.onclick 
        // 3.添加事件處理程序 
        div.onclick = function() {
            console.log('我被選中了');
        }
    </script>
</body>

1.4.4. 常見的鼠標事件

1.4.5. 分析事件三要素

下拉菜單三要素
關閉廣告三要素

1.5. 操作元素

JavaScript的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等。（注意：這些操作都是通過元素對象的屬性實現的）

1.5.1. 改變元素內容（獲取或設置）

在這里插入圖片描述

innerText改變元素內容

<body>
    <button>顯示當前系統時間</button>
    <div>某個時間</div>
    <p>1123</p>
    <script>
        // 當我們點擊了按鈕，  div里面的文字會發生變化
        // 1. 獲取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注冊事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }
        function getDate() {
            var date = new Date();
            // 我們寫一個 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

innerText和innerHTML的區別

獲取內容時的區別：

innerText會去除空格和換行，而innerHTML會保留空格和換行

設置內容時的區別：

innerText不會識別html，而innerHTML會識別

案例代碼

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的區別 
        // 1. innerText 不識別html標簽 非標准  去除空格和換行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 識別html標簽 W3C標准 保留空格和換行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 這兩個屬性是可讀寫的  可以獲取元素里面的內容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

1.5.2. 常用元素的屬性操作

在這里插入圖片描述

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

1.5.3. 案例：分時問候

在這里插入圖片描述

    <style>
        img {
            width: 300px;
        }
    </style>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        // 根據系統不同時間來判斷，所以需要用到日期內置對象
        // 利用多分支語句來設置不同的圖片
        // 需要一個圖片，並且根據時間修改圖片，就需要用到操作元素src屬性
        // 需要一個div元素，顯示不同問候語，修改元素內容即可
        // 1.獲取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 得到當前的小時數
        var date = new Date();
        var h = date.getHours();
        // 3. 判斷小時數改變圖片和文字信息
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '親，上午好，好好寫代碼';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '親，下午好，好好寫代碼';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '親，晚上好，好好寫代碼';

        }
    </script>

1.5.4. 表單元素的屬性操作

在這里插入圖片描述

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

表單元素中有一些屬性如：disabled、checked、selected，元素對象的這些屬性的值是布爾型。

案例代碼

<body>
    <button>按鈕</button>
    <input type="text" value="輸入內容">
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注冊事件 處理程序
        btn.onclick = function() {
            // 表單里面的值 文字內容是通過 value 來修改的
            input.value = '被點擊了';
            // 如果想要某個表單被禁用 不能再點擊 disabled  我們想要這個按鈕 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函數的調用者 btn
        }
    </script>
</body>

1.5.5. 案例：仿京東顯示密碼

請添加圖片描述

    <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>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 獲取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注冊事件 處理程序
        var flag = 0;
        eye.onclick = function() {
            // 點擊一次之后， flag 一定要變化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 賦值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }
        }
               // eye.onclick=function(){
        //     if(pwd.type =='password'){
        //         pwd.type='text';
        //         eye.src = 'images/open.png';
        //         // flag=1;

        //     }else{
        //         pwd.type='password';
        //         eye.src = 'images/close.png';
        //         // flag=0;
        //     }
        // }
        

    </script>

1.5.6. 樣式屬性操作

我們可以通過 JS 修改元素的大小、顏色、位置等樣式。

常用方式

在這里插入圖片描述

方式1：通過操作style屬性

元素對象的style屬性也是一個對象！

元素對象.style.樣式屬性 = 值;

在這里插入圖片描述

案例代碼

<body>
    <div></div>
    <script>
        // 1. 獲取元素
        var div = document.querySelector('div');
        // 2. 注冊事件 處理程序
        div.onclick = function() {
            // div.style里面的屬性 采取駝峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

案例：淘寶點擊關閉二維碼

請添加圖片描述

    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        .box img {
            width: 60px;
            margin-top: 5px;
        }  
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘寶二維碼
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 獲取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注冊事件 程序處理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>

案例：循環精靈圖背景

在這里插入圖片描述

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1. 獲取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 讓索引號 乘以 44 就是每個li 的背景y坐標  index就是我們的y坐標
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

案例：顯示隱藏文本框內容

請添加圖片描述

    <style>
        input {
            color: #999;
        }
    </style>
<body>
    <input type="text" value="手機">
    <script>
        // 1.獲取元素
        var text = document.querySelector('input');
        // 2.注冊事件 獲得焦點事件 onfocus 
        text.onfocus = function () {
            // console.log('得到了焦點');
            if (this.value === '手機') {
                this.value = '';
            }
            // 獲得焦點需要把文本框里面的文字顏色變黑
            this.style.color = '#333';
        }
        // 3. 注冊事件 失去焦點事件 onblur
        text.onblur = function () {
            // console.log('失去了焦點');
            if (this.value === '') {
                this.value = '手機';
            }
            // 失去焦點需要把文本框里面的文字顏色變淺色
            this.style.color = '#999';
        }
    </script>

方式2：通過操作className屬性

元素對象.className = 值;

因為class是關鍵字，所有使用className。

在這里插入圖片描述

案例代碼

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 獲得修改元素樣式  如果樣式比較少 或者 功能簡單的情況下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我們可以通過 修改元素的className更改元素的樣式 適合於樣式較多或者功能復雜的情況
            // 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

案例：密碼框格式提示錯誤信息

請添加圖片描述

    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
    
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">請輸入6~16位密碼</p>
    </div>
    <script>
        // 首先判斷的事件是表單失去焦點 onblur
        // 如果輸入正確則提示正確的信息顏色為綠色小圖標變化
        // 如果輸入不是6到16位，則提示錯誤信息顏色為紅色 小圖標變化
        // 因為里面變化樣式較多，我們采取className修改樣式
        // 1.獲取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注冊事件 失去焦點
        ipt.onblur = function() {
            // 根據表單里面值的長度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('錯誤');
                message.className = 'message wrong';
                message.innerHTML = '您輸入的位數不對要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您輸入的正確';
            }
        }
    </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS的DOM操作2--創建自定義屬性和節點(附帶動圖案例) JS的基礎DOM操作-選取父子級元素、動態生成元素、修改元素、Classlist Dom修改元素樣式 js修改元素的屬性 JavaScript--DOM修改元素的屬性 WebDriver中新增、修改元素屬性操作 - js操作 JS修改元素的屬性 js修改元素的屬性 JS根據offsetHeight修改元素的高度 JS 獲取元素、修改元素/css樣式/標簽屬性、簡單事件、數據類型