Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

DOM

Document Object Model 文檔對象模型：作用就是對象的方式操作HTML和CSS樣式的

DOM中有哪些對象，這些對象有哪些屬性和方法。

DOM編程的步驟：
  1、獲取元素對象。

  2、操作元素對象的屬性或方法。
獲取元素對象：

document.getElementById(id名) ：根據id的值選擇對應的元素對象。(一個對象)

document.getElementsByTagName(標籤名)：根據標籤名獲取元素對象的僞數組。

document.getElementsByClassName(類名)：根據類名獲取元素對象的僞數組。

document.querySelector(css選擇器): 根據css選擇器選擇第一個找到的元素對象。

document.querySelectorAll(css選擇器)：根據css選擇器選擇所有找到的元素對象的僞數組。

事件驅動

事件的三個要素：
  1、事件源：發生事件的那個東西（元素對象）

  2、事件處理程序（監聽器）：發生事件後，需要執行的代碼

  3、事件（事件自身）：發生的那件事
事件驅動程序編寫的三個步驟：
  1、搞一個事件源

  2、編寫一個事件驅動程序（監聽程序）

  3、綁定事件源和事件處理程序

API的概念

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

簡單理解:API是給程序員提供的一種工具、以便能更輕鬆的實現想要完成的功能

例如
C語言中有一個函數 fopen()可以打開硬盤上的文件，這個函數對於我們來說，就是一個C語言提供的打開文件的工具。
javascript中有一個函數alert()可以在頁面彈一個提示框，這個函數就是js提供的一個彈框工具。
這些工具（函數）由編程語言提供，內部的實現已經封裝好了，我們只要學會靈活的使用這些工具即可。

Web API的概念

Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API ( BOM 和 DOM )。
MDN 詳細 API : https://developer.mozilla.org/zh-CN/docs/Web/API

總結

API 是爲我們程序員提供的一個接口，幫助我們實現某種功能

Web API 主要是針對於瀏覽器提供的接口，主要針對於瀏覽器做交互效果。

Web API 一般都有輸入和輸出（函數的傳參和返回值），Web API 很多都是方法（函數）

DOM 介紹

什麼是DOM:**使用對象的方式操作HTML與Css**

文檔對象模型（Document Object Model，簡稱DOM），是 W3C 組織推薦的處理可擴展標記語言（html或者xhtml）的標準編程接口。
W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。DOM是W3C組織制定的一套處理 html和xml文檔的規範，所有的瀏覽器都遵循了這套標準。

DOM樹

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

文檔：一個頁面就是一個文檔，DOM中使用document表示

節點：網頁中的所有內容，在文檔樹中都是節點（標籤、屬性、文本、註釋等），使用node表示

標籤節點：網頁中的所有標籤，通常稱爲元素節點，又簡稱爲“元素”，使用element表示

DOM把以上的內容都看作是對象、Dom就是使用對象的方式操作HTML與Css

獲取元素

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

根據ID獲取

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


<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因爲我們文檔頁面從上往下加載，所以先得有標籤 所以我們script寫到標籤的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我們返回的元素對象 更好的查看裏面的屬性和方法
        console.dir(timer);
    </script>
</body>

根據標籤名獲取元素

語法：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]);
        }
       // 如果頁面中只有一個li 返回的還是僞數組的形式 
       // 如果頁面中沒有這個元素 返回的是空的僞數組的形式
        // 3. element.getElementsByTagName()  可以得到這個元素裏面的某些標籤
        var nav = document.getElementById('nav'); // 這個獲得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注：

因爲得到的是一個對象的集合、、以僞數組的形式存儲的、所有操作元素需要用到遍歷、
得到的元素對象是動態的
如果頁面中只有一個li 返回的還是僞數組的形式
如果頁面中沒有這個元素返回的是空的僞數組的形式

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

H5新增獲取元素方式

document.getElementsByclassName(‘類名’)//根據類名返回元素集合
document.querySelector(‘選擇器’)//根據類名返回元素集合
document.querySelectorAll(‘選擇器’)//根據指定選擇器返回

注：querySelector和querySelectAll裏面的選擇器需要加符號、如document.querySelector(‘#nav’)

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

獲取特殊元素（body，html）

    // 1.獲取body 元素
    var bodyEle = document.body;
    console.log(bodyEle);//返回body元素對象 
    console.dir(bodyEle);
    // 2.獲取html 元素
    //var htmlEle = document.html;//undefined
    var htmlEle = document.documentElement;
    console.log(htmlEle);//返回html元素對象

事件基礎

事件概述

JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行爲。
簡單理解： 觸發— 響應機制。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產生一個事件，然後去執行某些操作。

事件三要素

事件源（誰）：觸發事件的元素

事件類型（什麼事件）：例如 click 點擊事件

事件處理程序（做啥）：事件觸發後要執行的代碼(函數形式)，事件處理函數

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

執行事件的步驟

獲取事件源

註冊事件(綁定事件)

添加事件處理程序(採取函數賦值形式)

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

常見的鼠標事件

** 操作元素**

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

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

屬性	說明
element.innerText	從起始位置到終止位置的內容、不包括html標籤、空格與換行也會去掉、
element.innerHTML	從起始位置到終止位置的內容、包括html標籤、保留空格與換行

innerText改變元素內容

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

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、innerText、innerHTML //改變元素內容
2、src、href
3、id、alt、title

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

案例代碼

<body>
    <button id="ldh">劉德華</button>
    <button id="zxy">張學友</button> <br>
    <img src="images/ldh.jpg" alt="" title="劉德華">
    <script>
        // 修改元素屬性  src
        // 1. 獲取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 註冊事件  處理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '張學友';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '劉德華';
        }
    </script>
</body>

案例：分時問候

    <style>
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
</body>
<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>

表單元素的屬性操作

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

獲取屬性的值
元素對象.屬性名
設置屬性的值
元素對象.屬性名 = 值

表單元素中有一些屬性如：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>

仿京東顯示密碼案例

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

        }
    </script>
</body>

樣式屬性操作
**通過 JS 修改元素的大小、顏色、位置等樣式。

屬性	說明
element.style	行類樣式操作
element.className	類名樣式操作

方式1：通過操作style屬性
**元素對象的style屬性也是一個對象！
**元素對象.style.樣式屬性 = 值;

注意
1、JS裏面的樣式採取駝峯命名法、如：fontSize、backgroundColor
2、JS修改style樣式操作、產生的是行類樣式、css權重更高

例子

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

顯示隱藏文本框案例

 <style>
        input {
            color: #999;
        }
    </style>
</head>

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

通過操作className屬性

元素對象.className = 值; 因爲class是關鍵字，所有使用className。

操作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>

新浪註冊案例

  <title>訪新浪註冊頁面</title>
    <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>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">請輸入6~16位密碼</p>
    </div>
</body>
<script>
    // 如果輸入正確則提示正確的信息顏色爲綠色小圖標變化
    // 如果輸入不是6到16位，則提示錯誤信息顏色爲紅色 小圖標變化
    // 因爲裏面變化樣式較多，我們採取className修改樣式
    var ipt = document.querySelector('input');
    var p = document.querySelector('p');
    //失去焦點時
    ipt.onblur = function () {
        if (ipt.value.length < 6 || ipt.value.length > 16) {
            p.className = 'message wrong';
            p.innerHTML = '您輸入的格式錯誤的'

        } else {
            p.className = 'message right';
            p.innerHTML = '您輸入的格式正確的';
        }

    }

</script>

操作元素小結

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

外行也能讀懂的網絡硬件設備功能原理速成

Vue-基本使用、模板語法(插值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構)

git與gitHub的使用

JS高級-類與對象

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

JS高級-函數定義與調用、函數內的this指向、改變this指向方法、閉包、遞歸、嚴格模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結