從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

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

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

1、對樣式的操作

1.1、點選按鈕設定 div 的寬高和背景顏色

<body>
<input type="button" value="顯示顏色" id="btn">
<div id="dv"></div>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        my$("dv").style.width = "200px";
        my$("dv").style.height = "100px";
        my$("dv").style.backgroundColor = "pink";
    };
</script>
</body>

凡是 css 屬性時由多個單詞構成的，那麼在 js 中設定的時候需要把 "-" 去掉，然後除第一個單詞的首字母大寫即可。

比如：css裡面的 background-color，在js裡面的寫法是 backgroundColor.

1.2、點選按鈕隱藏和顯示 div 標籤

<body>
<input type="button" value="hide" id="btn">
<div id="dv" style="width: 200px; height: 100px; background-color: pink;"></div>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        if(this.value === "hide") {
            my$("dv").style.display = "none";
            this.value = "show";
        }else if(this.value === "show") {
            my$("dv").style.display = "block"; // block是顯示標籤
            this.value = "hide";
        }
    };
</script>
</body>

1.3、網頁開關燈

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
            background-color: #000;
        }
    </style>
</head>
<body class="">
<input type="button" value="ON/OFF" id="btn">

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        document.body.className = document.body.className !== "cls" ? "cls" : "";
    };
</script>
</body>

document.body 可以選中 body 標籤。

1.4、阻止超連結預設跳轉

<body>
<!--方式一-->
<a href="http://www.baidu.com" onclick="alert('------'); return false;">百度</a>

<!--方式二-->
<a href="http://www.baidu.com" onclick="return f1()">百度</a>

<script>
    function f1() {
        alert("---------");
        return false;
    }
</script>

<!--方式三-->
<a href="http://www.baidu.com" id="ah">百度</a>
<script>
    document.getElementById("ah").onclick = function () {
        alert("------");
        return false;
    };

<!--方式四-->
<a href="http://www.baidu.com" id="ah">百度</a>
<script>
    document.getElementById("ah").onclick = function (e) {
        alert("------");
        e.preventDefault();
    };
</script>
</body>

阻止超連結的跳轉：返回給 onclick 事件一個return false，而不單單是 false。

方式二：當使用內聯 js 的時候，onclick 裡面是 f1() 而不是 f1。是函式的執行，而不是函式體本身。但是在外面寫 js 的時候，賦值給 onclick 的是函式體本身，認不是函式的執行。

方式二中之所以加 return，是因為 f1() 執行後返回的是 false，而不是 return false，所以要加一個 return。

方式四：呼叫事件引數物件的 preventDefault() 方法：e.preventDefault(); 可以阻止超連結跳轉。注意 IE8 不支援。

1.5、點選小圖在小圖下顯示大圖

<a href="images/2.JPG" id="ah"><img src="images/Daotin.png"></a>
<img src="" id="im">
<script src="common.js"></script>
<script>
    my$("ah").onclick = function () {
        my$("im").src = this.href;
        return false;
    };
</script>

使用 return false; 阻止連結原本的跳轉。

1.6、列表高亮顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>

<script src="common.js"></script>
<script>
    var liObjs = document.getElementsByTagName("li");

    for(var i=0; i<liObjs.length; i++) {
        // 滑鼠進入事件
        liObjs[i].onmouseover = function () {
            this.style.backgroundColor = "pink";
        };
        // 滑鼠離開事件
        liObjs[i].onmouseout = function () {
            this.style.backgroundColor = ""; // 空表示恢復之前的顏色
        };
    }
</script>
</body>
</html>

1.7、通過 name 屬性獲取元素

<input type="button" value="按鈕" id="btn"><br>
<input type="text" value="lvonve" name="nm1"><br>
<input type="text" value="lvonve" name="nm2"><br>
<input type="text" value="lvonve" name="nm1"><br>
<input type="text" value="lvonve" name="nm3"><br>
<input type="text" value="lvonve" name="nm1"><br>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        var inputs = document.getElementsByName("nm1");

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "Daotin";
        }
    };
</script>

通過 name 屬性獲取元素適用於表單標籤，基本標籤沒有 name 屬性

基本標籤：div,p,h1,ul,li,br等

表單標籤：input, select,option,form,textarea,datalist,label等

1.8、根據類樣式的名字獲取元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="cls">第一個p標籤</p>
    <p>第二個p標籤</p>
    <span class="cls">第一個span</span><br>
    <span>第二個span</span>
    <div>第一個div</div>
    <div class="cls">第二個div</div>
    <input type="button" value="按鈕" id="btn">

    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function () {
            var objs = document.getElementsByClassName("cls");

            for(var i=0; i<objs.length; i++) {
                objs[i].style.backgroundColor = "red";
            }
        };
    </script>
</body>

注意：getElementsByClassName 在IE8等低版本瀏覽器不支援。

2、獲取元素的方式總結

1、根據 id 的屬性的值獲取元素，返回值是一個元素物件

document.getElementById("id屬性的值");

2、根據標籤名獲取元素，返回值是包含多個元素物件的偽陣列

document.getElementsByTagName("標籤名字");

3、根據 name 屬性的值獲取元素，返回值是包含多個元素物件的偽陣列

document.getElementsByName("name屬性的值");

4、根據 class 類樣式的名字獲取元素，返回值是包含多個元素物件的偽陣列

document.getElementsByClassName("class類樣式的值");

5、根據 CSS 選擇器獲取元素，返回值是一個元素物件

document.querySelector("#id屬性的值");
document.querySelector("標籤的名字");
document.querySelector(".class類樣式的值");

6、根據 CSS 選擇器獲取元素，返回值是包含多個元素物件的偽陣列

document.querySelectorAll("#id屬性的值");
document.querySelectorAll("標籤的名字");
document.querySelectorAll(".class類樣式的值");

注意區分是名字還是值。

3、案例：模擬搜尋框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            color: gray;
        }
    </style>
</head>
<body>
    <input type="text" value="請輸入搜尋內容">

    <script src="common.js"></script>
    <script>
        // 獲取文字框物件
        var inputObj = document.getElementsByTagName("input")[0];

        // 為文字框註冊獲取焦點事件
        inputObj.onfocus = function () {
            if(this.value === "請輸入搜尋內容") {
                this.value = "";
                this.style.color = "#000";
            }
        };

        // 為文字框註冊失去焦點事件
        inputObj.onblur = function () {
            if(this.value.length === 0) {
                this.value = "請輸入搜尋內容";
                this.style.color = "gray";
            }
        };
    </script>
</body>

文字框註冊失去焦點事件的時候使用 this.value.length === 0，而不使用 this.value === "請輸入搜尋內容" 是因為數字的比較比字串的比較效率更高。

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

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

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

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 DOM（六）為元素繫結與解綁事件

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

從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性

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

從零開始學 Web 之 DOM（五）元素的建立

從零開始學 Web 之 DOM（七）事件冒泡

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > +------------------------------------------------------------ > github：https://github.com/Dao

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

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

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

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

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

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

從零開始學 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之HTML（二）標籤、超連結、特殊符號、列表、音樂、滾動、head等

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

從零開始學 Web 之 Ajax（五）同步非同步請求，資料格式

一、同步請求與非同步請求同步請求：在使用者進行請求傳送之後，瀏覽器會一直等待伺服器的資料返回，如果網路延遲比較高，瀏覽器就一直卡在當前介面，直到伺服器返回資料才可進行其他操作。非同步請求：在使用者進行請求傳送之後，瀏覽器可以自由操作頁面中其他的元素，當伺服器放回資料的時候，才觸發相應事件，對返回的資料

從零開始學 Web 之 Ajax（二）PHP基礎語法

一、PHP 基礎語法 1、基本結構所有PHP程式碼都要寫到 <?php ... ?> 裡面。 PHP檔案可以和 HTML 檔案結合進行使用。 PHP檔案的預設副檔名是 ".php"。 PHP程式碼必須在伺服器上執行。 2、列印語句 echo：的作用在頁面中輸入字串（只能列印字串，數字等

從零開始學 Web 之 HTML5（三）網路監聽，全屏，檔案讀取，地理定位介面，應用程式快取

一、網路監聽介面 ononline：網路連通時觸發 onoffline：網路斷開時觸發 window.addEventListener("online", function(){}); window.addEventListener("offline", function(){}); 二、全屏介面全

從零開始學 Web 之 ES6（二）ES5的一些擴充套件

一、json物件擴充套件把一個Json物件轉換成字串 JSON.stringify(js物件/陣列); 把一個json格式的字串轉換成Json物件 JSON.parse(json物件/陣列); 示例： <script type="text/javascript"> var o

從零開始學 Web 之 JavaScript（二）變數

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

從零開始學 Web 之 BOM（二）定時器

一、定時器 BOM 中有兩中方式設定定時器。 1、方式一特點：定時器可以重複使用。 // 引數有兩個： // 第一個引數：定時器定時結束處理函式 // 第二個引數：定時事件，單位毫秒。 // 返回值：定時器id值 var timeId = window.setInterval(function()

從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例

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

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

1、對樣式的操作

1.1、點選按鈕設定 div 的寬高和背景顏色

1.2、點選按鈕隱藏和顯示 div 標籤

1.3、網頁開關燈

1.4、阻止超連結預設跳轉

1.5、點選小圖在小圖下顯示大圖

1.6、列表高亮顯示

1.7、通過 name 屬性獲取元素

1.8、根據類樣式的名字獲取元素

2、獲取元素的方式總結

3、案例：模擬搜尋框

相關推薦