JavaScript基礎視頻教程總結（091-100章）

来源:https://www.cnblogs.com/iflygofy/archive/2019/01/18/10287834.html
-Advertisement-
Play Games

091-100章總結 091. DOM簡介 什麼是DOM • DOM，全稱Document Object Model文檔對象模型。 • JS中通過DOM來對HTML文檔進行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面。 • 文檔– 文檔表示的就是整個的HTML網頁文檔 • 對象– 對象表示將... ...


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>091-100章總結</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>

<pre>
091. DOM簡介
什麼是DOM
• DOM，全稱Document Object Model文檔對象模型。
• JS中通過DOM來對HTML文檔進行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面。
• 文檔– 文檔表示的就是整個的HTML網頁文檔
• 對象– 對象表示將網頁中的每一個部分都轉換為了一個對象。
• 模型– 使用模型來表示對象之間的關係，這樣方便我們獲取對象（倒樹模型）。
節點
• 節點Node，是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱為是一個節點。
• 比如：html標簽、屬性、文本、註釋、整個文檔等都是一個節點。
• 雖然都是節點，但是實際上他們的具體類型是不同的。
• 比如：標簽我們稱為元素節點、屬性稱為屬性節點、文本稱為文本節點、文檔稱為文檔節點。
• 節點的類型不同，屬性和方法也都不盡相同。
• 常用節點分為四類
– 文檔節點：整個HTML文檔
– 元素節點：HTML文檔中的HTML標簽
– 屬性節點：元素的屬性
– 文本節點：HTML標簽中的文本內容
節點的屬性

文檔節點（document）
• 文檔節點document，代表的是整個HTML文檔，網頁中的所有節點都是它的子節點。
• document對象作為window對象的屬性存在的，我們不用獲取可以直接使用。
• 通過該對象我們可以在整個文檔訪問內查找節點對象，並可以通過該對象創建各種節點對象。
元素節點（Element）
• HTML中的各種標簽都是元素節點，這也是我們最常用的一個節點。
• 瀏覽器會將頁面中所有的標簽都轉換為一個元素節點，我們可以通過document的方法來獲取元素節點。
• 比如：
– document.getElementById()
– 根據id屬性值獲取一個元素節點對象。
屬性節點（Attr）
• 屬性節點表示的是標簽中的一個一個的屬性，這裡要註意的是屬性節點並非是元素節點的子節點，而是元素節點的一部分。
• 可以通過元素節點來獲取指定的屬性節點。
• 例如：
– 元素節點.getAttributeNode("屬性名");
• 註意：我們一般不使用屬性節點。
文本節點（Text）
• 文本節點表示的是HTML標簽以外的文本內容，任意非HTML的文本都是文本節點（包括換行和空格）。
• 它包括可以字面解釋的純文本內容。
• 文本節點一般是作為元素節點的子節點存在的。
• 獲取文本節點時，一般先要獲取元素節點。在通過元素節點獲取文本節點。
• 例如：
– 元素節點.firstChild;
– 獲取元素節點的第一個子節點，一般為文本節點。
</pre>
<button id="btn001">我是一個按鈕</button>
<script type="text/javascript">
    console.log("第091");
    
    /*
     * 瀏覽器已經為我們提供 文檔節點 對象這個對象是window屬性
     *  可以在頁面中直接使用，文檔節點代表的是整個網頁
     */
    console.log(document);
    //獲取到button對象
    var btn001 = document.getElementById("btn001");
    //修改按鈕的文字
    btn001.innerHTML = "I'm Button";
</script>

<pre>
092. 事件的簡介
• 事件，就是文檔或瀏覽器視窗中發生的一些特定的交互瞬間。
• JavaScript 與 HTML 之間的交互是通過事件實現的。
• 對於 Web 應用來說，有下麵這些代表性的事件：點擊某個元素、將滑鼠移動至某個元素上方、按下鍵盤上某個鍵，等等。
事件發生以後要處理這個事件（比如你親了某人一下，某人有什麼反應）。
</pre>
<!--
    我們可以在事件對應的屬性中設置一些js代碼，這樣當事件被觸發時，這些代碼將會執行
    這種寫法我們稱為結構和行為耦合，不方便維護，不推薦使用 
-->
<button id="btn" onclick="alert('討厭，你點我幹嘛！');">我是一個按鈕點我</button>
<button id="btn002">我是一個按鈕點我</button>
<script type="text/javascript">
    console.log("第092");
    
    /*
     * 事件，就是用戶和瀏覽器之間的交互行為，
     *  比如：點擊按鈕，滑鼠移動、關閉視窗。。。
     */
    //獲取按鈕對象
    var btn002 = document.getElementById("btn002");
    /*
     * 可以為按鈕的對應事件綁定處理函數的形式來響應事件
     *  這樣當事件被觸發時，其對應的函數將會被調用
     */
    
    //綁定一個單擊事件
    //像這種為單擊事件綁定的函數，我們稱為單擊響應函數
    btn002.onclick = function(){
        alert("你還點~~~");
    };
    
</script>

<pre>
093. 文檔的載入
瀏覽器在載入一個頁面時，是按照自上向下的順序載入的，讀取到一行就運行一行,如果將script標簽寫到頁面的上邊，在代碼執行時，頁面還沒有載入，頁面沒有載入DOM對象也沒有載入，會導致無法獲取到DOM對象。
onload事件會在整個頁面載入完成之後才觸發，為window綁定一個onload事件，該事件對應的響應函數將會在頁面載入完成之後執行，這樣可以確保我們的代碼執行時所有的DOM對象已經載入完畢了。
註意：window.onload一個頁面只能寫一個，多個一起會執行最後一個，可以寫個方法解決。
</pre>
<script type="text/javascript">
    console.log("第093");
    
    function btn003(){
        //獲取id為btn的按鈕
        var btn003 = document.getElementById("btn003");
        //為按鈕綁定一個單擊響應函數
        btn003.onclick = function(){
            alert("hello");
        };
    };
</script>
<button id="btn003">我是一個按鈕</button>

<pre>
094. DOM查詢
獲取元素節點
• 通過document對象調用
1. getElementById()
– 通過id屬性獲取一個元素節點對象
2. getElementsByTagName()
– 通過標簽名獲取一組元素節點對象,偽數組
3. getElementsByName()
– 通過name屬性獲取一組元素節點對象
</pre>

<pre>
095. DOM查詢2
獲取元素節點的子節點
• 通過具體的元素節點調用
1. getElementsByTagName()
– 方法，返回當前節點的指定標簽名後代節點
2. childNodes
– 屬性，表示當前節點的所有子節點
3. firstChild
– 屬性，表示當前節點的第一個子節點
4. lastChild
– 屬性，表示當前節點的最後一個子節點
</pre>

<pre>
096. DOM查詢3
獲取父節點和兄弟節點
• 通過具體的節點調用
1. parentNode
– 屬性，表示當前節點的父節點
2. previousSibling
– 屬性，表示當前節點的前一個兄弟節點
3. nextSibling
– 屬性，表示當前節點的後一個兄弟節點
</pre>

<div class="clearfix">
    <div id="total">
        <div class="inner">
            <p>你喜歡哪個城市?</p>
            <ul class="clearfix" id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>東京</li>
                <li>首爾</li>
            </ul>
            <p>你喜歡哪款單機游戲?</p>
            <ul class="clearfix" id="game">
                <li id="rl">紅警</li>
                <li>實況</li>
                <li>極品飛車</li>
                <li>魔獸</li>
            </ul>
            <p>你手機的操作系統是?</p>
            <ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
        </div>
        <div class="inner">
            <p>gender:</p>
            <p>
                <span>
                    <input class="hello" id="male" type="radio" name="gender" value="male"/>
                    <label for="male">male</label>
                </span>
                <span>
                    <input class="hello" id="female" type="radio" name="gender" value="female"/>
                    <label for="female">female</label>
                </span>
            </p>
            <p>name:<input type="text" name="name" id="username" value="abcde"/></p>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj節點</button></div>
        <div><button id="btn02">查找所有li節點</button></div>
        <div><button id="btn03">查找name=gender的所有節點</button></div>
        <div><button id="btn04">查找#city下所有li節點</button></div>
        <div><button id="btn05">返回#city的所有子節點</button></div>
        <div><button id="btn06">返回#phone的第一個子節點</button></div>
        <div><button id="btn07">返回#bj的父節點</button></div>
        <div><button id="btn08">返回#android的前一個兄弟節點</button></div>
        <div><button id="btn09">返回#username的value屬性值</button></div>
        <div><button id="btn10">設置#username的value屬性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
</div>
<script type="text/javascript">
    console.log("第094,095,096");
    
    // 定義一個通用點擊事件函數
    function myClick(btn,fun){
        var btn = document.getElementById(btn);
        btn.onclick = fun;
    };
    myClick("btn01",function(){
        var bj = document.getElementById('bj');
        alert(bj.innerHTML);
    });
    myClick("btn02",function(){
        var lis = document.getElementsByTagName("li"); //一組元素節點對象
        //alert(lis[0]);
        for(var i=0 , liLen = lis.length; i<lis.length; i++){
            console.log(lis[i].innerHTML);
        }
    });
    myClick("btn03",function(){
        var names = document.getElementsByName("gender");//一組元素節點對象
        /*
         * innerHTML用於獲取元素內部的HTML代碼的
         *  對於自結束標簽，這個屬性沒有意義
         */
        //alert(inputs[i].innerHTML);
        /*
         * 如果需要讀取元素節點屬性，
         *  直接使用 元素.屬性名
         *      例子：元素.id 元素.name 元素.value
         *      註意：class屬性不能採用這種方式，
         *          讀取class屬性時需要使用 元素.className
         */
        for(var i=0;i<names.length;i++){
            alert(names[i].value);
        }
    })
    myClick("btn04",function(){
        var city = document.getElementById('city');
        var lis = city.getElementsByTagName('li'); //返回當前節點的指定標簽名後代節點
        //alert(lis[0]);
        for(var i=0;i<lis.length;i++){
            alert(lis[i].innerHTML);
        }
    });
    myClick("btn05",function(){
        var city = document.getElementById('city');
        var cns = city.childNodes;
        /*
         * childNodes屬性會獲取包括文本節點在內的所有節點
         * 根據DOM標簽標簽間空白也會當成文本節點
         * 註意：在IE8及以下的瀏覽器中，不會將空白文本當成子節點，
         *  所以該屬性在IE8中會返回4個子元素而其他瀏覽器是9個
         */
        //alert(cns.length);
        for(var i=0;i<cns.length;i++){
            alert(cns[i]);
        }
        /*
         * children屬性可以獲取當前元素的所有子元素
         */
        var cns2 = city.children;
        alert(cns2.length);
    });
    myClick("btn06",function(){
        var phone = document.getElementById('phone');
        var fir = phone.firstChild; // 獲取到當前元素的第一個子節點（包括空白文本節點）
        alert(fir);
        //firstElementChild獲取當前元素的第一個子元素
        /*
         * firstElementChild不支持IE8及以下的瀏覽器，
         *  如果需要相容他們儘量不要使用
         */
        fir = phone.firstElementChild;
        alert(fir);
    });
    myClick("btn07",function(){
        var bj = document.getElementById('bj');
        var pn = bj.parentNode;
        alert(pn.innerHTML);
        /*
         * innerText
         *  - 該屬性可以獲取到元素內部的文本內容
         *  - 它和innerHTML類似，不同的是它會自動將html標簽去除
         */
        alert(pn.innerText);
    });
    myClick("btn08",function(){
        var android = document.getElementById('android');
        var ps = android.previousSibling; //前一個兄弟節點（也可能獲取到空白的文本）
        alert(ps);
        //previousElementSibling獲取前一個兄弟元素，IE8及以下不支持
        var ps = android.previousElementSibling;
        
        alert(ps);
    });
    myClick("btn09",function(){
        var username = document.getElementById('username');
        var um = username.value;
        alert(um);
    });
    myClick("btn10",function(){
        var username = document.getElementById('username');
        username.value = "今天天氣真好。";

    });
    myClick("btn11",function(){
        var bj = document.getElementById('bj');
        alert (bj.innerHTML);
        alert (bj.innerText);
        alert(bj.firstChild.nodeValue);
    });
</script>

<pre>
097. 圖片切換的練習
</pre>
<div class="img-exercise">
    <p id="infor"></p>
    <img src="images/1.jpg" alt="1" />
    <button id="prev">上一個</button>
    <button id="next">下一個</button>
</div>
<script type="text/javascript">
    console.log("第097");
    
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var img = document.getElementsByTagName('img')[0];
    var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
    var imgArrayLength = imgArray.length;
    var infor = document.getElementById('infor');
    var index = 0;
    infor.innerHTML = "一共"+imgArrayLength+"張圖片，當前是第"+(index
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript基礎視頻教程總結（101-110章）
    101-110章總結 101. dom查詢的剩餘方法 我是第一個box1我是box1中的div 我是box1中的div 我是box1中的div 我是box1中的div 102. dom增刪改 你喜歡哪個城市? 北... ...
  • js 獲取二級功能變數名稱
    js獲取頁面完整地址： window.location.href; var s =" https://ejym.baidu.com"; var h = s.split(".")[0]; var a = h.split("//")[1]; alert(a); a的結果是：ejym ...
  • JavaScript中的arguments對象
    arguments 是一個類似數組的對象, 對應於傳遞給函數的參數。 語法 arguments 描述 arguments對象是所有函數中可用的局部變數。你可以使用arguments對象在函數中引用函數的參數。此對象包含傳遞給函數的每個參數的條目，第一個條目的索引從0開始。例如，如果一個函數傳遞了三個 ...
  • thymeleaf的配置
    1、在springboto項目中使用thymeleaf標簽，必須先添加依賴，如下。 2、在application.properties中配置一些常用的thymeleaf，如下。 可參考博客:https://blog.csdn.net/ice_lemon_g/article/details/73609 ...
  • exception processing, template error resolving template
    錯誤信息:Exception processing template “/view/df”: Error resolving template “/view/df”, template might not exist or might not be accessible by any of the ...
  • [node.js] fs.renameSync()報錯
    初學node.js，跟著node入門，操作了一遍。在最後一步，上傳圖片並顯示時遇到報錯 根據報錯信息，查找到相應的代碼， 首先想到的是代碼中是相對路徑，導致不能查找到文件所在的位置，於是將路徑補全 還是同樣的報錯 仔細觀察後發現在路徑名中可能存在的左右反斜杠的問題。即在windows中路徑名間隔符為 ...
  • Timeline Style
    from: https://freefrontend.com/css-timelines/ https://bootstrapthemes.co/items/resources/timeline/ https://github.com/twbs/bootstrap/releases css: htm ...
  • 轉：從輸入url到顯示網頁發生了什麼
    互聯網內各網路設備間的通信都遵循TCP/IP協議，利用TCP/IP協議族進行網路通信時，會通過分層順序與對方進行通信。分層由高到低分別為：應用層、傳輸層、網路層、數據鏈路層。發送端從應用層往下走，接收端從數據鏈路層網上走 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類