從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作

阿新 • • 發佈：2019-01-15

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、DOM概念

DOM 的全稱為：Document Object Model 文件物件模型

我們把 html 檔案看成一個文件，因為萬物皆物件，所以這個文件也是一個物件。這個文件中所有的標籤都可以看成一個物件，比如 div 標籤，p 標籤等。

1、相關概念

html 頁面有一個根標籤 html 標籤。
標籤也叫元素，也叫物件。

頁面中的頂級物件：document。

節點（node）：頁面中所有的內容都是節點。包括標籤，屬性，文字等

xml 檔案也可以看成一個文件。
html：側重於展示資料。
xml：側重於儲存資料。

2、DOM樹

文件下面有根標籤 html，html 下有 head 和 body 標籤，head 下又有 title 等，body 下又有 div 等。

由文件及文件中的所有元素（標籤）組成的樹狀結構，叫樹狀圖（DOM樹）

二、DOM的作用

DOM的作用主要是：操作頁面的元素（標籤）。

DOM經常進行的操作

獲取元素
動態建立元素
對元素進行操作（設定屬性或呼叫其方法）
事件（什麼時機做相應的操作）

三、DOM初體驗

基本上分三步走：

根據 id 等獲取元素
為獲取的元素註冊事件
新增事件處理函式

注意：所有function後面都有分號。

1、對標籤的操作

1.1、點選按鈕，彈出對話方塊

<body>
    <input type="button" value="按鈕" id="btn">
    <script>
        document.getElementById("btn").onclick = function () {
            alert("hahahaha");
        };
    </script>
</body>

1.2、點選按鈕顯示圖片，並設定圖片寬高

<body>
    <input type="button" value="按鈕" id="btn">
    <img src="" id="im">
    <script>
        document.getElementById("btn").onclick = function() {
            document.getElementById("im").src = "1.png";
            document.getElementById("im").width = 600;
            document.getElementById("im").height = 200;
        };
    </script>
</body>

document.getElementById("xxx"); 返回值是一個標籤物件，利用這個物件可以操作其中的元素，像 type，value 等都是它的元素。

注意：html 標籤裡面的 width 和 height 屬性是不需要加 px 的，css 的 style 裡面的寬高才要加。

1.3、點選按鈕修改 p 標籤的內容

<body>
    <input type="button" value="按鈕" id="btn">
    <p id="p1">p標籤</p>
    <script>
        document.getElementById("btn").onclick = function() {
            document.getElementById("p1").innerText = "我是一個P標籤";
        };
    </script>
</body>

凡是成對的標籤，設定中間的中間的文字內容，都是用innerText屬性。

1.4、點選按鈕設定所有的 p 標籤內容

<body>
    <input type="button" value="按鈕" id="btn"/>
    <div>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
    <div>
        <p>Daotin</p>
        <p>Daotin</p>
        <p>Daotin</p>
    </div>

    <script>
        document.getElementById("btn").onclick = function () {
            var pObjs = document.getElementsByTagName("p");         
            
            for(var i=0; i<pObjs.length; i++) {
                pObjs[i].innerText = "world";
            }
        }
    </script>

</body>

如果只想設定第一個 div 裡面的 p標籤怎麼辦呢？

<body>
    <input type="button" value="按鈕" id="btn"/>
    <div id="box">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
    <div>
        <p>Daotin</p>
        <p>Daotin</p>
        <p>Daotin</p>
    </div>

    <script>
        document.getElementById("btn").onclick = function () {
            var pObjs = document.getElementById("box").getElementsByTagName("p");           
            
            for(var i=0; i<pObjs.length; i++) {
                pObjs[i].innerText = "world";
            }
        }
    </script>
</body>

1.5、點選按鈕修改圖片的 alt 和 title 屬性

<body>
<input type="button" value="按鈕" id="btn">
<img src="1.png" alt="Google" title="logo">

<script>
    document.getElementById("btn").onclick = function () {
        var imgObjs = document.getElementsByTagName("img");
        imgObjs[0].alt = "Daotin"; 
        imgObjs[0].title = "nihao";
    };
</script>
</body>

imgObjs[0]：代表的就是偽陣列的第一個物件。

1.6、點選按鈕修改多個文字框的值

<body>
<input type="button" value="點選按鈕填充文字" id="btn"><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>

<script>
    document.getElementById("btn").onclick = function (ev) {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            // 判斷 type 是否為text
            if(inputs[i].type === "text") {
                // 這時候不能使用 innerText ，因為這不是成對的標籤
                inputs[i].value = "Daotin,你好啊";
            }
        }
    };
</script>
</body>

1.7、點選按鈕修改 value 屬性

<body>
<input type="button" value="點選按鈕填充文字" id="btn"><br>

<script>
    var btnObj =  document.getElementById("btn");
    btnObj.onclick = function (ev) {
        // btnObj.value = "Daotin";
        // btnObj.type = "text";
        // btnObj.id = "btn2";
        this.value = "Daotin";
        this.type = "text";
        this.id = "btn2";
    };
</script>
</body>

在一個物件的事件裡面對當前事件的屬性的操作，可以使用this.屬性來修改。

1.8、按鈕的排他功能

<body>
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">

<script>
    // 獲取全部按鈕
    var btnObjs = document.getElementsByTagName("input");

    // 迴圈為所有按鈕註冊點選事件
    for(var i=0; i<btnObjs.length; i++) {
        btnObjs[i].onclick = function (ev) {
            // 先設定點選每個按鈕的時候將所有的按鈕value為lvonve
            for(var j=0; j<btnObjs.length; j++) {
                btnObjs[j].value = "lvonve";
            }
            //再設定當前點選的按鈕為Daotin
            this.value = "Daotin";
        };
    }
</script>
</body>

並不是我們通常想的，點選某一個按鈕的時候，將之前點選的按鈕恢復，而是點選每一個按鈕之前，將所有的按鈕恢復。

1.9、點選圖片修改路徑

<body>
<input type="button" value="lvonve" id="btn">
<img src="1.png" id="im">

<script>
    function myid(id) {
        return document.getElementById(id);
    }
    myid("btn").onclick = function (ev) {
        myid("im").src = "2.jpg";
    };
</script>
</body>

如果有多個地方都使用了document.getElementById("") 的話，可以封裝成一個函式來呼叫。

1.10、點選按鈕選擇性別和興趣

<body>
<input type="button" value="修改性別" id="btn1">
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex" id="nv">女
<input type="radio" value="3" name="sex">保密
<br>
<input type="button" value="選擇興趣" id="btn2">
<input type="checkbox" value="1" name="hobby" id="chi">吃飯
<input type="checkbox" value="2" name="hobby">睡覺
<input type="checkbox" value="3" name="hobby" id="play">打豆豆

<script>
    function my$(id) {
        return document.getElementById(id)
    }

    my$("btn1").onclick = function () {
        my$("nv").checked = true; // 填“checked”等同於true
    };

    my$("btn2").onclick = function () {
        my$("chi").checked = true;// 填“checked”等同於true
        my$("play").checked = true;// 填“checked”等同於true
    };
</script>
</body>

1、在單標籤中，如果屬性對應的值只有一個，而且值和屬性同名，那麼 js 操作 DOM 的時候，這個屬性值可以用布林型別表示。比如：checked="checked" selected="selected" disabled="disabled" readonle="readonly" 等。

2、在上面例子，不管是寫 "checked"還是其他任何的字串，都會選中的，因為非空字串都會被瀏覽器轉換成 true。

3、在 html 中，如果屬性的值只有一個，可以直接寫這個屬性，而不需要賦值，也是有效的。比如：<input type="text" value="文字" readonly /> 這個時候，這個文字框也是被禁用的。

從零開始學 Web 之 CSS3（一）CSS3概述，選擇器

https 兼容問題 3.1 線性 web前端不同錨點 splay lock 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤

一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）； HTML 2.0——19

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 CSS（一）選擇器

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

一、顏色模式顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)）紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理

一、事件冒泡與阻止事件冒泡事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。阻止事件冒泡：在被觸發事件的子元素中新增 return false; 即可。二、事件的觸發之前講的繫結事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麼可以主動觸發事

從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件

一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js

從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 HTML（一）認識前端

大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、什麼是前端前端對於網站來說，

從零開始學 Web 之 JavaScript（一）JavaScript概述

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、JavaScr

從零開始學 Web 之 Ajax（一）伺服器相關概念

一、伺服器和客戶端伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等檔案上傳下載服務：V

從零開始學 Web 之 ES6（一）ES5嚴格模式

一、ECMAScript 5 嚴格模式 1、概述除了正常執行模式，ECMAscript 5添加了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。 2、目的消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

一、邊框圖片邊框圖片：就是給邊框加圖片背景。我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。語法： /* bord

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

遊記 document 空閑 name center 20px 實現 resp 也會大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之